Posted By

Rembrand on 08/11/10


Tagged

forms


Versions (?)

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


 / Published in: jQuery
 

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

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.

  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" />

Report this snippet  

You need to login to post a comment.