Duplicate fields in a form upon selection

I made a form to select skills. After the 1st selection is made, a 2nd list is shown with options depending of the 1st choice. Then, a “+” button allow to duplicate the fields ans add another skill.

My problem :

The inital form is OK but when I press “+” the second form created doesn’t work (the second “select field” is not filtered according to the first select.

Please can you help?

Thanks a lot.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Skill form</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" /></script>

  
</head>
  
    <body>
        <h1>Insert your skills</h1>
        <div class="copycat">
            <div id="form">
                <form action="" method="post" name="addbloc">
                    <p>
                         <label for="tpl">Family :</label>
                        <select name="tpl" id="tpl">
                            <option value="">-- Select your family --</option>
                            <option value="Language" data-id='#champ1'>Language</option>
                            <option value="Cooking" data-id='#champ2'>Cooking</option>
                        </select><br />

                            <div class="champ" id="champ1">
                                <label for="Language">Skill :</label>
                                <select name="Language" id="Language">
                                    <br/>
                                    <option value="">-- Select your skill --</option>
                                    <option value="Spanish" data-id='#champ1'>Spanish</option>
                                    <option value="Chineese" data-id='#champ1'>Chineese</option>
                                    <option value="French" data-id='#champ1'>French</option>
                                </select><br />

                                <input onclick="copycat();" id="button" value="+" type="button">
                           </div>

                            <div class="champ" id="champ2">
                                <label for="Cooking">Skill :</label>
                                <select name="Cooking" id="Cooking">
                                    <br/>
                                    <option value="">-- Select your skill --</option>
                                    <option value="Italian" data-id='#champ2'>Italian</option>
                                    <option value="Mexican" data-id='#champ2'>Mexican</option>
                                    <option value="Japanese" data-id='#champ2'>Japanese</option>
                                    <option value="Greek" data-id='#champ2'>Greek</option>
                                </select><br />

                                <input onclick="copycat();" id="button" value="+" type="button">
                            </div>
                    </p>
     
                </form>
                
            </div>     
        </div>        

        <!-- WIP ----- Submit button to store in database -->
        <div style="z-index:99;"><input type="submit" name="Submit" value="Submit" class="bouton"></div>
 

    <script type="text/javascript">
    
            // Show 2nd field according to first field selection
            $(document).ready(function() {
                $('.champ').hide(); // on cache les champ par défaut
                
                $('select[name="tpl"]').change(function() { // lorsqu'on change de valeur dans la liste
                    $('.champ').hide();
                    var selectedDataID = $(this).find('option:selected').attr('data-id');
                    $(selectedDataID).show();
                });
            });


            // Duplicate field when + button is pressed  
            function copycat(){
                $('.copycat:first').clone().appendTo($('#form'));
            }

    </script>

    </body>
</html>

Answer

You cannot use same ids for different elements so instead of id i have change that to html attributes i.e :data-id .Then , when you select any option from select-box only divs which are inside form should change not others which are added dynamically so use $(this).closest("form").. to make change inside form htmls . Lastly ,these elements are created dynamically so use $(document).on('change', 'select[name="tpl"]',...

Also, your copycat function is copying entire div so next time if you press + it will show 2 copy of select and so on .To fix this use $('.copycat form:first')....

Demo Code :

$(document).ready(function() {
  $('.champ').hide();

  $(document).on('change', 'select[name="tpl"]', function() {
    $(this).closest("form").find('.champ').hide(); //hide the champ div inside form which is there
    var selectedDataID = $(this).find('option:selected').attr('data-id');
    //get the div with dta-id of slected option
    $(this).closest("form").find("div[data-id=" + selectedDataID + "]").show();
  });
});


// Duplicate field when + button is pressed  
function copycat() {
//copy first form 
  $('.copycat form:first').clone().appendTo($('#form'));
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Insert your skills</h1>
<div class="copycat">
  <div id="form">
    <form action="" method="post" name="addbloc">
      <p>
        <label for="tpl">Family :</label>
        <!--instead of id added data-id -->
        <select name="tpl" id="tpl">
          <option value="">-- Select your family --</option>
          <option value="Language" data-id='champ1'>Language</option>
          <option value="Cooking" data-id='champ2'>Cooking</option>
        </select><br />
        <!--added data-id-->
        <div class="champ" data-id="champ1">
          <label for="Language">Skill :</label>
          <select name="Language" id="Language">
            <br/>
            <option value="">-- Select your skill --</option>
            <option value="Spanish" data-id='#champ1'>Spanish</option>
            <option value="Chineese" data-id='#champ1'>Chineese</option>
            <option value="French" data-id='#champ1'>French</option>
          </select><br />

          <input onclick="copycat();" id="button" value="+" type="button">
        </div>
        <!--added data-id-->
        <div class="champ" data-id="champ2">
          <label for="Cooking">Skill :</label>
          <select name="Cooking" id="Cooking">
            <br/>
            <option value="">-- Select your skill --</option>
            <option value="Italian" data-id='#champ2'>Italian</option>
            <option value="Mexican" data-id='#champ2'>Mexican</option>
            <option value="Japanese" data-id='#champ2'>Japanese</option>
            <option value="Greek" data-id='#champ2'>Greek</option>
          </select><br />

          <input onclick="copycat();" id="button" value="+" type="button">
        </div>
      </p>

    </form>

  </div>
</div>

<!-- WIP ----- Submit button to store in database -->
<div style="z-index:99;"><input type="submit" name="Submit" value="Submit" class="bouton"></div>

Advertisement

Answer