Zie Posted November 24, 2007 Share Posted November 24, 2007 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 More sharing options...
Synook Posted November 24, 2007 Share Posted November 24, 2007 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 More sharing options...
Zie Posted November 24, 2007 Author Share Posted November 24, 2007 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 More sharing options...
Reg Edit Posted November 24, 2007 Share Posted November 24, 2007 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 More sharing options...
Zie Posted November 24, 2007 Author Share Posted November 24, 2007 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 More sharing options...
Reg Edit Posted November 24, 2007 Share Posted November 24, 2007 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 outfunction 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.