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.


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.