Develop Reference

Change event to check change on any form element

I have a from with disabled button, which gets enabled when the form is valid. With the function below I'm checking for changes and it works if the form consists only of inputs. How can I check for change on other elements like select or checkbox?
$("#create-rule-form").parsley();
$('input').on('keyup', function() {
$("#create-rule-form").parsley().validate();
if ($("#create-rule-form").parsley().isValid()) {
$('#create-rule-btn').prop('disabled', false);
} else {
$('#create-rule-btn').prop('disabled', 'disabled');
}
});

Use jQuery's :input selector, it matches all tags that are used for form input.
$(":input").on('edit change').function() {
// code here
});

You can use $('form').find('*') to select all of the form's children and grandchildren, and then apply the event to all of them like below.
Also, on a side note, I believe the event you should handle is change instead of keyup, as keyup will not work with checkboxes and dropdowns.
$('form').find('*').on('change', function() {
//do stuff
});

Change button text but preserve default behavior

I have some simple jQuery to change the text of a button once it's clicked
<button type="submit" id="zipUploadButton" class="btn btn-primary">Upload</button>
$uploadButton.click(function(){
$(this).text('please wait').attr("disabled", "disabled");
});
The trouble is it seems doing this blocks default behavior (a form submission, which I still want to happen). Is there a way to make sure the default behavior is preserved or an alternate way to do what I'm trying above that would work?

Disable the button in form submit event instead of the click event. The following code assume $form contains the parent form of $uploadButton.
$form.submit(function(){
$uploadButton.attr('disabled', 'disabled');
});

You can use a timeout to remove the disabled attribute in order to submit:
For JQuery 1.6+:
$('#zipUploadButton').click(function(){
var button = $(this);
button.prop('disabled', true);
setTimeout(function() {
button.prop('disabled', false);
},1000);
$("#form1").submit();
});
Otherwise, as mentioned in the comments, a form cannot be submitted if the button is disabled: more info
For JQuery 1.5 and below:
To set the disabled attribute, you could use:
button.attr('disabled','disabled');
And to enable again, use .removeAttr()
button.removeAttr('disabled');
Credits

You have to delay disabling the button until after the event has completed. Something like this should help you.
$uploadButton.click(function(){
var $this = $(this);
$this.text('please wait');
setTimeout(function(){
$this.attr("disabled", "disabled");
}, 10);
});

How to uncheck checkbox on back button?

Hi I have numbers of check boxes and below that I have a Button, which will filter data as per check box selection..
When I will click on filter button it will transfer to other page and when I click on back button the checkbox reamains checked.
but I want that when I click on back button then checkbox should be uncheck.
Any help.

For those who have similar issues, add autocomplete="off" to checkbox might help.
https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion

You can reset the checkboxes on page load using jQuery
$('input:checkbox').prop('checked', false);
Demo (Checkbox will be never checked as onload am getting rid of checked property)
ondomready (Place the below code anywhere in your document)
$(document).ready(function(){
$('input:checkbox').prop('checked', false);
});

You may use below code :
window.onbeforeunload = function() {
//unchecked your check box here.
$("input[type='checkbox']").prop('checked', false)
};

Try this when back button is clicked
Use Jquery to clear the checkboxes
$("input[type='checkbox']").each( function() {
$(this).removeAttr('checked');
});

How to click the save button in form automatically using jquery

I have an form with dropdown. whenever i select the drop down once i click save itself it appear it do some action. I want to as auto save when you change the dropdown values.
Here is the fiddle:
http://jsfiddle.net/GGtTw/
jQuery('select[name="dropdown"]').change(function() {
alert(jQuery(this).val());
});
jQuery('#submit').click(function() {
alert('you click submit button');
});
I want once you select the dropdown it automatically submit the values means it automatically click save without noticing to the user.
Any suggestion would be great.
Thanks

Use trigger to simulate a click event for the given object
jQuery('select[name="dropdown"]').change(function() {
jQuery('#submit').trigger('click');
});
jQuery('#submit').click(function() {
alert('you click submit button');
});

just do
$( "#submit" ).trigger( "click" );

Another Approach:
jQuery('select[name="dropdown"]').change(function() {
save();
});
jQuery('#submit').click(function() {
save();
});
function save()
{
alert('Save');
}

Make an ajax call to save from inside your drop down change event. Unless you want to perform a form submit, in that case trigger the click function on the submit like so
jQuery('#submit').trigger('click');
jQuery ajax()

disable all selectbox onchange

below is how i disable all submit button on click
$('form').submit(function(){
// On submit disable its submit button
$('input[type=submit]', this).attr('disabled', 'disabled');
});
how to disable all selectbox onchange easily for all selectbox in the page

Something like this will disable all select boxes:
$('select').attr('disabled', 'disabled');
To tie it to a form submission you can add it to your existing function.
To bind this to a select box's onChange event you can use jQuery's change listener. So if you want all select boxes disabled when any select box changes you can use this:
$('select').change(function(){
$('select').attr('disabled', 'disabled');
});
If you want to operate on a specific select box you can change the first $('select') above to reference that box.

Almost the same as what you're doing above, just change it to select
$('form').submit(function(){
// On submit disable its submit button
$('select', this).attr('disabled', 'disabled');
});