單擊按鈕時添加 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);
        }); 
}