Disable submit button unless original form data has changed
You just need to save the orignal values and then check against them after every change.
Example: http://jsfiddle.net/justincook/42EYq/15/
JavaScript:
// Store original values
var orig = [];
$("form :input").each(function () {
var type = $(this).getType();
var tmp = {'type': type, 'value': $(this).val()};
if (type == 'radio') { tmp.checked = $(this).is(':checked'); }
orig[$(this).attr('id')] = tmp;
});
// Check values on change
$('form').bind('change keyup', function () {
var disable = true;
$("form :input").each(function () {
var type = $(this).getType();
var id = $(this).attr('id');
if (type == 'text' || type == 'select') {
disable = (orig[id].value == $(this).val());
} else if (type == 'radio') {
disable = (orig[id].checked == $(this).is(':checked'));
}
if (!disable) { return false; } // break out of loop
});
$('#submit-data').prop('disabled', disable); // update button
});
// Get form element type
$.fn.getType = function () {
if(this[0].tagName == "INPUT")
return $(this[0]).attr("type").toLowerCase()
else
return this[0].tagName.toLowerCase();
}
HTML:
<form id="" action="" method="post">
<input type="text" value="Carl" name="firstname" id="firstname" />
<input type="text" value="Johnson" name="lastname" id="lasttname" />
<input id="radio_1" type="radio" value="female" name="sex" />Female
<input id="radio_2" type="radio" value="male" name="sex" />Male
<select id="country-list" name="countries">
<option value="xx" selected="">Worldwide</option>
<option value="in">India</option>
<option value="us">United States</option>
</select>
<button id="submit-data" disabled="" type="submit">Save changes</button>
</form>
An improved version of @Nigel Angel answer:
/* Disable the forms submissions until they have changed */
$(window).on('load', function (e) {
$('form').each(function(){
$(this).data('serialized', $(this).serialize())
})
.on('change input', function(){
$(this).find(':submit, input[type="image"]')
.prop('disabled', $(this).serialize() == $(this).data('serialized'));
/* Check if input with type files has changed */
var changedFiles = $( ":file" ).filter(function( index ) {
return this.value != this.defaultValue;
}).length;
if ( changedFiles > 0) {
$(this).find(':submit, input[type="image"]')
.prop('disabled', false);
}
})
.find(':submit, input[type="image"]').prop('disabled', true);
});
- Added the input[type="image"] to the list of selectors that perform submission.
- Added a check for changes of input with type file.
- Also shortened the answer to use :submit to cover both cases of button and input.
I know this is a late answer, but this method uses far less code than the accepted answer without needing IDs on fields and without storing a global array.
Simply use .serialize()
to store the data and check if it matches on each change.
http://jsfiddle.net/Pug3H/2/
$('form')
.each(function(){
$(this).data('serialized', $(this).serialize())
})
.on('change input', function(){
$(this)
.find('input:submit, button:submit')
.prop('disabled', $(this).serialize() == $(this).data('serialized'))
;
})
.find('input:submit, button:submit')
.prop('disabled', true)
;