Jump to content

[SOLVED] Preventing button click without all fields filled in...


DBookatay

Recommended Posts

I've seen a script in the past (can't remember where though) where the submit button would only allow you to click it if all the required fields are filled in, if not it was transparent on the page.

 

Because of how my page is layed out, with a "tab" type navigation this would be a good option for my form. Does anyone have a script like this, or know what I am talking about?

Here is a good/basic example:

http://www.w3schools.com/js/js_form_validation.asp

 

You will find that they use an onSubmit for the entire form.  Remove that, and simply do an onChange, to validate the field as they leave it.  When the entire form validates properly you can update your submit button. 

 

Hint: You can use disabled on the button: <input id="submitButton" type="submit" disable="true"> -- When it validates use: document.getElementbyId('submitButton').disable="false";

 

Best, Nathan

 

 

Here is a good/basic example:

http://www.w3schools.com/js/js_form_validation.asp

 

You will find that they use an onSubmit for the entire form.  Remove that, and simply do an onChange, to validate the field as they leave it.  When the entire form validates properly you can update your submit button. 

 

Hint: You can use disabled on the button: <input id="submitButton" type="submit" disable="true"> -- When it validates use: document.getElementbyId('submitButton').disable="false";

 

Best, Nathan

 

Thanks for the lead... After reading your post I found this script: http://www.javascriptkit.com/javatutors/deform4.shtml which is exactly what I was trying to do...

This isn't a great idea actually. Less... knowledgeable.. users may not realize that the button is blanked out because all the fields have not been filled in, and may end up just exiting your site. You are better off leaving the button active, then informing them in some manner that they haven't filled in all the fields.

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.