如何使用Javascript / jQuery隐藏/显示启用/禁用HTML元素？

Question

Here is what I have :

IF the user does't update their email, hide the email_again

Email _______________

ELSE show email_again ( email has been up dated )

Email _______________

Email Again _______________

GOAL

IF there is an input on email_again, and it's fail the validation when submitting, I want to

⁃   redirect with old input
⁃   show the label of email_again
⁃   show the input of email_again
⁃   enable email_again

ELSE

⁃   Redirect with old input
⁃   Give them error message that Email Again is required
⁃   show the label of email_again
⁃   show the input of email_again
⁃   enable email_again

CODE

  var old_email = $("#email").val();
  $('#email').on('input', function (event) {

  var email = $(this).val();

  if (email === old_email) { 

    $('#email_again').prop('disabled', true);
    $('#email_again_label').hide();
    $('#email_again').hide();

  } else {

    $('#email_again').prop('disabled', false);
    $('#email_again_label').show();
    $('#email_again').show();

  }

}); 

</script>

Can someone help me tweak my code ? or suggest any better choices.

Answer 1

Please try if this is what you need: DEMO

HTML:

<label for="email" id="labemail">E-Mail</label>
<input id="email" name="email" type="text"/>
<label for="emailagain" id="labemailagain" style="display:none">E-Mail again</label>
<input id="emailagain" type="text" name="emailagain" style="display:none"/>
<button id="click">Click</button>

Javascript:

var a = document.getElementById('email');
var al = document.getElementById('labemail');
var bl = document.getElementById('labemailagain');
var b = document.getElementById('emailagain');
var c = document.getElementById('click');
a.addEventListener('keyup',function() {
bl.style.display = '';
b.style.display = '';
});
c.addEventListener('click',function(){

    if (a.value == b.value) {
        al.style.color = 'green';
        bl.style.color = 'green';
        alert('OK - update');
    }
    else if (a.value != '' && b.value == '')
    {
        bl.style.color = 'red';
        alert('You need to repeat your email');
    }
    else if (a.value != b.value)
    {
        bl.style.color = 'red';
        al.style.color = 'red';
        alert('E-Mails does not match');
        a.value = a.value;
        b.value = '';

    }


});

Answer 2

I have worked on this, Check this out. Also check out the DEMO link.

HTML Part:

<div class="container">
    <div class="inputContainer" id="email_container">
        <label for="email">E-Mail</label>
        <input id="email" name="email" type="text"/>
        <span class="inputError" id="email_error"></span>
    </div>
    <div class="inputContainer displayNone" id="email_re_container">
        <label for="email_re">E-Mail Again</label>
        <input id="email_re" name="email_re" type="text"/>
        <span class="inputError" id="email_re_error"></span>
    </div>
    <div class="inputContainer" id="submit_container">
        <button id="submit_email">Submit</button>
    </div>
</div>

CSS Part:

.container {
    float: left;
    width: 180px;
}
.inputContainer {
    float: left;
    min-height: 50px;
}
.displayBlock {
    display: block;
}
.displayNone {
    display: none;   
}
.inputError {
     text-align: right;
    color: #FC0C0C;
    display: block;
    width: 95%;
    font-weight: bold;
    min-height: 15px;
}

JS Part:

$(document).ready(function(){
    $("#email").keyup(function(){
        var email_value = $("#email").val();
        if(email_value != null && email_value != undefined && email_value.trim() != "") {
            $("#email_re_container").removeClass("displayNone");
            $("#email_re_container").addClass("displayBlock");
        }
        else {
            $("#email_re_container").removeClass("displayBlock");
            $("#email_re_container").addClass("displayNone");
            $("#email_re").val("");
        }
    });
    $("#submit_email").click(function(){
        var email_value = $("#email").val();
        var email_re_value = $("#email_re").val();
        if(email_value == null || email_value == undefined || email_value.trim() == "") {
            $("#email_re_container").removeClass("displayBlock");
            $("#email_re_container").addClass("displayNone");
            $("#email_re").val("");
            $("#email").val("");
            alert("Email is Required");
        }
        else if(email_re_value == null || email_re_value == undefined || email_re_value.trim() == "") {
            $("#email_re").val("");
            alert("Email Again is Required");
        }
        else if(email_value != email_re_value) {
            $("#email_re").val("");
            alert("Value Doesn't Matches");
        }

        else if(email_value == email_re_value) {
            alert("Email Matches");
        }
        else {
            alert("Error Occurred");
        }
    });
});