CODEWITHSUNDEEP
javascriptjqueryhtml
DaveP19
DaveP19

Reputation: 167

Hide a div on completion of password

I have a basic input box that once a password is entered, it shows a div. This works fine but I would also like the password input box to disappear. I thought I could just use the same code and change the toggle to hide but the div hides as soon as a letter is pressed.

Question - how do I get it to hide once the password is complete (and correct).

I think I need in if statement saying that 'if the password matches then hide the div' but I'm not sure...

I would also like to put a 1sec delay on hiding the input div too. This is done with the .delay function isn't it?

Any help would be appreciated.

//this shows the div
$(document).ready(function() {
  'use strict';
  $('#ae').on('keyup', function() {
    $('#ae-form').toggle(this.value.trim().toLowerCase() == 'allerganemployee');
  });
});

//this needs to hide the input box		
$(document).ready(function() {
  'use strict';
  $('#ae').on('keyup', function() {
    $('#ae-input').hide(this.value.trim().toLowerCase() == 'allerganemployee');
  });
});
#ae-form {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="allergan box">
  <h2>Registration for Employees</h2>
  <div id="ae-input">
    <p>Please enter your password</p>
    <input type="password" id="ae" />
  </div>
  <div id="ae-form">
    This is the form
  </div>
</div>

Upvotes: 1

Views: 220

Answers (4)

Jai Prak
Jai Prak

Reputation: 3412

Instead of hiding on keyup event try to use focusout so that after entering password it will hide and use delay(time_in_milliseconds) function for delay.

//this shows the div
$(document).ready(function() {
  'use strict';
  $('#ae').on('keyup', function() {
    $('#ae-form').toggle(this.value.trim().toLowerCase() == 'allerganemployee');
  });
});

var delay = function() {
  'use strict';
  $('#ae').on('focusout', function() {
    if(this.value.trim().toLowerCase() == 'allerganemployee'){
					$('#ae-input').delay(1000).hide();
	}
  });
};

//this needs to hide the input box		
$(document).ready(delay());
#ae-form {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="allergan box">
  <h2>Registration for Employees</h2>
  <div id="ae-input">
    <p>Please enter your password</p>
    <input type="password" id="ae" />
  </div>
  <div id="ae-form">
    This is the form
  </div>
</div>

Upvotes: 0

Kannan K
Kannan K

Reputation: 4461

$(document).ready(function() {
   $('#ae-form').hide();
'use strict';
  $('#ae').on('change', function() {
    var a = this.value.trim().toLowerCase();
    setTimeout(function(){ 
      if(a == 'allerganemployee') {
        $('#ae-form').show();
        $('#ae').hide();
        $('#pwlabel').hide();
      } else {
        return;
      }
    }, 3000);
  });
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="allergan box">
  <h2>Registration for Employees</h2>
  <div id="ae-input">
    <p id = "pwlabel">Please enter your password</p>
    <input type="password" id="ae" />
  </div>
  <div id="ae-form">
    This is the form
  </div>
</div>
</body>
</html>

Upvotes: 0

Aswin Ramesh
Aswin Ramesh

Reputation: 1674

//this shows the div
$(document).ready(function() {
  'use strict';
  $('#ae').on('keyup', function() {
    var check =  this.value.trim().toLowerCase() == 'allerganemployee';
    if(check){
     setTimeout(function() {
      $('#ae-input').hide();
      $('#ae-form').toggle(check);
     },1000);
    }
  });
});

//this needs to hide the input box		
$(document).ready(function() {
  'use strict';
  $('#ae').on('keyup', function() {
   
  });
});
#ae-form {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="allergan box">
  <h2>Registration for Employees</h2>
  <div id="ae-input">
    <p>Please enter your password</p>
    <input type="password" id="ae" />
  </div>
  <div id="ae-form">
    This is the form
  </div>
</div>

Upvotes: 0

Ganesh Putta
Ganesh Putta

Reputation: 2681

//this shows the div
$(document).ready(function() {
  'use strict';
  $('#ae').on('keyup', function() {
    $('#ae-form').toggle(this.value.trim().toLowerCase() == 'allerganemployee');
    if(this.value.trim().toLowerCase() == 'allerganemployee'){
      $('#ae-input').hide();
    }
  });
});
#ae-form {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="allergan box">
  <h2>Registration for Employees</h2>
  <div id="ae-input">
    <p>Please enter your password</p>
    <input type="password" id="ae" />
  </div>
  <div id="ae-form">
    This is the form
  </div>
</div>

Upvotes: 1

Related Questions