【问题标题】:two forms and two scripts on same page, the first script is invoked regardless of submit两个表单和两个脚本在同一页面上,第一个脚本被调用而不管提交
【发布时间】:2015-12-07 18:59:42
【问题描述】:

我的页面有两种形式,一种用于提交一些数据并从数据库返回数据,另一种用于在数据库上进行自动完成搜索,然后应从数据库返回数据。 这两个表单在不同的页面中按预期工作,现在我尝试将它们放在一个页面中,但是如果我在第二个表单上执行自动完成/全文搜索,我会从第一个表单中获得结果。 我认为问题是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 而不是我在使用第二个脚本进行全文搜索后询问的数据?有什么想法吗?

【问题讨论】:

  • var form = $('form'); 将获取页面中的所有表单。您需要单独获取它们。
  • 这就是我的怀疑,我尝试在form = $('name_of_the_form'); 中更改它但没有成功,有什么提示吗?
  • 给你的表单一个id="myForm",然后通过id获取它:$('form#myForm')
  • 向我展示您的 exact 选择器并发布您的表单标记。
  • @VictorLevin 谢谢,成功了

标签: javascript php jquery forms submit


【解决方案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);

                }
            });

        });
    });
});

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2017-03-21
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-11-29
    • 1970-01-01
    • 2016-06-19
    • 1970-01-01
    相关资源
    最近更新 更多