单击按钮时添加 HTML 表单

Question

I have an HTML form in my website/application.

The form has lots of fields of input text, select, and PHP code, as well, to fill drop down values.

Is there any way I can clone/create the same form when the user clicks on the Add button? Let's say, if the user clicks 5 times, it would have five forms on the 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

if you're using jQuery (or dont mind using it) you could just use clone to add the form again to the parent container

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

see this fiddle

Answer 2

Yes, there is a way. Lets say you have the main page -> mainPage.php , where you can have a list and the button (addForm). Then you will have your myform.php page that will generate a form it self.

The process is very simple.

1. You press the btn AddForm
2. You make a request using AJAX against your function that generate the form in the myform.php page.
3. Inside your AJAX code, you will add your form inside the list object.

Note: This is only a basic idea. You must adapt the code to your needs.

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