Question posted in
You can find the official documentation here.

Jquery ajax – Show hidden field or neew request with ajax?

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)

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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:

     $(selector).show();

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

    $("#picker").on("change", function() {
  $(".dogs,.cats").hide();
  $("." + $(this).val()).show();
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Do you like:
<select id='picker'>
  <option value=''>please select</option>
  <option value='dogs'>dogs</option>
  <option value='cats'>cats</option>
</select>
<div class='dogs' style='display:none;'>
  which sort of dog:
  <select>
    <option>big</option>
    <option>sloppy</option>
    <option>yappy</option>
  </select>
</div>
<div class='cats' style='display:none;'>
  what type of cat:
  <select>
    <option>aloof</option>
    <option>independent</option>
    <option>house cat</option>
  </select>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search