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");  
});

请参阅this fiddle

Answer 2

是的，有办法。假设你有主页 - ＆gt; mainPage.php，您可以在其中找到一个列表和按钮（addForm）。然后，您将拥有自己生成表单的myform.php页面。

这个过程很简单。

您按下btn AddForm
您针对在myform.php页面中生成表单的函数使用AJAX发出请求。
在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);
        }); 
}

单击按钮添加HTML表单

2 个答案: