Question

我有一个包含两个表单的页面，一个用于提交一些数据并从DB返回数据，另一个用于在DB上进行自动完成搜索，然后应该从数据库返回数据。这两个表单在不同的页面中按预期工作，现在我尝试将它们放在一个页面中，但如果我在第二个表单上执行自动完成/全文搜索，我会从第一个表单中获得结果。我认为问题是javascript正在以第一种形式捕获数据而不管按下什么提交按钮，这两种形式有不同的动作路径。这是第一个脚本：

 jQuery(function ($) {
    $(document).ready(function () {
        var form = $('form');
        form.submit(function (e) {
            e.preventDefault();
            $.ajax({
                url: form.prop('action'),
                type: 'post',
                dataType: 'json',
                data: form.serialize(),
                success: function (data) {
                    var obj = (data);                                        
                    var resultStr = "";

                    //something

                    $("#results").html(resultStr);

                }
            });

        });
    });
});

第二个

$(document).ready(function () {
    $('input:text').bind({});
    $('input:hidden').bind({});
    $("#models").autocomplete({
        minLength: 1,
        source: URL

    });
});

那么，为什么页面返回resultStr并填充div而不是我在使用第二个脚本的fulltextsearch之后询问的数据？有什么想法吗？

Answer 1

好的，如果您想将相同的提交事件附加到所有表单，然后确定提交了哪个表单，以便您可以检索表单的action，那么您需要按照首先执行的方式进行操作然后检索提交块内的表单对象，如下所示：

以下是jsFiddle示例：http://jsfiddle.net/bu9v52fm/

jQuery(function ($) {
    $(document).ready(function () {

        //attach event to all forms
        $('form').submit(function (e) {

           //output $(this) form into a variable and proceed
           //--------------
           var form = $(this);
           //--------------

            e.preventDefault();
            $.ajax({
                url: form.prop('action'),
                type: 'post',
                dataType: 'json',
                data: form.serialize(),
                success: function (data) {
                    var obj = (data);                                        
                    var resultStr = "";

                    //something

                    $("#results").html(resultStr);

                }
            });

        });
    });
});

在同一页面上有两个表单和两个脚本，无论提交如何，都会调用第一个脚本

1 个答案: