Only enable Submit Button onChange

[DeadlySin3]

Hey guys,

 

I'm trying to learn a bit of javascript (i'm more of a php guy lol) and just playing around, I created a form that submits info into a database using php & mysql and have been toying around with javascript event handlers to manipulate the form. It's been fun so far!

 

I'm trying to figure out how to enable a submit button ONLY when the forms info has changed. I think this can be done using "onChange".

 

# before onChange - print disabled at end of input tag
<input type="submit" name="edit_settings" class="submit" value="Edit This Section" disabled>

 

# after onChange - take away the disabled portion
<input type="submit" name="edit_settings" class="submit" value="Edit This Section">

 

Can this be done this way or am i looking in the wrong direction? Pointers, tips and any other helpful comments/suggestions would be geatly appreciated!

 

 

[jug]

I think what youre after is the onkeyup event (http://www.w3schools.com/jsref/event_onkeyup.asp). Place it on the text input to perform a check on the form info. eg.

 

if(...code here...){

  document.getElementById('submitbuttonidhere').disabled = false;

}

 

Hope this helps

[DeadlySin3]

onKeyup, that may be what i'm looking for! I'll definitely have to look deeper into that, thanks for the tip that's greatly appreciated!

 

One issue I may run into w/that is a user could type something, which would enable the submit - then delete the entered txt which i believe would still keep the submit button enabled?

 

Either way i'll play around w/that event handler and see what I can find out.

[haku]

In that case you will want to check onkeyup whether the value is empty or not. If it's not empty, enable the submit button. If it's empty, disable the submit button.

 

One thing I will suggest however, is putting the submit button into the form enabled, and disabling it on pageload with javascript. The reason for this is that some users may come to your page with javascript disabled, and they won't be able to submit the form, because you have the button disabled. This cuts them off. By disabling the button with javascript, you ensure that even users with javascript are able to submit the form. You should also add a serverside fallback to check if the field has been properly filled in, and if it hasn't, you should stop the processing with an error. This is for users without javascript turned on.