Submit a form using jQuery

I want to submit a form using jQuery. Can someone provide the code, a demo or an example link?

It depends on whether you are submitting the form normally or via an AJAX call. You can find lots of information at jquery.com, including documentation with examples. For submitting a form normally, check out the submit() method to at that site. For AJAX, there are many different possibilities, though you probably want to use either the ajax() or post() methods. Note that post() is really just a convenient way to call the ajax() method with a simplified, and limited, interface.

A critical resource, one I use every day, that you should bookmark is How jQuery Works. It has tutorials on using jQuery and the left-hand navigation gives access to all of the documentation.

Examples:

Normal

$('form#myForm').submit();

AJAX

$('input#submitButton').click( function() {
    $.post( 'some-url', $('form#myForm').serialize(), function(data) {
         // ... do something with response from server
       },
       'json' // I expect a JSON response
    );
});

$('input#submitButton').click( function() {
    $.ajax({
        url: 'some-url',
        type: 'post',
        dataType: 'json',
        data: $('form#myForm').serialize(),
        success: function(data) {
                   // ... do something with the data...
                 }
    });
});

Note that the ajax() and post() methods above are equivalent. There are additional parameters you can add to the ajax() request to handle errors, etc.

You will have to use $("#formId").submit().

You would generally call this from within a function.

For example:

<input type='button' value='Submit form' onClick='submitDetailsForm()' />

<script language="javascript" type="text/javascript">
    function submitDetailsForm() {
       $("#formId").submit();
    }
</script>

You can get more information on this on the Jquery website.

when you have an existing form, that should now work with jquery - ajax/post now you could:

• hang onto the submit - event of your form

• prevent default functionality of submit

• do your own stuff

   $(function() {
   	//hang on event of form with id=myform
   	$("#myform").submit(function(e) {
   
   		//prevent Default functionality
   		e.preventDefault();
   
   		//get the action-url of the form
   		var actionurl = e.currentTarget.action;
   
   		//do your own request an handle the results
   		$.ajax({
   		        url: actionurl,
   		        type: 'post',
   		        dataType: 'application/json',
   		        data: $("#myform").serialize(),
   		        success: function(data) {
   		            ... do something with the data...
   		        }
   		});
   		
   	});
   	
   });
  

Please note that, in order for the serialize() function to work in the example above, all form elements need to have their name attribute defined.

Example of the form:

<form id="myform" method="post" action="http://example.com/do_recieve_request">

<input type="text" size="20" value="default value" name="my_input_field">
..
.
</form>

@PtF - the data is submitted using POST in this sample, so this means you can access your data via

 $_POST['dataproperty1'] 

, where dataproperty1 is a "variable-name" in your json.

here sample syntax if you use CodeIgniter:

 $pdata = $this->input->post();
 $prop1 = $pdata['prop1'];
 $prop1 = $pdata['prop2'];

In jQuery I would prefer the following:

$("#form-id").submit()

But then again, you really don't need jQuery to perform that task - just use regular JavaScript:

document.getElementById("form-id").submit()

From the manual: jQuery Doc

$("form:first").submit();

For information
if anyone use

$('#formId').submit();

Do not something like this

<button name = "submit">

It took many hours to find me that submit() won't work like this.

Use it to submit your form using jquery. Here is the link http://api.jquery.com/submit/

<form id="form" method="post" action="#">
    <input type="text" id="input">
    <input type="button" id="button" value="Submit">
</form>

<script type="text/javascript">
$(document).ready(function () {
    $( "#button" ).click(function() {
        $( "#form" ).submit();
    });
});
</script>

this will send a form with preloader :

var a=$('#yourform').serialize();
$.ajax({
    type:'post',
    url:'receiver url',
    data:a,
    beforeSend:function(){
        launchpreloader();
    },
    complete:function(){
        stopPreloader();
    },
    success:function(result){
         alert(result);
    }
});

i'have some trick to make a form data post reformed with random method http://www.jackart4.com/article.html

$("form:first").submit();

See events/submit.

Note that if you already installed a submit event listener for your form, the innner call to submit()

jQuery('#<form-id>').submit( function(e){ 
    e.preventDefault();
    // maybe some validation in here
    if ( <form-is-valid> ) jQuery('#<form-id>').submit();
});

won't work as it tries to install a new event listener for this form's submit event (which fails). So you have to acces the HTML Element itself (unwrap from jQquery) and call submit() on this element directly:

    jQuery('#<form-id>').submit( function(e){ 
      e.preventDefault();
      // note the [0] array access:
      if ( <form-is-valid> ) jQuery('#<form-id>')[0].submit();
    });

You can also use the jquery form plugin to submit using ajax aswell:

http://malsup.com/jquery/form/

Note that in Internet Explorer there are issues with dynamically created forms. A form created like this will not submit in IE (9):

var form = $('<form method="post" action="/test/Delete/">' +
             '<input type="hidden" name="id" value="' + myid + '"></form>');
$(form).submit();

To get it working in IE create the form element and attach it before submitting like so:

var form = document.createElement("form");
$(form).attr("action", "/test/Delete")
       .attr("method", "post");
$(form).html('<input type="hidden" name="id" value="' + myid + '" />');
document.body.appendChild(form);
$(form).submit();
document.body.removeChild(form);

Creating the form like in example 1 and then attaching it will not work - in IE9 it throws a JScript error DOM Exception: HIERARCHY_REQUEST_ERR (3)

Props to Tommy W @ https://stackoverflow.com/a/6694054/694325

jQuery("a[id=atag]").click( function(){
	
	jQuery('#form-id').submit();	  

            **OR**

	jQuery(this).parents("#form-id").submit();
});

The solutions so far require you to know the ID of the form.

Use this code to submit the form without needing to know the ID:

function handleForm(field) {
    $(field).closest("form").submit();
}

For example if you were wanting to handle the click event for a button, you could use

$("#buttonID").click(function() {
    handleForm(this);    
});

If the button is located between the form tags, I prefer this version:

$('.my-button').click(function (event) {
    var $target = $( event.target );
    $target.closest("form").submit();
});

My approach was slightly different, change the button into submit button and then click

$("#submit").click(function (event) {
  $(this).attr("type", "submit");
  $(this).click();
});

IE trick for dynamic forms:

$('#someform').find('input,select,textarea').serialize();

you could use it like this :

  $('#formId').submit();

OR

document.formName.submit();

function  form_submit(form_id,filename){
    $.post(filename,$("#"+form_id).serialize(), function(data){
        alert(data);
    });
}

It will post the form data on your given file name via AJAX.

I recommend a generic solution so you don't have to add the code for every form. Use the jquery form plugin (http://jquery.malsup.com/form/) and add this code.

$(function(){
$('form.ajax_submit').submit(function() {
	$(this).ajaxSubmit();
            //validation and other stuff
        return false; 
});

});

you could do it like this :

$('#myform').bind('submit', function(){ ... });

I have also used the following to submit a form (without actually submitting it) via Ajax:

  jQuery.get("process_form.php"+$("#form_id").serialize(), {}, 
    function() {
      alert("Okay!"); 
    });