Solution 1 :

Ajax is for “talking” to the server. If it’s just a case of change a <select> value and show/hide some fields, then put them on the page with style='display:none;' and show/hide them by changing that style, eg with jquery you can use:


Some example code (there are, of course, many ways to do this, here’s one):

$("#picker").on("change", function() {
  $("." + $(this).val()).show();
<script src=""></script>
Do you like:
<select id='picker'>
  <option value=''>please select</option>
  <option value='dogs'>dogs</option>
  <option value='cats'>cats</option>
<div class='dogs' style='display:none;'>
  which sort of dog:
<div class='cats' style='display:none;'>
  what type of cat:
    <option>house cat</option>

Solution 2 :

If you really need to do something on the server when select field is changed, you may need to use ajax calls, if you don’t just hide the fields and show them depending on the select option.

Problem :

I need insert some input fields into a form on a website.

These fields will be inserted depending on the option that the user chooses in a <select> input.

What’s the right way?

A new request with ajax to add these fields, or simply keep all possible fields hidden, and show them according to the chosen option?

(I will not make any requests to a database)


Comment posted by Felipe Cristiano

Thank you so much!

Comment posted by freedomn-m

Worth noting, on the flip side, if your controls are overly complicate or use overlapping control ids/names in different locations (that make simple show/hide exceptionally messy) then, yes, use ajax to get the form. Unless you’re using SPA (single-page-application) then it may be better to put them on different pages if they’re particularly complicated.


Leave a Reply

Your email address will not be published. Required fields are marked *