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
– nskalis, Commented Feb 13, 2020 at 14:16
@RoryMcCrossan I would appreciate your expert help in stackoverflow.com/questions/60280242/… — nskalis
– nskalis, Commented Feb 18, 2020 at 11:49

pastuszkam · Accepted Answer · 2020-02-13 14:23:12Z

1

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.

answered Feb 13, 2020 at 14:23

pastuszkam

556 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rory McCrossan · Accepted Answer · 2020-02-13 14:15:32Z

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

vogomatix · Accepted Answer · 2020-02-13 14:25:34Z

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>

Collectives™ on Stack Overflow

how to append an existing form on button click using jQuery

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related