I am using a Wordpress plugin to create a form and unfortunately the plugin doesn't allow to add onClick code and I would like to use Google Event Tracking to perform analytics on the form. What Javascript would I need to be able to add this:
onClick="_trackEvent ('Home', 'ButtonClick', 'Submit')"
To my form button? The ID of the form button is ninja_forms_field_10
Thank you!
It would need to be something like this (using jQuery since it is built in to Wordpress by default):
$('#ninja_forms_field_10').click(function() { _trackEvent('Home','ButtonClick','Submit'); });
Since you need to pass parameters to the function you need to call, you have to wrap it in another function which will then call it.
Related
So a project has been passed to me and there is a button on a Twitter bootstrap sidebar doing a search dynamically. I cannot figure out which calls the button is making, and I need to replicate its functionality with another button. (We want two buttons doing the same thing) is there a way to use jquery (find maybe?) to do this? I was trying something like this:
$side-bar.find('#newSearchButton').on('click', function(){
$side-bar.find('#oldSearchButton')._data.events.click[0].handler;
});
I know this is wrong, but I don't know what to do to make it work. I just want to be able to make the new search button perform the same search as the old search button.
Couldn't you use a function that when new button is clicked, clicks old button, hence doing the magic behind the old button.
$('#newSearchButton').click(function(){
$('#oldSearchButton').click();
});
You can set same callback to a list of objects. In your case, you can do:
$side-bar.find('.MyButton').on('click', function(){
// do something
});
Note that you have to include class="MyButton" to your buttons tags for this to work.
I am using ryanfait.com custom form elements to change the appearance of my dropdown lists in my .net web application. Everything works fine except for .net postbacks on dropdown lists. Having looked at the javascript code for custom work elements I have noticed that the onchange event is overwritten:
if(!inputs[a].getAttribute("disabled")) {
inputs[a].onchange = Custom.choose;
} else {
inputs[a].previousSibling.className = inputs[a].previousSibling.className += " disabled";
}
If I comment out the above code the autopostback works but for other dropdownlists which do not require an autopostback the input value now does not change. Is there a way I can get this working for both scenarios? On ryanfait.com he says:
onChange and other JavaScript events
This script utilizes JavaScript's onChange and other events. Because these events can only be used once, if you want to add more functions to an event, you will need to call them from inside my script.
But I can't work out if I can somehow trigger the autopostback event?
Any help would be very much appreciated!
The easiest way do this is to add a a standard asp:dropdownlist with autopostback, preview your page and then view source, find the list in the HTML source and copy the onChange property. this is what you need to call client side to post the page back.
eg.
onchange="javascript:setTimeout('__doPostBack(\'ddlHolidayType\',\'\')', 0)"
I'd like to create a form where I have checkboxes, and when clicked, they open separate textareas for the user to enter more information in.
If I want to use Django's dynamically created form fields, is there a way that I can put a function call in for each checkbox.
You can dynamically add event handlers using JavaScript. You can add a script that, once the page is loaded, will find all checkboxes you want and add the handlers there. In jQuery, you can write something like this:
$(document).ready(function() {
$(".my_form input[type=checkbox]").change(function() {
//Some code here
});
});
Be careful, I have not tested the code above! But should be enough to get you started.
I'm pretty new to Jeditable and I was wondering if there is a way to generate and submit a custom form with multiple fields instead of just one field?
I've taken a look at this tutorial for some hints and I've made a bit of progress. I'm not sure if I'm on the right track though.
Here's one idea where you can save whatever has been edited in the form. Give the inputs in the form a certain class, call it "my_form". Create a button that initializes the my_form class with JEditable by creating a function called makeEditable(). Also make the Save button have a class which we'll call save_button.
$(function(){
function makeEditable() {
$(".my_form").editable('MyPhpPage.php', {
// YOUR CUSTOMIZATION
submit : '<button class="save_button">Save</button>',
});
makeEditable();
});
You can finally send all the modified data with with a "Submit" button of class "save_button", and that's accomplished with $('.my_form').find('.save_button').click();.
This may be not robust enough for your form as you might want to create constraints such as require all of them to be non-empty. You then just need a bit more JQuery code to do so.
I am currently using a javascript code to make an entire row in my table clickable. Once the row is clicked a function is ran, I am wondering what I can use to redirect to a PHP page and preferably send a post variable along with it. My guess is AJAX but I am not sure how or if it would work.
Javascript
function DoNav(theUrl) {
document.location.href = theUrl;
};
HTML
<tr onclick="DoNav('myphpscript.php');">
I have access to jQuery so that is also an option. Any help is appreciated, Thanks!
If you need to POST the data (not use GET), One easy option is to create a form element on the fly, attach input elements with the values you need and submit it. You can do that like so if you use jQuery:
$(function() {
$('tr').click(function() {
var mail_id = /* get the mail id of this row... not sure where since I dont' have the HTML */
$('body').append('<form method="post" action="myphpscript.php" id="donavform" style="display:none;"></form>');
$('#donavform').append('<input type="hidden" name="mid" value="'+mail_id+'" />');
$('#donavform').submit();
});
});
Hope that makes sense. If not, let me know! It's, okay...
Explanation:
The very first line is a jQuery shortcut way of saying "when the document is done loading..." So, when the page is done loading, I'm going to attach an event listener to all elements in the document. When one of those elements is clicked, we can then extract the mail id (and whatever else you need) that is in relation to that particular table row. So, if you had HTML like this:
<!-- 8435 is the mail ID in this example. -->
<tr id="row3">8435</tr>
Then we could extract the mail_id variable like so:
var mail_id = $(this).html();
Now, we are going to attach a hidden form element to the end of the body of the HTML (it doesn't really matter where we put it since it is hidden... so, the end is fine). In this form element, we set the method to POST and the action to whatever php file you need to POST to. I also set an ID so it's easily referred to in the next step.
I'm now going to select the newly-created form element using its ID and I'm going to append a new hidden input element to it with the appropriate name value pair.
$('#donavform').append('<input type="hidden" name="mid" value="'+mail_id+'" />');
Finally, I'm going to use the jQuery JavaScript submit method to trigger the submit event on the form. This is basically equivalent to pressing the 'submit' button on a normal form.
Try it out, it should work flawlessly.
If you're going to a new page, just submit the form as usual. Put the data in form fields (hidden if required). No need to Ajax, jQuery or any other magic unless you want to stay on the same page and post in the background.
If the amount of data is not ridiculously large, use a query string...
<tr onclick="DoNav('myphpscript.php?key=value');">
Or if you need a natural HTTP post, you can programmatically submit the form with Javascript...
onclick="document.forms[0].submit();"
You could send the data along in a cookie. There's a nice jQuery plugin that helps with setting cookies in the jQuery namespace.
http://plugins.jquery.com/project/cookie