使用javascript添加html格式的表单

ve7v8dk2 于 2023-01-28 发布在 Java

关注(0)|答案(2)|浏览(182)

我正在尝试配置如何添加一个表单，每当你点击添加按钮。有人可以帮助我吗？我附加了一个jsfiddle，以便您可以完全理解我在说什么

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/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/bootstrap@5.0.2/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/

Html

来源：https://stackoverflow.com/questions/75216487/adding-a-form-in-html-using-javascript

2条答案

按热度按时间

6ioyuze21#

我们将创建一个表单的克隆，并将其添加到容器div中。

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>

下面是JS的一个分支，它可以让代码正常工作：
https://jsfiddle.net/TrostCodes/7cdhfqkn/8/

赞(0）回复(0）举报 2023-01-28

taor4pac2#

你可以使用js side而不是HTML克隆。2我认为这将是一个理想的方法。

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>

赞(0）回复(0）举报 2023-01-28

我来回答

使用javascript添加html格式的表单

2条答案

相关问题

热门标签

最新问答