javascript - 如何创建动态ajax提交表单

Question

我在一个页面中有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个表单

Answer 1

您可以创建一个函数，例如 SendForm() 并将其附加到表单的 onsubmit 属性

<form id="yourid" onsubmit="SendForm(this);return false;">

在 SendForm() 函数中放置您的脚本

例如:

function SendForm(form) {       
    var postData = form.serialize(); 
    // .......etc
}

要了解 PHP 中提交的表单，您可以在表单中放置一个隐藏输入，或者在 SendForm 上添加第二个参数来发送，例如 SendForm(node,formtype)

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

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