How to initiate form submission on page load using jQuery

Question

It doesn't seem like it should be too hard to do, but I'm in a hurry and I was looking for a simple answer. I need to submit a form to load the page. This is my AJAX submit function, which works fine. I just need to figure out how to call it when the page loads.

Any help is much appreciated!

$("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; }); 

Answer 1

if you call $().submit() , it invokes the action; $().submit(function) binds the handler to the submit event.

However, you can skip submit and just call the ajax method directly.

 $(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();}); } }); }); 

Answer 2

To submit a form to load the page, you should write something like

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

But if what you are trying to do is simply perform the same action that you would otherwise have performed when submitting the form, then you might not want to submit the form, but only for this:

 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(); }); 

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'); }); 

You can use the .trigger() function to fire the submit event on the form. I chained calls, so the form should only be selected once. Note that you want to set the submit event handler before you fire the submit event.

Documentation: http://api.jquery.com/trigger

Answer 4

Call $("#seller-form").submit() on the form, and this will raise a submit event.

Answer 5

Why not do

 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); 

Answer 6

Use jquery trigger () function to fire dispatch event to document.ready event

Answer 7

not sure if this is what you are asking

 $(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; }); });