I’m new to programming so please forgive me if this is a dumb question…
I’m attempting to have javascript (or jquery – not sure of the difference) toggle the ‘disabled’ property of the submit button based on periodic form validation checks. It works fine when I key everything into the form, but if I copy and paste from the first password field into the second password field, the disabled property isn’t removed from the button.
Any help would be very much appreciated…
Javascript…
$(':input').focusin(function(){
$(this).css('background-color','#AABEFF');
}).blur(function(){
$(this).css('background-color','white');
});
function check(){
if (($('#first').val()!="") && ($('#last').val()!="") && ($('#email').val()!="") && ($('#password1').val()!="") &&
($('#password2').val()!="") && ($('#phone1a').val()!="") && ($('#phone1b').val()!="") && ($('#phone1c').val()!="")){
if (($('#password1').val())==($('#password2').val()))
{
$('#submit').removeAttr('disabled');
}
else
{
$('#submit').attr('disabled','disabled');
}
}
else
{
$('#submit').attr('disabled','disabled');
}
}
window.setInterval(check, 200);
Form….
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="back">
</div>
<div id="wrapper">
<div id="header">
<div id="logout">
<?php
include 'employer_header.php';
?>
</div>
</div>
<?php
include 'employer_menu.php';
?>
<div id="feature">
</div>
<div id="content">
<div class="pad">
<form method="post" action="employer_register_process.php">
<p>First Name: <br>
<input id="first" type="text" name="firstname" size="30"><br></p>
<p>Last Name: <br>
<input id="last" type="text" name="lastname" size="30"><br></p>
<p>Phone 1: <br>
<input id="phone1a" type="text" name="phone1a" style='width:30px' maxlength="3">-
<input id="phone1b" type="text" name="phone1b" style='width:30px' maxlength="3">-
<input id="phone1c" type="text" name="phone1c" style='width:40px' maxlength="4"><br></p>
<p>Phone 2 (Optional): <br>
<input type="text" name="phone2a" style='width:30px' maxlength="3">-
<input type="text" name="phone2b" style='width:30px' maxlength="3">-
<input type="text" name="phone2c" style='width:40px' maxlength="4"><br></p>
<p>email: <br>
<input id="email" type="text" name="email" size="30"><br></p>
<p>password: <br>
<input id="password1" type="password" name="pass1" size="30" mask="x"><br></p>
<p>retype password: <br>
<input id="password2" type="password" name="pass2" size="30" mask="x"><br></p>
<p ><input id='submit' type="submit" name='submit' value='register' disabled='disabled'></p>
</form>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/register.js"></script>
</body>
</html>
you are not calling your check function.
you should use jquery .keyup() function to check
Here is an example of what your file would look like:
hope that helps