Keeping the submit button disabled until a change is made

Question

In my VB.NET project, I have a UI with some text input fields and a save/submit button. I want the save button to be in a disabled state on page load, and remain that way until a change is made to one of the inputs. And the save button should get disabled again if the values entered by the user are the same as they were at page load. So basically, the save button should be enabled only when there is an actual change.

How can I do this using jquery?

What have you tried? Is there a certain part that you are having trouble with? — Goose, Oct 22 '12 at 23:02
You're looking for the ["IsDirty Pattern"](http://stackoverflow.com/questions/155739/detecting-unsaved-changes-using-javascript) — MilkyWayJoe, Oct 22 '12 at 23:02
@Shannon I haven't tried anything yet...just trying to think it out before going down an implementation path. Was thinking of something along the lines as what MilkyWayJoe just posted. Am going to look at that. — Prabhu, Oct 22 '12 at 23:04

epascarello · Accepted Answer · 2012-10-22T23:37:21.437

3

$(':input').change( 
    function(){ 
       $("#submitButtonId").prop("disabled",false);
    } 
);

since you said it is dynamic, use on.

$(document).on("change", ":input", 
    function(){ 
       $("#submitButtonId").prop("disabled",false);
    } 
);

edited Oct 22 '12 at 23:37

answered Oct 22 '12 at 23:02

epascarello

204,599
20
195
236

In my case, the user can also add additional inputs dynamically by clicking on an "add one more..." button. Forgot to mention this. How could I modify your code to account for this? Thanks! – Prabhu Oct 22 '12 at 23:12
Thanks. I tried this and it seems like it's the right path for me, except that if the user changes the value back to the original, the button doesn't get disabled again. Any thoughts? – Prabhu Oct 22 '12 at 23:40
You have to build in the logic to loop through all of the elements and check to see if they are the defaultValue. Look at what the other answer with the check. – epascarello Oct 22 '12 at 23:41
@epascarello Won't this always set it to false? – Yatrix Oct 22 '12 at 23:50

score 2 · Answer 2 · answered Oct 22 '12 at 23:03

2

You can handle that in the change event

$('input[type="text"]').on('change', function() {

     // Change event fired..

     $('input[type="submit"]').prop('disabled', false);
});

answered Oct 22 '12 at 23:03

Sushanth --

55,259
9
66
105

Thanks Sushanth, this is the method I chose. – Prabhu Oct 22 '12 at 23:43

Yatrix · Answer 3 · 2018-06-18T16:19:35.783

//This will bind all existing and dynamically added selects onChange to the handler
$(document).on('change', function(e) {
    onChangeHandler();
}

// handle the event
function onChangeHandler() {
    if (checkValues()) {
       $('#yourButtonId').prop("disabled", false);
    }
    else {
       $('#yourButtonId').prop("disabled", true);
    }
}

// check all values against originals - data-* attributes are a good way to store data on 
// an element. So have you can have:
<select id="id1" data-originalvalue="myValue"></select>

// compare the current value to the original value - if any one of them differ, return
// true
function checkValues() {
    $.each($('select[data-originalvalue]'), function() {
       if ($(this).val() !== $(this).attr(data-originalvalue){
           return true;
       }
       return false;
    });
}

This wasn't tested at all, so expect syntax errors. But, I'll let you write some of your own code since you have't actually tried anything yet. =) — Yatrix, Oct 22 '12 at 23:52

Keeping the submit button disabled until a change is made

3 Answers3