如何使用Jquery在页面加载时触发表单提交

Question

这似乎不应该太难实现，但我很匆忙，一直在寻找简单的答案。我需要在页面加载时提交表单。这是我的AJAX提交函数，它可以正常工作。我只需要找出如何在页面加载时触发它。

非常感谢您的帮助！

$("form#seller-agreement-form").submit(function() {  
        // we want to store the values from the form input box, then send via ajax below    
        $.ajax({  
            type: "POST",  
            url: "http://www2.myurl.com/formhandler",  
            data: "email="+ email + "&status=" + status,  
            success: function(){  
                $('form#seller-agreement-form').hide(function(){$('div#output').fadeIn();});  

            }  
        });  
    return false;  
    });

- Vaughn D. Taylor

Answer 1

如果调用$().submit()，它会触发操作；$().submit(function)绑定提交事件的处理程序。

但是，您可以跳过提交步骤，直接调用ajax方法。

$(function() {
  $.ajax({  
      type: "POST",  
      url: "http://www2.myurl.com/formhandler",  
      data: "email="+ email + "&status=" + status,  
      success: function(){  
          $('form#seller-agreement-form').hide(function(){$('div#output').fadeIn();});  

      }  
  });
});

- Evan Davis

---

在某些情况下，当你使用 $().submit() 或者 $().trigger('submit') 来提交表单时，可能会出现未经过处理程序直接提交表单的情况。这可能只是我独特的问题，但由于我们是以编程方式提交表单，一个更为安全可靠的方法是触发提交按钮的点击事件。这样，submit 事件将更加 "自然"。 - Supreme Dolphin

Answer 2

如果要在页面加载时实际提交表单，您可以编写类似以下内容的代码：

$(function() {
   $('#seller-agreement-form').submit();
});

但是如果你只是想要执行与表单提交相同的操作，那么也许你不需要提交表单，只需要做如下操作：

function postForm() {
    $.ajax({  
        type: "POST",  
        url: "http://www2.myurl.com/formhandler",  
        data: "email="+ email + "&status=" + status,  
        success: function(){  
            $('form#seller-agreement-form').hide(function(){$('div#output').fadeIn();});  

        }  
    }); 
}

$("form#seller-agreement-form").submit(function() {
    postForm();
    return false;
});

$(function() {
    postForm();
});

- David Hedlund

Answer 3

$(function () {
    $("form#seller-agreement-form").submit(function() {  
        // we want to store the values from the form input box, then send via ajax below    
        $.ajax({  
            type: "POST",  
            url: "http://www2.myurl.com/formhandler",  
            data: "email="+ email + "&status=" + status,  
            success: function(){  
                $('form#seller-agreement-form').hide(function(){$('div#output').fadeIn();});  

            }  
        });  
    return false;  
    }).trigger('submit');

});

您可以使用.trigger()函数在表单上触发submit事件。我将调用链接在一起，这样只需要选择一次表单即可。请注意，在触发submit事件之前，您需要确保设置了submit事件处理程序。

文档：http://api.jquery.com/trigger

- Jasper

---

好的。那个有效了，但是我似乎陷入了无尽的提交循环中。 - Vaughn D. Taylor

@VaughnD.Taylor 上面的代码不应该循环，调用.trigger()函数后，将运行submit事件处理程序，该处理程序不会触发submit事件。因此，可能是您编写的其他自定义代码干扰了流程。 - Jasper

很可能是因为你把表单提交到了自身而导致的循环。你可能需要在.trigger()周围加上一个if()块，并使用参数标记URL，以使它不会再次提交。 - rkw

Answer 4

在表单上调用$("#seller-form").submit()，这将触发提交事件。

- user920041

Answer 5

使用 jQuery 的 trigger() 函数在文档准备就绪事件中触发提交事件。

- kvc

Answer 6

为什么不这样做呢？

function AjaxCall() {
    // we want to store the values from the form input box, then send via ajax below    
    $.ajax({
        type: "POST",
        url: "http://www2.myurl.com/formhandler",
        data: "email=" + email + "&status=" + status,
        success: function() {
            $('form#seller-agreement-form').hide(function() {
                $('div#output').fadeIn();
            });

        }
    });
    return false;
}

AjaxCall();

$("form#seller-agreement-form").submit(AjaxCall);

- JesseBuesking

Answer 7

不确定这是否是您所要求的内容

$(document).ready(function () {
    $("form#seller-agreement-form").submit(function() {  
        // we want to store the values from the form input box, then send via ajax below    
        $.ajax({  
            type: "POST",  
            url: "http://www2.myurl.com/formhandler",  
            data: "email="+ email + "&status=" + status,  
            success: function(){  
                $('form#seller-agreement-form').hide(function(){$('div#output').fadeIn();});  

            }  
        });  
    return false;  
    });
});

- Andres