Eiz1993 Eiz1993 - 3 months ago 8
jQuery Question

How to trigger a JavaScript function when there are values in three input elements?

How can I trigger an event when there are values on three input boxes? Say for instance I have three input elements:

<input type = "text" name = "item1" id = "item1" value="">
<input type = "text" name = "item2" id = "item2" value="">
<input type = "text" name = "item3" id = "item3" value="">


I'd like to output a result using JavaScript when these three input elements have a value and automatically return null when it has not met the condition.

<span> item1,item2,item3 has value </span>


EDIT:

Display the result ONLY when the 3 input boxes has values otherwise it retuns null.

Answer

Try this one.If you need to show you while type in the third input means use onfocus instead of onchange in the third input.

<!DOCTYPE html>
<html>
 <head>
  <title>Example</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
   $(document).ready(function(){
     $('#showText').hide();
   });

   function canShowText(){
      if($('#item1').val().length>0 && $('#item2').val().length>0 && $('#item3').val().length>0)
    $('#showText').show();
   }
  </script>
 </head>
 <body>
  <input type="text" name="item1" id="item1" value="" onchange='canShowText()'><br>
  <input type="text" name="item2" id="item2" value="" onchange='canShowText()'><br>
  <input type="text" name="item3" id="item3" value="" onchange='canShowText()'><br>
  <span id='showText'> item1,item2,item3 has value </span>
 </body>
</html>