jQuery removeAttr or prop not working on submitButtons?

Question

Hy there, I've got a little problem with my formhandling here. I try to block the submit Button (ID:#submitForm) until any field in the formular has been changed. Here's my jQuery Code :

// block submit until change
$('#submitForm').prop('disabled', true);
$(':input').change(function() {
    $('#submitForm').prop('disabled', false);
});

And in the site :

<input id="submitForm" type="submit" value="Send Form">

If the User changes any of the other Inputfields the Submit should be enabled to post the changes, a simple alert"MSG" does well but not the release of the disabled property.

Thanks a lot, DR

Seems to working fine [here](http://jsfiddle.net/a99c15mf/). Did you wrap it document ready event? — Alex Char, Dec 15 '14 at 11:33
The change event on the inputs will be fired just if they lose focus. Use `input` instead. http://jsfiddle.net/MelanciaUK/5b3me4d8/1/ — emerson.marini, Dec 15 '14 at 11:35
possible duplicate of [How to detect a textbox's content has changed](http://stackoverflow.com/questions/1481152/how-to-detect-a-textboxs-content-has-changed) — emerson.marini, Dec 15 '14 at 11:38
That should be fine, so the problem must be in code that you haven't shown. Side note: Even if the submit button is disabled, some browsers will submit some forms (typically those with just one input[type=text] in them) if the user presses Enter in the text field, so you have to handle the `submit` event on the form as well. — T.J. Crowder, Dec 15 '14 at 11:38
O.K. the ID is unique but when I change the type="submit" into type="button" everything is working fine - but I can't figure out the problem... can this perhaps get in conflict with jquery.validation Plugin ? — darthrox, Dec 15 '14 at 11:45
@darthrox: Perhaps you could create a Stack Snippet demonstrating the problem and put it in the question. For those, I usually use a form like this: `
` or similar. — T.J. Crowder, Dec 15 '14 at 11:47

darthrox · Accepted Answer · 2014-12-15T14:15:57.610

Thanks for all your support and sorry for stealing your time - the problem was the simultaneous use of jQuery UI (which sets additional options to the buttons, but I didn't tell you).

I solved the problem now with a mixture of the given solutions :

// set the form(ID) submit to the button(ID) 
$("#ID_OF_THE_BUTTON").click(function() {
    $("#ID_OF_THE_FORM").submit();
});
// set submit button(s)
$("#ID_OF_THE_BUTTON").button();
// block submit until change
$("#ID_OF_THE_BUTTON" ).button("disable");
$(":input").on("input change paste", function() {
        $("#ID_OF_THE_BUTTON").button("enable");
});

..and the button:

<button id="ID_OF_THE_BUTTON">User eintragen</button>

Now the submitting of the form blocked until a change in any of the given form-elements is done.

jQuery removeAttr or prop not working on submitButtons?

1 Answers1