JQuery - Disable submit button unless original form data has changed

Question

I found the following code here (Disable submit button unless original form data has changed) and it works but for the life of me, I can't figure out how to change the properties, text and CSS of the same submit button.

I want the text, background and hover background to be different when the button is enabled/disabled and also toggle another DIV visible/hidden.

$('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);

Can someone please provide a sample. I have no hair left to pull out :-)

.find('input:submit, button:submit').css('background-color': '#fff') — Vibhesh Kaul, Aug 18 '15 at 11:55

score 3 · Accepted Answer · answered Aug 18 '15 at 13:34

The answer you've copied isn't that great because a form doesn't have change or input events. Form elements do, instead. Therefore, bind the events on the actual elements within the form. Everything else looks okay except that you need to store the state of whether or not the stored/current data is equal to each other and then act accordingly. Take a look at the demo that hides/shows a div based on the state.

$('form')
.each(function() {
    $(this).data('serialized', $(this).serialize())
})
.on('change input', 'input, select, textarea', function(e) {
    var $form = $(this).closest("form");
 var state = $form.serialize() === $form.data('serialized');    
 $form.find('input:submit, button:submit').prop('disabled', state);
    
    //Do stuff when button is DISABLED
    if (state) {
        $("#demo").css({'display': 'none'});
    } else {
        //Do stuff when button is enabled
        $("#demo").css({'display': 'block'});
    }

    //OR use shorthand as below
    //$("#demo").toggle(!state);
})
.find('input:submit, button:submit')
.prop('disabled', true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <input name="tb1" type="text" value="tbox" />
    <input name="tb2" type="text" value="tbox22" />
    <input type="submit" value="Submit" />
</form>

<div id="demo" style="margin-top: 20px; height: 100px; width: 200px; background: red; display: none;">Data isn't the same as before!</div>

And the rest could be done via CSS using the :disabled selector(CSS3) or whatever is appropriate.

Your example and Yeldar's both work but I think yours is the best solution. Thank you for sharing :-) — Jeff, Aug 18 '15 at 21:24

Yeldar Kurmangaliyev · Answer 2 · 2015-08-18T13:17:30.813

0

The detection of change occurs on change input event.
You can change your code to the following in order to use this calculated value:

$('form')
.each(function(){
    $(this).data('serialized', $(this).serialize())
})
.on('change input', function(){
    var changed = $(this).serialize() != $(this).data('serialized');
    $(this).find('input:submit, button:submit').prop('disabled', !changed);

    // do anything with your changed
 })
.find('input:submit, button:submit')
    .prop('disabled', true)

It is good if you want to work with other divs. However, for styling, it is better to use CSS :disabled selector:

For example, in your CSS file:

[type='submit']:disabled {
    color: #DDDDDD;
}

[type='submit']:disabled {
    color: #CCCCCC;
}

edited Aug 18 '15 at 13:17

answered Aug 18 '15 at 11:54

Yeldar Kurmangaliyev

33,467
12
59
101

Thanks! This solves part of the problem but I still need to change the text of the button and toggle a DIV visible/hidden. – Jeff Aug 18 '15 at 12:05
@Jeff find the commented line "// do anything with your changed". Replace it with logics like 'if (changed) { $(".someDiv").text("text")' or whatever you want. – Yeldar Kurmangaliyev Aug 18 '15 at 12:47
I can make the text and the background color of the submit button change by using the .CSS and .prop but it does not revert back to original if the form inputs are brought back to the original state. Is this possible? Also, you switched from '==' to '!=' in your code edit. Now the button stays disabled, all the time. – Jeff Aug 18 '15 at 13:16
Thanks, Yeldar. I see you added a '!' in front of 'changed'. Now it works. – Jeff Aug 18 '15 at 21:20

Subash · Answer 3 · 2015-08-18T12:45:09.370

You can change the hover style of the button using css. CSS has hover state to target:

[type='submit']:disabled {
    color: #ddd;
}

[type='submit']:disabled:hover {
    background-color: grey;
    color: black;
    cursor: pointer;
    border: none;
    border-radius: 3px;
}

[type='submit']:disabled {
    color: #ccc;
}

For showing and hiding, there are many tricks to do it. I think following would be the simplest trick to do and and easier for you to understand.

Add this in your html

<div id="ru" class="hide">this is russia</div>
<div id="il" class="hide">this is israel</div>
<div id="us" class="hide">this is us</div>
<div id="in" class="hide">this is india</div>

Add this in your css

.hide { 
    display: none; 
    background: red;;
}

Update your javascript like following:

$('form').bind('change keyup', function () {

   .....

    // get id of selected option
    var id = $("#country-list").find(":selected").val();
    $('.hide').hide(); // first hide all of the divs
    $('#' + id).show(); // then only show the selected one

    ....
});

Here is the working jsfiddle. Let me know if this is not what you are looking for and I will update the answer.

JQuery - Disable submit button unless original form data has changed

3 Answers3

Linked