Advanced Search

Show/hide form fields based on a selection from a dropdown menu

/ Published in: jQuery
Save to your folder(s)
Show a form field if 1 value from a dropdown is chosen, hide is the other is chosen. Can be extended to include more fields and values. Could get messy if you start nesting more than 2 'if else' but it gets the job done.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. $(document).ready(function() {
  2. 	$('#form-btw').hide(); //hide field on start
  3.  
  4. 	$('#Klant').change(function() {
  5.  
  6. 	 var $index = $('#Klant').index(this);
  7.  
  8. 	 if($('#Klant').val() != 'professional') { //if this value is NOT selected
  9. 	 $('#form-btw').hide(); //this field is hidden
  10. 	 } 
  11. 	 else {
  12. 	 $('#form-btw').show();//else it is shown
  13.  
  14. 	 }
  15.         });
  16.  });
  17.  
  18. ---
  19.  
  20. <select name="Klant" id="Klant">
  21.   <option id="field-particulier" value="particulier">Particulier</option>
  22.   <option id="field-professional" value="professional">Professional</option>
  23. </select>
  24.  
  25. <input name="BTW" type="text" class="form-text" id="BTW" />

URL: http://www.josephijs.be/bestellen.html

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.