How can I show button only if the user can input email to input field?-CodePudding

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="[email protected]" name="emp_email" >

<input type="text" placeholder="If you want to delete your account please enter your Email" value="" name="email_pass" >

<input type="button" value="Delete account?" >

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

CodePudding user response：

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="[email protected]" name="emp_email" >

<input type="text" placeholder="If you want to delete your account please enter your Email" value="" name="email_pass" >

<input type="button" value="Delete account?" >

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

CodePudding user response：

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))
  });
});