jquery selective display of form inputs based on selected dropdown option

Question

$( document ).ready(function() {
  return $("body").on("change",".creator_name_type", function(event){
    if (event.target.value == 'Personal') {
      $(this).siblings(".organization_name").hide();
      $(this).siblings(".given_name").show();
      $(this).siblings(".family_name").show();
    } else {
      $(this).siblings(".given_name").hide();
      $(this).siblings(".family_name").hide();
      $(this).siblings(".organization_name").show();
    }
  });
});

 $(document).ready(function(){
   return $("body").on("click", ".add_creator", function(event){
  event.preventDefault();
  var creatorClass = $(this).attr('data-addCreator');
  var cloneUbiDiv = $(this).parent('div' + `${creatorClass}`).clone();
  $(`${creatorClass}` +  ':last').after(cloneUbiDiv);
        
});
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
   <div class="creator">
     <select class="creator_name_type">
      <option value="Personal">Personal</option>
     <option value="Organisational">Organisational</option>
    </select>
      given name: <input type="text" name="gname" class="given_name"><br>
      family name: <input type="text" name="fname" class="family_name"><br>
      organization name: <input type="text" name="oname" class"organization_name"><br>

  <a href="#" class=" add_creator" data-addCreator=".creator">Add another </a>

   <div>  
</body>
</html>

I am trying to selectively display form input based on selected options. The form has buttons for add more which just clones and append the cloned html to the bottom of the div. When I click add more and now have 2 select tags with one having the selected value as 'Personal' and the other a selected value of "organization". Rather than selectively show the form fields based on the if/else statement, it shows thesame form fields for both while retaining different selected value for each dropdown options ie one dropdown shows personal as selected and the other shows Organization. Everytime the on change event fires for one of them, thesame form fields are displayed for both rather than displaying form fields based on the if/else statement.

$( document ).ready(function() {
  return $("body").on("change",".creator_name_type", function(event){
    if (event.target.value == 'Personal') {
      $(".organization_name").hide();
      $(".given_name").show();
      $(".family_name").show();
    } else {
      $(".given_name").hide();
      $(".family_name").hide();
      $(".organization_name").show();
    }
  });
});

Sir...not reproducible. Reproducible example please. – MT-FreeHK Aug 30 '18 at 01:50 — MT-FreeHK, Aug 30 '18 at 01:50
Sir it is now reproducible. thanks – brg Aug 30 '18 at 06:56 — brg, Aug 30 '18 at 06:56

Nick · Accepted Answer · 2018-08-30T07:56:17.937

The problem that you have is that you are doing your show/hide based on class (e.g. .given_name) and all the similar form fields will have the same class, so they all change together. Try using .siblings to find the appropriate fields to show/hide. You also have a typo in the option value, it is "personal", not "Personal", and you are missing an "=" in the input with class organization_name. Here's a working snippet:

$( document ).ready(function() {
  return $("body").on("change",".creator_name_type", function(event){
    if (event.target.value == 'personal') {
      $(this).siblings(".organization_name").hide();
      $(this).siblings(".given_name").show();
      $(this).siblings(".family_name").show();
    } else {
      $(this).siblings(".given_name").hide();
      $(this).siblings(".family_name").hide();
      $(this).siblings(".organization_name").show();
    }
  });
});

 $(document).ready(function(){
   return $("body").on("click", ".add_creator", function(event){
  event.preventDefault();
  var creatorClass = $(this).attr('data-addCreator');
  var cloneUbiDiv = $(this).parent('div' + `${creatorClass}`).clone();
  $(`${creatorClass}` +  ':last').after(cloneUbiDiv);
    
});
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
   <div class="creator">
     <select class="creator_name_type">
      <option value="personal">Personal</option>
     <option value="organisational">Organisational</option>
    </select>
      given name: <input type="text" name="gname" class="given_name"><br>
      family name: <input type="text" name="fname" class="family_name"><br>
      organization name: <input type="text" name="oname" class="organization_name"><br>

  <a href="#" class=" add_creator" data-addCreator=".creator">Add another </a>

   <div>  
</body>
</html>

Thanks. I tried it and though the change event is triggered the fields dont' hide or show, meaning they remain on changed using the suggested approach. I modified it to use parent as in **$(this).parent(".creator_organization_name").show()** still nothing change is triggered but nothing is hidden, the fields displayed just remain unchnage. — brg, Aug 30 '18 at 06:39
If you could post the relevant part of the HTML that would make it easier to debug... — Nick, Aug 30 '18 at 06:41
When I open developer tools and do $('.creator_name_type').closest(".organization_name").length, I get zero. However, if I do $(".organization_name").length, I get 4 — brg, Aug 30 '18 at 06:42
Based on your sample HTML, `siblings` is the appropriate property to use, not `closest`. I note in the sample HTML you have ` — Nick, Aug 30 '18 at 07:23
Is it working now? I've updated my answer with a working code snippet based on yours. — Nick, Aug 30 '18 at 07:56

score 0 · Answer 2 · answered Aug 30 '18 at 07:33

0

In your above code personal's value doesn't match with Personal i.e. you need to have personal's p in small letter.b That's why values are not matching

Instead of this " if (event.target.value == 'Personal') {"

write this "if (event.target.value == 'personal') {"

answered Aug 30 '18 at 07:33

Thanks for helping but even after changing it, that did not solve the problem, – brg Aug 30 '18 at 08:04
I tried it on js fiddler . its working there. attaching the fiddler link here [link]https://jsfiddle.net/6o7yvc89/10/ – Aug 30 '18 at 08:42
Also replace line " organization name:
" with this: "organization name:
" – Aug 30 '18 at 08:49
many thanks for the fidldler and other suggestions. Nick got it working earlier on. – brg Aug 30 '18 at 17:28

jquery selective display of form inputs based on selected dropdown option

2 Answers2