How to hide a div until a certain field(s) value is greater than nothing

Question

So, what I want to accomplish here is to prevent people from entering the rest of the form until they focus on the first section by hiding the last section until the value of a certain field is greater than nothing.

Here is my HTML:

<div class="fieldcontainer">
<label>E-mail:</label>
<input type="email" name="email" maxlength="100" id="email" required>
</div>
<br><br>
<div id="projectinformation" style="display:none">
<h3>Project Information</h3>
<div class="fieldcontainer">
<label>Project Name:</label>
<input type="text" name="project_name" maxlength="70" required>
</div>
<br><br>
<div class="fieldcontainer">
<label>Project Number:</label>
<input type="text" name="project_number" required>
</div>
<br><br>
<div class="fieldcontainer">
<label>Business Unit:</label>
<select name="business_unit" required>
    <option>--Select--</option>
</select>
</div>
<br><br>
<div class="fieldcontainer">
<label>Project Address:</label>
<input type="text" name="address" required>
</div>
<br><br>
<div class="fieldcontainer">
<label>Number of users on site:</label>
<select id="numberofstaff">
    <option class="staffselection" value="">--Select--</option>
    <option class="staffselection" value="smalljobsite">1-3 staff</option>
    <option class="staffselection" value="mediumjobsite">4-7 staff</option>
    <option class="staffselection" value="largejobsite">8+ staff</option>
</select>
</div>
</div>

Here is my JS:

while (document.getElementById('email').value > ""){
document.getElementById('projectinformation').style.display = 'initial';
}

It's not working, because you have to bind `email` change event to that element. `while` will execute one time, because only one ID is possible in DOM — Justinas, Apr 14 '15 at 13:22

score 1 · Accepted Answer · answered Apr 14 '15 at 13:21

1

You'd probably want an event handler for that, and check the inputs value length, then show the rest of the form

document.getElementById('email').addEventListener('input', function() {
    if ( this.value.length > 0 ) {
        document.getElementById('projectinformation').style.display = 'block';
    }
}, false);

or in jQuery

$('#email').on('input', function() {
    if (this.value.length > 0) $('#projectinformation').show();
});

answered Apr 14 '15 at 13:21

adeneo

312,895
29
395
388

I prefer using jquery (something I need to get more familiar with) but not getting it to work. http://jsfiddle.net/2jmL4ykz/ – James Apr 14 '15 at 16:31

score 0 · Answer 2 · edited May 23 '17 at 12:14

Here is jQuery solution:

  $("#email").keyup(function() {
      if($(this).val().length)     
         $('#projectinformation').show();
      else 
         $('#projectinformation').hide();
  });

If you want to validate if it is a valid email and then show the form, you can do this: (https://stackoverflow.com/a/2855946/1845408):

 function isValidEmailAddress(emailAddress) {
      var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
      return pattern.test(emailAddress);
 };


  $("#email").keyup(function() {
      if(isValidEmailAddress($(this).val())) {    
             $('#projectinformation').show();
          else 
            $('#projectinformation').hide();
  });

How to hide a div until a certain field(s) value is greater than nothing

2 Answers2