AJAX submit form with jQuery

Problem

I have an orderproductForm form with an undefined amount of inputs.

I’d like to accomplish anything with jQuery. get or ajax or anything similar that calls a page through Ajax and sends all of the form orderproductForm’s inputs.

One option would be to do something like this.

jQuery.get("myurl",
          {action : document.orderproductForm.action.value,
           cartproductid : document.orderproductForm.cartproductid.value,
           productid : document.orderproductForm.productid.value,
           ...

However, I am not familiar with all of the form inputs. Is there a feature, function, or something that sends all of the form inputs at once?

Asked by Nathan H

Solution #1

This is a straightforward reference:

// this is the id of the form
$("#idForm").submit(function(e) {

    e.preventDefault(); // avoid to execute the actual submit of the form.

    var form = $(this);
    var actionUrl = form.attr('action');

    $.ajax({
        type: "POST",
        url: actionUrl,
        data: form.serialize(), // serializes the form's elements.
        success: function(data)
        {
          alert(data); // show response from the php script.
        }
    });

});

Answered by Alfrekjv

Solution #2

You can utilize the Ajax Form Plugin’s ajaxForm/ajaxSubmit routines or the jQuery serialize function.

AjaxForm:

$("#theForm").ajaxForm({url: 'server.php', type: 'post'})

or

$("#theForm").ajaxSubmit({url: 'server.php', type: 'post'})

When the submit button is pushed, ajaxForm will sent. ajaxSubmit transmits data right away.

Serialize:

$.get('server.php?' + $('#theForm').serialize())

$.post('server.php', $('#theForm').serialize())

The documentation for AJAX serialisation may be found here.

Answered by jspcal

Solution #3

Another solution that uses properties defined on the form element is as follows:

<form id="contactForm1" action="/your_url" method="post">
    <!-- Form input fields here (do not forget your name attributes). -->
</form>

<script type="text/javascript">
    var frm = $('#contactForm1');

    frm.submit(function (e) {

        e.preventDefault();

        $.ajax({
            type: frm.attr('method'),
            url: frm.attr('action'),
            data: frm.serialize(),
            success: function (data) {
                console.log('Submission was successful.');
                console.log(data);
            },
            error: function (data) {
                console.log('An error occurred.');
                console.log(data);
            },
        });
    });
</script>

Answered by 3 revs, 2 users 79%

Solution #4

There are a couple of things to keep in mind.

1. There are a variety of methods for submitting a form.

As a result, we should bind to the form submit event rather than the button click event. This will ensure that our code is compatible with all current and future devices and assistive technologies.

2. Hijax

It’s possible that the user doesn’t have JavaScript turned on. Here, a hijax technique is useful, in which we use JavaScript to take control of the form, but leave it submittable if JavaScript fails.

We should take the URL and method from the form so that we don’t have to adjust the JavaScript if the HTML changes.

3. Unobtrusive JavaScript

It’s best to use event.preventDefault() instead of return false because it permits the event to bubble up. Other scripts, such as analytics programs that may be tracking user activities, can now be linked to the event.

Speed

Rather than adding our script inline, we should use an external script. We can use a script element to connect to this in the page’s head section, or we can link to it at the bottom of the page for speed. The script should work in the background, not get in the way of the user’s experience.

Code

If you agree with everything above and wish to handle the submit event with AJAX (a hijax pattern), you could do something like this:

$(function() {
  $('form.my_form').submit(function(event) {
    event.preventDefault(); // Prevent the form from submitting via the browser
    var form = $(this);
    $.ajax({
      type: form.attr('method'),
      url: form.attr('action'),
      data: form.serialize()
    }).done(function(data) {
      // Optionally alert the user of success here...
    }).fail(function(data) {
      // Optionally alert the user of an error here...
    });
  });
});

You can use JavaScript to manually trigger a form submission whenever you want, for example:

$(function() {
  $('form.my_form').trigger('submit');
});

Edit:

I had to do this recently and ended up building a plugin to help me.

(function($) {
  $.fn.autosubmit = function() {
    this.submit(function(event) {
      event.preventDefault();
      var form = $(this);
      $.ajax({
        type: form.attr('method'),
        url: form.attr('action'),
        data: form.serialize()
      }).done(function(data) {
        // Optionally alert the user of success here...
      }).fail(function(data) {
        // Optionally alert the user of an error here...
      });
    });
    return this;
  }
})(jQuery)

Add a data-autosubmit attribute to your form tag and you can then do this:

<form action="/blah" method="post" data-autosubmit>
  <!-- Form goes here -->
</form>

$(function() {
  $('form[data-autosubmit]').autosubmit();
});

Answered by superluminary

Solution #5

You can alternatively use FormData (which isn’t available in Internet Explorer):

var formData = new FormData(document.getElementsByName('yourForm')[0]);// yourForm: form selector        
$.ajax({
    type: "POST",
    url: "yourURL",// where you wanna post
    data: formData,
    processData: false,
    contentType: false,
    error: function(jqXHR, textStatus, errorMessage) {
        console.log(errorMessage); // Optional
    },
    success: function(data) {console.log(data)} 
});

This is how FormData is used.

Answered by macio.Jun

Post is based on https://stackoverflow.com/questions/1960240/jquery-ajax-submit-form