Conditional Form Fields

Show/Hide Fields

Show or hide form fields based on other field values — common for conditional questions and multi-step forms.

Example

$("#type").on("change", function() {
  const val = $(this).val();
  $("#companyName").closest(".mb-3").toggle(val === "business");
  $("#vatNumber").closest(".mb-3").toggle(val === "business");
});

// Initialize on page load
$("#type").trigger("change");

JAVASCRIPT

Full Editor

Pro Tip

Call trigger("change") on page load to set the initial state for conditional fields.

Related Resources

jQuery Reference

Complete tag & property list

jQuery How-To Guides

Step-by-step practical guides

jQuery Exercises

Practice what you've learned