how to append an existing form on button click using jQuery

Question

Given some html, a form named InterfacesIx and a button named 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>

I would like to clone/duplicate the form when the user clicks on the addInterfacesIx button using jQuery I guess.

The jQuery that I am trying looks like this:

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

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

When I do console.log($('InterfacesIx')); nothing gets printed out. Is the selector wrong ? When inspecting the form element on the browser I get:

copy attribute shows name="InterfacesIx"
copy selector path shows #stepper-navigation > li > div.step-new-content.white-text > form
copy xml shows //*[@id="stepper-navigation"]/li/div[2]/form

Would you be so kind to advise what I am doing wrong and how to achieve the desired result ?

@RoryMcCrossan thank you, can you provide an example please with the provided jQuery in mind ? — nskalis, Feb 13 '20 at 14:16
@RoryMcCrossan I would appreciate your expert help in https://stackoverflow.com/questions/60280242/how-to-append-an-existing-form-that-gets-rendered-using-jquery — nskalis, Feb 18 '20 at 11:49

score 1 · Answer 1 · answered Feb 13 '20 at 14:23

Your selector $('addInterfacesIx') is not valid. If you want to grab an element by name you should use attribute selector, something like this: $( "form[name='addInterfacesIx']"). However, as mentioned before, grabbing element by class or ID is definitely better.

score 0 · Accepted Answer · answered Feb 13 '20 at 14:15

$('addInterfacesIx') and $('InterfacesIx') aren't valid selectors. I'd suggest putting id/class attributes on the relevant elements and then selecting them by that.

I also assume that the form elements should be siblings, as such try using insertAfter() and placing the new form after the last one currently in the DOM. Your current logic would place the new form inside the button container. Try this:

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>

score 0 · Answer 3 · answered Feb 13 '20 at 14:25

You are confusing the fact that a name attribute is not normally used as a jQuery selector - the name attribute is normally used for keys to form values when they are submitted to the server. You can select elements using the name attribute, as indicated by the code below, but using id and class attributes is preferred.

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

how to append an existing form on button click using jQuery

3 Answers3