Adding a form in html using javascript

Question

I am trying to configure on how to add a form whenever you click the add button. Can someone help me with this? I attached a jsfiddle so that you can fully understand what I am saying

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div style="display: none;" id = "form1">
                  
  <form action="" method="" id = "add-order-form">
  <div class="row add-order-info text-center">
    <div class="col"> 
      <div class="dropdown">
        <button type="button" class="btn dropdown-toggle" 
        data-bs-toggle="<dropdown">
        Select...
        </button>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Mouse</a></li>
            <li><a class="dropdown-item" href="#">Monitor</a></li> 
            <li><a class="dropdown-item" href="#">Keyboard</a></li>
          </ul>
        </div>
      </div>
   </div>
   </form>
</div>
<button type="button" value ="Add Child" onclick="addForm();" id = "add-button">
Add
</button>
                

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

 function addForm() {
        document.getElementById('form1').style.display = 'block';
        
        
        $("#add-order-form").clone().appendTo("#form1");
       
        }

https://jsfiddle.net/u0pzeqry/1/

You may want to read up on <template>.

Oskar Grosser
– Oskar Grosser

2023-01-24 02:20:59 +00:00
Commented Jan 24, 2023 at 2:20 — Oskar Grosser
– Oskar Grosser, Commented Jan 24, 2023 at 2:20

karthik · Accepted Answer · 2023-01-24 23:56:10Z

2

We're going to create a clone of your form and add it to a container div. Here's the HTML:

function addForm() {
   var formsContainer = document.getElementById("formsContainer");
   var newForm = document.getElementById("form1").cloneNode(true);
   newForm.style.display = "block";
   formsContainer.appendChild(newForm);
 }

<div style="display: none;" id = "form1">

  <form action="" method="" id = "add-order-form">
  <div class="row add-order-info text-center">
    <div class="col"> 
      <div class="dropdown">
        <button type="button" class="btn dropdown-toggle" 
        data-bs-toggle="dropdown">
        Select...
        </button>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Mouse</a></li>
            <li><a class="dropdown-item" href="#">Monitor</a></li> 
            <li><a class="dropdown-item" href="#">Keyboard</a></li>
          </ul>
        </div>
      </div>
   </div>
   </form>
</div>

 <div id="formsContainer"></div>

<button type="button" value ="Add Child" onclick="addForm();" id = "add-button">
Add
</button>

Here's a fork of your JS fiddle with the code working:

https://jsfiddle.net/TrostCodes/7cdhfqkn/8/

edited Jan 24, 2023 at 23:56

karthik

5244 silver badges20 bronze badges

answered Jan 24, 2023 at 1:01

Alex Trost

915 bronze badges

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

1 Comment

Manoj Bhat Over a year ago

There is a typo in the code: data-bs-toggle="<dropdown"> remove angular bracket it should be like this: data-bs-toggle="dropdown">

Prasad Wanigasekara · Accepted Answer · 2023-01-24 01:33:16Z

you can use js side instead of using HTML clone. I think that would be the ideal method for that.

var formcounter = 0;
function setForms(){  
  $("#wrapperFormContainer").append( '<form action="" method=""   id="add-order-form'+ formcounter +'"><div>add-order-form'+formcounter+'</div></form>');
  formcounter++;
}

#wrapperFormContainer{
  display:inline-block;
  width:100%;
  background-color:green;
}
#wrapperFormContainer form{
  display:inline-block;
  margin: 5px;
  background-color:red;
  border:solid 1px #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="wrapperFormContainer">
  
</div>
<button type="button" onclick="setForms()">Add form</button>

Collectives™ on Stack Overflow

Adding a form in html using javascript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related