使用 ajaxform() 在页面中提交多表单答案

【问题标题】：Multi form submit in the page with ajaxform()使用 ajaxform() 在页面中提交多表单
【发布时间】：2009-08-08 08:54:17
【问题描述】：

如何使用 ajaxform 插件获取当前提交表单的父 div id
我对成功状态没有任何问题

谢谢。

下面是我的代码。

<script type="text/javascript" charset="utf-8">
$('.formsubmit').ajaxForm( { 

    beforeSubmit: function() {
        // here want form parent div display loading..
        var id = $(this).parent().id; // my problem here how to get current action form parent div id 
        $('div#'+id).html("Loading...");
    },
    url: '/post.php',
    success: Response,
    datatype: ($.browser.msie) ? "text" : "xml"
});
function Response(xml) {
    // let say XML return is equal 1
    var id = xml;
    $('div#'+id).html("Success");
}
</script>

<html>
<body>
<div id="1">
    <form class='formsubmit' action='/post.php' method='post'>
        <input name='url' value='stackoverflow.com'>
    </form>
</div>
<div id="2">
    <form class='formsubmit' action='/post.php' method='post'>
        <input name='url' value='jquery.com'>
    </form>
</div>
<div id="3">
    <form class='formsubmit' action='/post.php' method='post'>
        <input name='url' value='google.com'>
    </form>
</div>
</body>
</html>

【问题讨论】：

标签： javascript jquery ajax jquery-plugins

【解决方案1】：

从我在docs 中可以看到，beforeSubmit 方法是使用三个参数调用的：

数组格式的表单数据
表单的 jQuery 对象
传递到 ajaxForm/ajaxSubmit 的选项对象

鉴于如果您将之前的提交更改为

beforeSubmit: function(formData, formObj, options) {
    var id = formObj.parent().attr('id');
    $('div#'+id).html("Loading...");
}

虽然我没有测试过，但这应该可以工作。

【讨论】：