Javascript 如何创建动态ajax提交表单

Javascript 如何创建动态ajax提交表单,javascript,php,jquery,ajax,forms,Javascript,Php,Jquery,Ajax,Forms,我在一个页面中有10个表单&这些数据是通过ajax提交的,现在我不想为每个表单创建ajax脚本。这就是我试过的 var form_id = $(this).closest("form").attr('id'); $(document).on("submit", "#"+form_id, function(e){ e.preventDefault(); var postData = $("#"form_id).serialize() var send = true; var

我在一个页面中有10个表单&这些数据是通过ajax提交的,现在我不想为每个表单创建ajax脚本。这就是我试过的

var form_id = $(this).closest("form").attr('id');
      $(document).on("submit", "#"+form_id, function(e){
      e.preventDefault();
var postData = $("#"form_id).serialize()
var send = true;
var ptel = 1;

$("#"+form_id).find("input").each(function () {
    if ($(this).val() === '') { send = false; ptel = 0; }
});
if(ptel == 0) { bootbox.alert('Please Fill All fields'); }
    if(send){
    $('form_id').trigger("reset");
    $.ajax({
    type: "POST",
    url: "/ajax/X-Profile",
    data: postData,                    
    cache: false,
    success: function(msg)
 {

bootbox.alert('Your Profile has been updated.');
   }

});
}
return false;
});
var form_id导致未定义,因为当页面加载时,没有为其定义任何属性

以上代码只是为了让您理解,
因此,我的问题是如何通过单个ajax函数提交10个表单

您可以创建一个函数,如SendForm(),并将其附加到forms onsubmit属性

<form id="yourid" onsubmit="SendForm(this);return false;">
要知道哪个表单是在PHP中提交的,您可以在表单中放置一个隐藏的输入,或者在SendForm上有一个通过发送的第二个参数,例如SendForm(node,formtype)

如果表单未提交或页面未重新加载,请删除onsubmit属性并将其添加到JS中

$(document).on("submit","form", function(e){
    e.preventDefault();
    SendForm($(this));
    return false;
});

您可以创建一个函数,如SendForm(),并将其附加到forms onsubmit属性

<form id="yourid" onsubmit="SendForm(this);return false;">
要知道哪个表单是在PHP中提交的,您可以在表单中放置一个隐藏的输入,或者在SendForm上有一个通过发送的第二个参数,例如SendForm(node,formtype)

如果表单未提交或页面未重新加载,请删除onsubmit属性并将其添加到JS中

$(document).on("submit","form", function(e){
    e.preventDefault();
    SendForm($(this));
    return false;
});

有如下javascript函数

<script type="text/javascript">
   function submitForm(formID) {
       data = $('#'+formID).serialize();
       //your ajax code
   }
</script>

函数提交表单(formID){
数据=$('#'+formID).serialize();
//您的ajax代码
}
现在使用下面类似onclick的输入按钮,并将表单Id作为参数传递

<input type="button" value="Submit" onclick="submitForm({formID})">


这将在不刷新页面的情况下工作。成功后,您可以触发reset()函数以形成特定的表单值。

具有如下javascript函数

<script type="text/javascript">
   function submitForm(formID) {
       data = $('#'+formID).serialize();
       //your ajax code
   }
</script>

函数提交表单(formID){
数据=$('#'+formID).serialize();
//您的ajax代码
}
现在使用下面类似onclick的输入按钮,并将表单Id作为参数传递

<input type="button" value="Submit" onclick="submitForm({formID})">


这将在不刷新页面的情况下工作。成功后,您可以触发reset()函数以形成特定的表单值。

您不能在表单的按钮上单击吗?获取该按钮最接近的表单id,并触发AJAX调用
$(“#”表单id).serialize()
-缺少
+
-
$(“#”+表单id).serialize()
。还有
$('form_id')。触发器(“重置”)-可能错了?@Pete我已经在帖子中告诉过你,这段代码仅供参考,只是上面输入的错误code@SagarSingh以后请花点时间正确地键入代码-如果您不愿意这样做,我们为什么要费心帮助您?您不能在表单的按钮点击上这样做吗?获取该按钮最接近的表单id,并触发AJAX调用
$(“#”表单id).serialize()
-缺少
+
-
$(“#”+表单id).serialize()
。还有
$('form_id')。触发器(“重置”)-可能错了?@Pete我已经在帖子中告诉过你,这段代码仅供参考,只是上面输入的错误code@SagarSingh将来,请花时间正确键入代码-如果您不愿意这样做,为什么我们要费心帮你?你能澄清一下什么是节点吗?它只是你发送给函数的表单。我将更改名称以明确说明。提交表单后会刷新页面可能有很多事情,但请尝试更新的编码。请澄清什么是节点?它只是您发送到函数的表单。我将更改名称以使其更清晰。提交表单后,它将刷新页面可能有很多事情,但请尝试更新的代码