单击按钮时添加 HTML 表单

Question

我的网站/应用程序中有一个 HTML 表单。

该表单有许多输入文本、选择和 PHP 代码字段，用于填充下拉值。

当用户单击“添加”按钮时，有什么方法可以克隆/创建相同的表单？ 比方说，如果用户点击 5 次，UI 上就会有五个表单。

HTML

<form id = "buyerForm" role="form" method="POST" enctype="multipart/form-data" style="margin-top:30px;">
<span class="customerno" style="font-size: 22px;">Buyer 1 (Form 2)</span>                                       

<div class="form-group">
<label>APPLICANT DETAILS</label>
</div>

<div class="form-group">
<label>Mr. / Mrs</label>
<select class="form-control" name="jnameTitle" id="jnameTitle">
<option>Please Select One</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="MS">MS</option>
</select>
</div>


// similar fields are omitted to reduce the complexity


<div class="form-group">
<label>Address</label>
<textarea name="jaddress" id="jaddress" class="form-control" cols="80" rows="5" ></textarea>                                            
</div>

<button type="submit" name="jointCustomers" id="jointCustomers" class="btn btn-success btn-lg btn-flat">Save</button>
<button type="reset" class="btn btn-default btn-lg">Reset</button>

</form>

Answer 1

如果您正在使用 jQuery（或不介意使用它），您可以使用 clone 将表单再次添加到父容器

$("#youButton").click(function(){   
    $("#buyerForm").clone().appendTo("#yourParentWrapper");  
});

看到这个小提琴

Answer 2

是的，有办法。 假设您有主页 -> mainPage.php ，在那里您可以有一个列表和按钮（addForm）。 然后，您将拥有myform.php页面，该页面将自行生成一个表单。

这个过程非常简单。

1. 你按 btn AddForm
2. 您对在myform.php页面中生成表单的函数使用 AJAX 发出请求。
3. 在 AJAX 代码中，您将在列表对象中添加表单。

注意：这只是一个基本的想法。 您必须根据您的需要调整代码。

//Your main page, will contain a list.mainPage.php
<ul id="myFORMS">
  <li><button id="idBtnElement" type="button">AddForm</button></li>
</ul> 



//Your php code to create the form. You can create a function if you want
    $arrToJSON = array(
    "myFormHtml"=>"You will put your HTML form code here"    
    );  
    return json_encode(array($arrToJSON));




//Your javaScript code
$(document).on("event", "#idBtnElement", function(){
    //Data you want to send to php evaluate
     var dt={ 
              ObjEvn:"btn_ADDFORM"
            };

    //Ajax      
     var request =$.ajax({//http://api.jquery.com/jQuery.ajax/
                            url: "myFormGenerator.php",
                            type: "POST",
                            data: dt,
                            dataType: "json"
                        });

    //Ajax Done catch JSON from PHP 
        request.done(function(dataset){
            for (var index in dataset){ 
                 formStrHtml=dataset[index].myFormHtml;
             }

             //JavaScript 
             //Here you can grab formStrHtml in apped at the end of the list in your main page.
 $("#myFORMS ul").append('<li>'+formStrHtml+'</li>');


     }); 

    //Ajax Fail 
        request.fail(function(jqXHR, textStatus) {
            alert("Request failed: " + textStatus);
        }); 
}