Jump to content

Javascript Submit Button Enable/Disable


Zie

Recommended Posts

I am currently working on a sign up page that is using php/ajax to check if username is taken, is passwords are same and that they are the correct length, and that the email address is valid. My problem is, I cannot find a way to keep the submit button disabled until all of these fields are filled out, and filled out correctly so that username isn't taken, passwords are same, and email address is valid. Only after the fields are filled out correctly, the submit button will be enabled.If anyone can point me in the right direction on how to check if ALL of those fields are filled out correctly and how to keep the button disabled (I know how to disable it already with javascript), I would be very grateful!`Zie

Link to comment
Share on other sites

Well, you can just do

if (document.getElementById('field1').value == "" || document.getElementById('field2').value == "" || document.getElementById('field3').value == "" || etc...) //If true one of the fields is not filled

Link to comment
Share on other sites

Thanks for the response, but I already have my ajax script telling them if the username is taken or password/email address isn't right. I am trying to come up with a way that will enable the submit button only when all of those fields are valid (username isn't taken, password/email fields are valid).

Link to comment
Share on other sites

Thanks for the response, but I already have my ajax script telling them if the username is taken or password/email address isn't right. I am trying to come up with a way that will enable the submit button only when all of those fields are valid (username isn't taken, password/email fields are valid).
Well, supposing you have a submit button with id "mysubmit", and a validation function "allfieldsvalid()" that returns true/false, then after each ajax call you can use:
document.getElementById('mysubmit').disabled = !allfieldsvalid();

Link to comment
Share on other sites

Okay, I have created this function that sort of works but not everytime (for some reason). I have ajax writing the info to display in a tag with the id being different for each field (user, pass, email), but the class different for each response per field (each field has 2 possible values for id, inv and val), anyways, here is the code:us, ps & es are all id's of what ajax writes out

function regDisable() {	if (document.getElementById("us").class == "val" && document.getElementById("ps").class == "val" && document.getElementById("es").class == "val") {		document.getElementById("register").disabled=false;	}	else  {		document.getElementById("register").disabled=true;	}}

I have this in a .js file which I have included in the file with the form. I have the function executed with the onkeyup event (could this be a problem since the ajax script is being executed from the same onkeyup? I have also tried onchange for the function above as well.).

Link to comment
Share on other sites

Okay, I have created this function that sort of works but not everytime (for some reason). I have ajax writing the info to display in a tag with the id being different for each field (user, pass, email), but the class different for each response per field (each field has 2 possible values for id, inv and val), anyways, here is the code:us, ps & es are all id's of what ajax writes out
function regDisable() {	if (document.getElementById("us").class == "val" && document.getElementById("ps").class == "val" && document.getElementById("es").class == "val") {		document.getElementById("register").disabled=false;	}	else  {		document.getElementById("register").disabled=true;	}}

I have this in a .js file which I have included in the file with the form. I have the function executed with the onkeyup event (could this be a problem since the ajax script is being executed from the same onkeyup? I have also tried onchange for the function above as well.).

You are triggering the ajax callback from the onkeyup/onchange event. One or other event may be more suitable; you must judge that. But, more importantly, I would not execute the submit button enable/disable from the same event. I would do that when the onreadystate change event is fired on completion of the ajax call, at which time the data you mentioned earlier is available for this validation.
Link to comment
Share on other sites

Archived

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

×
×
  • Create New...