Jquery 在硬编码html表单旁边发布动态创建的表单元素_Jquery

Jquery 在硬编码html表单旁边发布动态创建的表单元素

jquery

Jquery 在硬编码html表单旁边发布动态创建的表单元素,jquery,Jquery,我有这个html表单 <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>

我有这个html表单

<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>');

});
});

$（文档）.ready（函数（）{
$（“.add”）。在（“单击”，函数（）{
$（“.profile”）.append（'Subject'）；
});
});

这是小提琴

有没有一种方法可以像往常一样发布普通表单并接收输入，并以数组的形式获取动态发布的表单信息？

您可以使用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>


$（文档）.ready（函数（）{
$（“.add”）。在（“单击”，函数（）{
$（“.profile”）.append（'Subject'）；
$（this.attr（“disabled”，true）；
});
$（“.profile”）。在（“单击”，“提交”，函数（）{
//使用AJAX发布数据
var formData={name:$（“#name”）.val（），city:$（“#city”）.val（），subject:$（“#subject”）.val（）；
console.log（formData）；
var postDataObj={
url:“您的服务器文件”，
类型：“post”，
数据：formData，
成功：功能（数据）{
//来自服务器的响应数据
}
}
console.log（postDataObj）；
$.ajax（postDataObj）；
});
});
名字
城市
添加主题

I序列化数组

这适用于动态创建的表单字段。

是否要提交表单数据，然后从服务器接收回来？还可以以数组的形式获取第二个表单的数据？我想发布数据，并以数组的形式获取动态数据，以及以

$\u post

为例接收和普通的其他表单数据。

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