Дублирование полей в форме при выборе

ProgramBox

Дублирование полей в форме при выборе

Post author:admin
Запись опубликована:24 февраля, 2023
Post category:Вопросы по программированию

#javascript #html #jquery #forms #function

#javascript #HTML #jquery #формы #функция

Вопрос:

Я создал форму для выбора навыков. После того, как сделан 1-й выбор, отображается 2-й список с параметрами, зависящими от 1-го выбора. Затем кнопка » » позволяет дублировать поля и добавлять другой навык.

Моя проблема :

Начальная форма в порядке, но когда я нажимаю » «, вторая созданная форма не работает (второе «поле выбора» не фильтруется в соответствии с первым выбором.

Пожалуйста, вы можете помочь?

Большое спасибо.

 <!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>

1. Что означает «не фильтруется»?

2. Если я выберу «Приготовление» в 1-м поле (семейство), я должен увидеть «Итальянский, мексиканский, японский и греческий» во втором поле.

3. Ах, хорошо. Понял.

4. Если я выберу «Язык» в 1-м поле (семейство), я должен увидеть «Испанский, китайский и французский» во втором поле. Но это не работает после дублирования.

5. Понятно. Спасибо за разъяснения.

Ответ №1:

Вы не можете использовать одно и то же ids для разных элементов, поэтому вместо id этого я изменил это на атрибуты html, то есть : . data-id Затем, когда вы выбираете любую опцию в поле выбора, должны изменяться только те разделы, которые находятся внутри form , а не другие, которые добавляются динамически, поэтому используйте $(this).closest("form").. для внесения изменений внутри формы htmls . Наконец, эти элементы создаются динамически, поэтому используйте $(document).on('change', 'select[name="tpl"]',.. .

Кроме того, ваша copycat функция копирует весь div, поэтому в следующий раз, если вы нажмете , она покажет 2 копию select и так далее.Чтобы исправить это, используйте $('.copycat form:first')... .

Демонстрационный код :

 $(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>