I have a user profile update form and a delete account button. I want to show the delete account button only if the user can input their email.
$(document).ready(function() {
var user_email = $('input[name="emp_email"]').attr('placeholder');
$(".email-pass-delete").on("input", function() {
var current_email = $('.email-pass-delete').val();
if (user_email == current_email) {
$(".del_acount").removeClass("hide_del_button");
}
});
});.hide_del_button {
display: none;
}<input type="text" disabled="" placeholder="testemail@gmail.com" name="emp_email" class="form-control">
<input type="text" placeholder="If you want to delete your account please enter your Email" value="" name="email_pass" class="form-control email-pass-delete">
<input type="button" value="Delete account?" class="btn btn-custom del_acount hide_del_button">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>Your code is working, but you forgot the else statement. If the user made it correct once, then changes it, it will keep showing too.
$(document).ready(function() {
var user_email = $('input[name="emp_email"]').attr('placeholder');
$(".email-pass-delete").on("input", function() {
var current_email = $('.email-pass-delete').val();
if (user_email == current_email) {
$(".del_acount").removeClass("hide_del_button");
} else {
$(".del_acount").addClass("hide_del_button");
}
});
});.hide_del_button {
display: none;
}<input type="text" disabled="" placeholder="testemail@gmail.com" name="emp_email" class="form-control">
<input type="text" placeholder="If you want to delete your account please enter your Email" value="" name="email_pass" class="form-control email-pass-delete">
<input type="button" value="Delete account?" class="btn btn-custom del_acount hide_del_button">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>In your actual code you only unhide the button when the email is correct, you have to add an else statement to hide the button again. But there is a more intresting approach which is to use the toggleClass function.
For more info about the toggleClass function, check https://api.jquery.com/toggleclass/
So your js code should look like this:
$(document).ready(function() {
var user_email = $('input[name="emp_email"]').attr('placeholder');
$(".email-pass-delete").on("input", function() {
var current_email = $('.email-pass-delete').val();
$(".del_acount").toggleClass(
"hide_del_button",
!(user_email == current_email))
});
});