发布动态创建表单元素旁边硬编码的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表单

回答

相关问题