Databases
StackOverflow2013
Postsdbo
POjavascript - form validation - disabled button
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjavascript - form validation - disabled button
    text
    copied!<p>I'm new to programming so please forgive me if this is a dumb question...</p> <p>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.</p> <p>Any help would be very much appreciated...</p> <p>Javascript...</p> <pre><code> $(':input').focusin(function(){ $(this).css('background-color','#AABEFF'); }).blur(function(){ $(this).css('background-color','white'); }); function check(){ if (($('#first').val()!="") &amp;&amp; ($('#last').val()!="") &amp;&amp; ($('#email').val()!="") &amp;&amp; ($('#password1').val()!="") &amp;&amp; ($('#password2').val()!="") &amp;&amp; ($('#phone1a').val()!="") &amp;&amp; ($('#phone1b').val()!="") &amp;&amp; ($('#phone1c').val()!="")){ if (($('#password1').val())==($('#password2').val())) { $('#submit').removeAttr('disabled'); } else { $('#submit').attr('disabled','disabled'); } } else { $('#submit').attr('disabled','disabled'); } } window.setInterval(check, 200); </code></pre> <p>Form....</p> <pre><code> &lt;html&gt; &lt;head&gt; &lt;link rel="stylesheet" type="text/css" href="style.css" /&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="back"&gt; &lt;/div&gt; &lt;div id="wrapper"&gt; &lt;div id="header"&gt; &lt;div id="logout"&gt; &lt;?php include 'employer_header.php'; ?&gt; &lt;/div&gt; &lt;/div&gt; &lt;?php include 'employer_menu.php'; ?&gt; &lt;div id="feature"&gt; &lt;/div&gt; &lt;div id="content"&gt; &lt;div class="pad"&gt; &lt;form method="post" action="employer_register_process.php"&gt; &lt;p&gt;First Name: &lt;br&gt; &lt;input id="first" type="text" name="firstname" size="30"&gt;&lt;br&gt;&lt;/p&gt; &lt;p&gt;Last Name: &lt;br&gt; &lt;input id="last" type="text" name="lastname" size="30"&gt;&lt;br&gt;&lt;/p&gt; &lt;p&gt;Phone 1: &lt;br&gt; &lt;input id="phone1a" type="text" name="phone1a" style='width:30px' maxlength="3"&gt;- &lt;input id="phone1b" type="text" name="phone1b" style='width:30px' maxlength="3"&gt;- &lt;input id="phone1c" type="text" name="phone1c" style='width:40px' maxlength="4"&gt;&lt;br&gt;&lt;/p&gt; &lt;p&gt;Phone 2 (Optional): &lt;br&gt; &lt;input type="text" name="phone2a" style='width:30px' maxlength="3"&gt;- &lt;input type="text" name="phone2b" style='width:30px' maxlength="3"&gt;- &lt;input type="text" name="phone2c" style='width:40px' maxlength="4"&gt;&lt;br&gt;&lt;/p&gt; &lt;p&gt;email: &lt;br&gt; &lt;input id="email" type="text" name="email" size="30"&gt;&lt;br&gt;&lt;/p&gt; &lt;p&gt;password: &lt;br&gt; &lt;input id="password1" type="password" name="pass1" size="30" mask="x"&gt;&lt;br&gt;&lt;/p&gt; &lt;p&gt;retype password: &lt;br&gt; &lt;input id="password2" type="password" name="pass2" size="30" mask="x"&gt;&lt;br&gt;&lt;/p&gt; &lt;p &gt;&lt;input id='submit' type="submit" name='submit' value='register' disabled='disabled'&gt;&lt;/p&gt; &lt;/form&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;script type="text/javascript" src="js/jquery.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="js/register.js"&gt;&lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload