發佈動態創建表單元素旁邊硬編碼的HTML表單

-1

<div class="allsubjects"> 
<form class="profile"> 
<label>Names</label> 
<input type="text" name="names" value="" /> 
<label>City</label> 
<input type="text" name="city" value="" /> 
</form> 
</div> 

<button class="add"> 
Add 
</button>

其正在使用輸入一些數據。除了這種形式是動態創建的窗體域

$(document).ready(function(){ 
$(".add").on("click", function() { 
$(".profile").append('<div class="col-md-3"><div class="form-group"><label>Subject</label><input type="text" name="" value="" class="form-control" placeholder="First row, second input"></div></div>'); 

}); 
});

這是小提琴https://jsfiddle.net/5o52ueey/9/

有沒有一種方法，我可以張貼的普通形式，並且接收輸入像往常一樣，並獲得動態提交的表單信息作爲陣列？

來源

2016-05-14 Le Qs

你想提交表單數據，然後從服務器接收它？還可以將第二個表單的數據作爲數組獲取？ – zer00ne

我想發佈數據，並獲取動態數據作爲一個數組和其他形式的數據，例如我會收到和普通的'$ _POST'。 –

你可以嘗試使用AJAX，如下所示。使用「當前」按鈕創建動態字段&提交表單的新按鈕。

<html> 
<head> 
<script src="jquery-latest.min.js"></script> 
<script> 
$(document).ready(function(){ 

$(".add").on("click", function() { 

    $(".profile").append('<div class="col-md-3"><div class="form-group"><label>Subject</label><input type="text" id="subject" name="subject" value="" class="form-control" placeholder="First row, second input"></div></div>'); 

    $(this).attr("disabled", true); 

}); 

$(".profile").on("click", "#submit", function(){ 

    //Post Data using AJAX 

    var formData = {name: $("#names").val(), city: $("#city").val(), subject: $("#subject").val()}; 
    console.log(formData); 

    var postDataObj = { 
        url: "YOUR_SERVER_FILE", 
        type: "post", 
        data: formData, 
        success: function(data){ 
         //Response Data From Server 
        } 
    } 
    console.log(postDataObj);  

    $.ajax(postDataObj); 



}); 

}); 
</script> 
</head> 
<body> 

<div class="allsubjects"> 
<form class="profile"> 
<label>Names</label> 
<input type="text" name="names" id="names" value="" /> 
<label>City</label> 
<input type="text" name="city" id="city" value="" /> 
<input type="button" id="submit" value="Submit Form"/> 
</form> 
</div> 

<button class="add"> 
Add Subject 
</button> 



</body> 
</html>

來源

2016-05-14 05:57:16

餘序列陣列https://api.jquery.com/serializeArray/

'submit #er': function(event){ 
    event.preventDefault(); 
    var names = event.target.names.value; 
    var examname = event.target.examname.value; 
    var classname = event.target.classname.value; 
    // var result = event.target.results.value; 
    var formData = $('#er').serializeArray(); 
    console.log(formData); 
}

這與動態創建的表單字段效果很好。

來源

2016-05-14 16:08:03

發佈動態創建表單元素旁邊硬編碼的HTML表單

回答

相關問題