Jump to content

Only enable Submit Button onChange


DeadlySin3

Recommended Posts

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!

 

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.