Image should show when input fields are filled in

Question

ive been stuck a couple days on writing my code for a school project. this is my code:

**HTML**
 <fieldset id="step1">
<legend>Step 1</legend>
<p1>How many people will be attending?</p1>
 <div id="selected_form_code">
 <select id="select_btn">
 <option value="0">Please choose</option>
 <option value="1">One</option>
 <option value="2">Two</option>
 <option value="3">Three</option>
 <option value="4">Four</option>
 <option value="5">Five</option>
 </select>
  <div class="Attendees" id="form1">
      <h2 id="infoNames">Please provide full names:</h2>
      <form action="#" id="form_submit" method="post" name="form_submit">
          <div class="Attendees" id="Attendee1" name="a">
              <label>
                  Attendee 1 name:
                  <input>
              </label>
          </div>
          <div class="Attendees" id="Attendee2" name="b">
              <label>
                  Attendee 2 name:
                  <input>
              </label>
          </div>
          <div class="Attendees" id="Attendee3" name="c">
              <label>
                  Attendee 3 name:
                  <input>
              </label>
          </div>
          <div class="Attendees" id="Attendee4" name="d">
              <label>
                  Attendee 4 name:
                  <input>
              </label>
          </div>
          <div class="Attendees" id="Attendee5" name="e">
              <label>
                  Attendee 5 name:
                  <input>
              </label>
          </div>

     </form>
  </div>
 </div>

 <p class="vinkje"><img src="vinkje.png" height="100" width="100"></p>
 </fieldset>

this is a selector which will drop down the forms as which input u choose. But now i have to get an image when all of these inputs are filled in. here is my jq code:

function checkInput() {
if (!$('Attendee1').val())
    $('.vinkje').hide();
}

this is the code that i have used for the dropdown menu, where u can choose the amount of forms u want to append

$(document).ready(function() {
var isEmpty = true;
$('.vinkje').hide();
hideInput();
$('#select_btn').change(function() {
    hideInput();
    var sel_value = $('option:selected').val();
    if (sel_value == 0) {
        hideInput();
    } else {
        $("#infoNames").show();
        for (var i = 1; i <= sel_value; i++) {
            $("#Attendee" + i).show();
        }
    }
    checkInput();
});

$('.Attendees input').blur(function()
{
    checkInput();
});


});

Answer 1

Create an event-handler for keyup event for inputs inside the form

$("form input").on( "change keyup", function(){

  $(this).setAttribute( "data-hasvalue", this.value.trim().length > 0 ); //setting this boolean value to track if value of any input has been set    

  $('.vinkje').toggle( $("form input[data-hasvalue='true']").length > 0 ); //if there is even one input with value, show the image

});

Edit

In case you want to show image only when all the inputs are filled in, then change it to

$("form input").on( "change keyup", function(){

  $(this).setAttribute( "data-hasvalue", this.value.trim().length > 0 ); //setting this boolean value to track if value of any input has been set    

  $('.vinkje').toggle( $("form input[data-hasvalue='true']").length == $("form input").length ); //if there is even one input with value, show the image

});

Answer 2

Here, is the updated code that you need. Changes made in the below code are :

• The image has been hidden by default (Using CSS: display:none;)
• When all the input fields are filled then only the image is displayed
• If you clear any of the fields the image is hidden again using JQuery

Hope, it helps.

 $(document).ready(function() { $(".Attendees > :input").keyup(function() { var $emptyFields = $('.Attendees :input').filter(function() { return $.trim(this.value) === ""; }); if (!$emptyFields.length) { $(".vinkje").show(); } else { $(".vinkje").hide(); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <fieldset id="step1"> <legend>Step 1</legend> <p1>How many people will be attending?</p1> <div id="selected_form_code"> <select id="select_btn"> <option value="0">Please choose</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> <option value="4">Four</option> <option value="5">Five</option> </select> <div class="Attendees" id="form1"> <h2 id="infoNames">Please provide full names:</h2> <form action="#" id="form_submit" method="post" name="form_submit"> <div class="Attendees" id="Attendee1" name="a"> <label> Attendee 1 name: </label> <input type="text"> </div> <div class="Attendees" id="Attendee1" name="a"> <label> Attendee 2 name: </label> <input type="text"> </div> <div class="Attendees" id="Attendee1" name="a"> <label> Attendee 3 name: </label> <input type="text"> </div> </form> </div> </div> <p class="vinkje" style="display:none"><img src="https://image.flaticon.com/teams/slug/freepik.jpg" height="100" width="100"></p> </fieldset> 

Note - (Updated from 5 fields to 3 fields)