Search code examples
javascripthtmlformsdisabled-input

Keep submit button disabled until form is complete and confirming password


I know that there are a bunch of posts about this already, but no matter what I try, nothing works for my form.

I simply want the submit button to be disabled until all fields are filled in, and I want $mypassword checked to equal $myconfirmpassword before submitting.

If you can find something that works. THANK YOU SO MUCH!!

Obviously, some things are hidden for privacy purposes, as you can't see my CSS and PHP info.

<div id="container" style="height:700px;">
<a href="login.php" class="anchor"><div id="back">
 <h2>Back</h2>             
 </div></a>
    <div id="registration_container" >
   <table width="300" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#FF9">
    <tr>
<form name="form3" method="post" action="check_finish_registration.php">
        <td>
        <table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FF9">
            <tr>
                <td colspan="3"><strong>Complete Registration </strong></td>
            </tr>
            <tr>
                <td width="2000">First Name</td>
                <td width="6">:</td>
                <td width="294"><?php echo $fname ?></td>
            </tr>
            <tr>
                <td width="2000">Middle Name*</td>
                <td width="6">:</td>
                <td width="294"><input type="text" name="mymname" id="mymname"></td>
            </tr>
            <tr>
                <td width="2000">Last Name</td>
                <td width="6">:</td>
                <td width="294"><?php echo $lname ?></td>
            </tr>
             <tr>
                <td width="2000">Create a Username*</td>
                <td width="6">:</td>
                <td width="294"><input type="text" name="myusername" id="myusername"></td>
            </tr>
             <tr>
                <td width="2000">Create a Password*</td>
                <td width="6">:</td>
                <td width="294"><input type="text" name="mypassword" id="mypassword"></td>
            </tr>
             <tr>
                <td width="2000">Confirm Your Password*</td>
                <td width="6">:</td>
                <td width="294"><input type="text" name="myconfirmpassword" id="myconfirmpassword"></td>
            </tr>
             <tr>
                <td width="2000">Enter your Sigma Number*</td>
                <td width="6">:</td>
                <td width="294"><input type="text" name="mysnumber" id="mysnumber"></td>
            </tr>
             <tr>
                <td width="2000">E-Mail Address*</td>
                <td width="6">:</td>
                <td width="294"><input type="text" name="myemail" id="myemail"></td>
            </tr>
            <tr>


                <td width="2000">* required field</td>
                <td>&nbsp;</td>
                <td><input   type="submit" id='register' value="Register"disabled='disabled'></td>
            </tr>
        </table>
        </td>
</form>

     </tr>
    </table>
    </div>    
</div>

Solution

  • Instead of disabling the submit button, why don't you just try to validate the form so that until the user enters the correct values, the form will not be submitted to the database? And about the password and confirm password fields validation

       <script type="text/javascript">
        function passwordConfirm() {
            var confirmPass = document.getElementById("confirmpassid").value
            if(pass != confirmPass) {
                alert("Mismatching passwords");
            }
          }