CODEWITHSUNDEEP
javascriptjquery
Hendry
Hendry

Reputation: 87

Jquery/Javascript check input fields on keyboard touch

I've been googling to get an answer, but i couldn't find what i want. Not sure if i typed my question wrong, but i'll try to explain.

What i'm looking to achieve is : Once the user types, i want my script to run, so my button enables when the 2 passwords are equal to eachother. As soon as the passwords are equal to eachother, the button will be enabled. If not, the button will be disabled.

function test123() {
       var pw1 = $('#pw1').val();
       var pw2 = $('#pw2').val();

       if (pw1 == pw2) {
             console.log('Valid!');
         } else {
             console.log('Not valid!');
         }

         }
<div id='register-div'>
       <form method='POST' action='javascript:test123()'>
           <input name='username' type='text' placeholder='username'>
           <input id='pw1' name='password' type='password' placeholder='password'>
           <input id='pw2' name='password2' type='password' 
           placeholder='password_again'>
           <button type='submit'><a> REGISTER </a></button>
   </form>
   </div>

Upvotes: 1

Views: 1328

Answers (6)

aasim bairagdar
aasim bairagdar

Reputation: 301

Simple...you can use onkeypress event

https://www.w3schools.com/jsref/event_onkeypress.asp

Upvotes: 0

Manav Sharma
Manav Sharma

Reputation: 187

function test123() {
   var pw1 = $('#pw1').val();
   var pw2 = $('#pw2').val();
   if (pw1 == pw2) {
	 $('button').prop('disabled',false)
   } else {
	  $('button').prop('disabled',true)
   }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id='register-div'>
	<form method='POST' action=''>
		<input name='username' type='text' placeholder='username'>
		<input id='pw1' onkeyup="return test123();" name='password' type='password' placeholder='password'>
		<input id='pw2' onkeyup="return test123();" name='password2' type='password' placeholder='password_again'>
		<button disabled type='submit'><a> REGISTER </a></button>
	</form>
</div>

Upvotes: 0

guradio
guradio

Reputation: 15565

$('button').prop('disabled', true)
$('input.pass').on('input', function() {
  var pw1 = $('#pw1').val()
  var pw2 = $('#pw2').val()
  if (pw1 == pw2) {
    $('button').prop('disabled', false)
  } else {
    $('button').prop('disabled', true)
  }
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='register-div'>
  <form method='POST' action='javascript:test123()'>
    <input name='username' type='text' placeholder='username'>
    <input class="pass" id='pw1' name='password' type='password' placeholder='password'>
    <input class="pass" id='pw2' name='password2' type='password' placeholder='password_again'>
    <button type='submit'><a> REGISTER </a></button>
  </form>
</div>

  1. Add event handler on the input with same class pass
  2. Use event input

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337713

To achieve this you can bind an input event to the password fields using unobtrusive JS. You can then enable/disable the button if the values match using prop('disabled'), like this:

$('#pw1, #pw2').on('input', function() {
  var pw1 = $('#pw1').val();
  var pw2 = $('#pw2').val();

  $('button').prop('disabled', pw1 != pw2);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="register-div">
  <form method="POST">
    <input name="username" type="text" placeholder="username">
    <input id="pw1" name="password" type="password" placeholder="password">
    <input id="pw2" name="password2" type="password" placeholder="password_again">
    <button type="submit" disabled="true">REGISTER</button>
  </form>
</div>

Also note that I removed the <a> element you placed inside the <button>, as that is not valid HTML.

Upvotes: 5

RJParikh
RJParikh

Reputation: 4166

Check this code: 

function test123() {
       var pw1 = $('#pw1').val();
       var pw2 = $('#pw2').val();

       if (pw1 == pw2) {
             document.getElementById("submit_btn").disabled = false;  
         } else {
             document.getElementById("submit_btn").disabled = true;  
         }

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='register-div'>
       <form method='POST' action='javascript:test123()'>
           <input name='username' type='text' placeholder='username'>
           <input id='pw1' name='password' type='password' placeholder='password'>
           <input id='pw2' name='password2' type='password' 
           placeholder='password_again' onkeyup='test123()'>
           <button type='submit' id='submit_btn' disabled><a> REGISTER </a></button>
   </form>
   </div>

Upvotes: 1

RemyaJ
RemyaJ

Reputation: 5526

    $('#pw1,#pw2').keyup( function() {
    test123();
});
    function test123() {
           var pw1 = $('#pw1').val(),
             pw2 = $('#pw2').val();

           if (pw1 == pw2) {
                $('button').prop('disabled',false)
             } else {
                $('button').prop('disabled',true)
             }

             }

Upvotes: 3

Related Questions