CODEWITHSUNDEEP
jquery
Vaughn D. Taylor
Vaughn D. Taylor

Reputation: 637

How do I trigger a form submission on page load using Jquery

This doesn't seem like it should be too difficult to accomplish, but I'm in a rush and I have been looking for a simple answer. I need to submit a form on page load. This is my AJAX submit function which works fine. I just need to figure out how to trigger it on page load.

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

Upvotes: 8

Views: 30230

Answers (7)

Andres
Andres

Reputation: 2023

not sure if this is what you're asking for

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

Upvotes: 0

user920041
user920041

Reputation:

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

Upvotes: 0

Evan Davis
Evan Davis

Reputation: 36592

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

You can skip the submit however 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();});  

      }  
  });
});

Upvotes: 10

kvc
kvc

Reputation: 1137

Use jquery trigger() function to trigger submit event in your document.ready event

Upvotes: 0

Jasper
Jasper

Reputation: 75993

$(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 trigger the submit event on the form. I chained the calls so the form only has to be selected once. Note, you want to make sure to set the submit event handler before triggering the submit event.

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

Upvotes: 4

David Hedlund
David Hedlund

Reputation: 129792

To actually submit the form on page load, you would write something like

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

But if what you're trying to do is just to perform the same action that you would otherwise have performed when the form was submitted, then perhaps you don't want to submit the form, but only to do 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();
});

Upvotes: 4

JesseBuesking
JesseBuesking

Reputation: 6586

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

Upvotes: 0

Related Questions