How to show “Email Confirm” Input text-box ONLY when the old email was updated?

Question

Error !!

---

That's what I WANT !

---

I've been struggling trying to figure it out how to show " Email Confirm " Input text-box ONLY when the old email was updated? Can anybody tell me what I missed ? :(

The view started to break when the user doesn't provide the email_again. It's redirect back

• with old input(s)
• errors message(s)
• hide email_again label // I don't want that
• hide email_again input-box // I don't want that

I am not sure what to do now. If any part of my post wasn't clear, please leave a comment - I'll fix it. :)

---

Here is my question :

Can anyone suggest any strategy or solution to fix this issue ?

JS

• Hide #email_again if no input in #email

• Show #email_again if there is an input/change in #email

    $('#email_again_label').hide(); $('#email_again').hide(); $('#email').on('input', function (event) { var text = $(this).val(); if (text === '') { // If email is empty $('#email_again').prop('disabled', true); } else { $('#email_again').prop('disabled', false); $('#email_again_label').show(); $('#email_again').show(); } }); </script> 

---

Answer 1

Using the jQuery change() function you can change the visibility of your #email_again element based upon the value of the #email element. For example:

<script>
$('#email').change(function() {

    if($('#email').val === '') {   
        $('#email_again').hide();
    } else {
        $('#email_again').show();
    }

});
</script>