как добавить существующую форму по нажатию кнопки, используя jQuery

Question

Учитывая некоторые html, форму с именем InterfacesIx и кнопку с именем addInterfacesIx

                <div class="step-new-content white-text">
                    <p class="text-monospace"><small>helps you rollout a configlet about blahblah</small></p>
                    <form name="InterfacesIx">
                    <div class="row">
                        <div class="md-form col-12">
                            <input type="text" name="xxx" class="form-control white-text" placeholder="123"><label for="xxx">asn</label>
                        </div>
                        <div class="md-form col-12">
                            <textarea name="yyy" class="md-textarea form-control white-text" rows="3"></textarea><label for="yyy">notes</label>
                        </div>
                    </div>
                    <br><br><br>
                    </form>
                    <div class="col-12 text-center">
                        <button type="button" name="addInterfacesIx" class="btn btn-block btn-flat"><i class="fas fa-plus"></i></button>
                    </div>
                </div>

Я хотел бы клонировать / дублировать форму, когда пользователь нажимает кнопку addInterfacesIx используя jQuery Я полагаю.

Я пытаюсь jQuery выглядеть следующим образом:

        <script>
         $(document).ready(() => {

             $('addInterfacesIx').click(function(){
                 $('InterfacesIx').clone().insertBefore('addInterfacesIx');
             });
         });
        </script>

Когда я делаю console.log($('InterfacesIx'));, ничего не распечатывается. Селектор неправильный? При проверке элемента формы в браузере я получаю:

• атрибут копирования показывает name="InterfacesIx"
• путь выбора копий показывает #stepper-navigation > li > div.step-new-content.white-text > form
• копия xml показывает //*[@id="stepper-navigation"]/li/div[2]/form

Не могли бы вы сообщить, что я делаю неправильно и как достичь желаемого результата?

Answer 1

Ваш селектор $('addInterfacesIx') недействителен. Если вы хотите получить элемент по имени, вы должны использовать селектор атрибута, что-то вроде этого: $( "form[name='addInterfacesIx']"). Однако, как упоминалось ранее, захват элемента по классу или идентификатору определенно лучше.

Answer 2

Вы путаете тот факт, что атрибут name обычно не используется как селектор jQuery - атрибут name обычно используется для ключей для формирования значений при их отправке на сервер. Вы можете выбирать элементы, используя атрибут name, как указано в приведенном ниже коде, но предпочтительнее использовать атрибуты id и class.

 <form id="InterfacesIx" name="InterfacesIx">
 ...
 </form>
 <div class="col-12 text-center">
   <button type="button" id="addInterfacesIx" class="btn btn-block btn-flat"><i class="fas fa-plus"></i></button>
 </div>

 <script>
     $(document).ready(() => {

         $('#addInterfacesIx').click(function(){
             // $('#InterfacesIx') is better
             $('[name=InterfacesIx]').clone().insertBefore('addInterfacesIx');
         });
     });
    </script>

Answer 3

$('addInterfacesIx') и $('InterfacesIx') не являются допустимыми селекторами. Я бы предложил поместить атрибуты id / class в соответствующие элементы, а затем выбрать их.

Я также предполагаю, что элементы form должны быть братьями и сестрами, поэтому попробуйте использовать insertAfter() и поместить новую форму после последней, которая в настоящее время находится в DOM. Ваш текущий лог c поместит новую форму в контейнер кнопки. Попробуйте это:

jQuery(($) => {
  $('#addInterfacesIx').click(function() {
    $('.interfacesIx:first').clone().insertAfter('.interfacesIx:last');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="step-new-content white-text">
  <p class="text-monospace"><small>helps you rollout a configlet about blahblah</small></p>
  <form name="InterfacesIx" class="interfacesIx">
    <div class="row">
      <div class="md-form col-12">
        <input type="text" name="xxx" class="form-control white-text" placeholder="123"><label for="xxx">asn</label>
      </div>
      <div class="md-form col-12">
        <textarea name="yyy" class="md-textarea form-control white-text" rows="3"></textarea><label for="yyy">notes</label>
      </div>
    </div>
    <br><br><br>
  </form>
  <div class="col-12 text-center">
    <button type="button" name="addInterfacesIx" id="addInterfacesIx" class="btn btn-block btn-flat"><i class="fas fa-plus"></i></button>
  </div>
</div>