Home Ask Login Register

Developers Planet

Your answer is one click away!

charlie February 2016

jquery ajax post form function not submitting on timeout

I have this function which posts forms:

function post_form(form_id, type, redir_url) {
    $( form_id ).submit(function(e) {
        var postData = $(this).serializeArray();
        var formURL = $(this).attr("action");
        LoadModalBody('<h2 align="center">Loading...</h3><p align="center"><i class="fa fa-refresh fa-spin fa-5x"></i></p>', 'Loading');
            url : '/section' + formURL,
            type: "POST",
            data : postData,
            success:function(data, textStatus, jqXHR) {
                if(type === 'modal') {
                    if(redir_url === '') {
                        LoadModal('/section' + formURL, '');
                    } else {
                        LoadModal('/section' + redir_url, '');
                } else if(type === 'reload') {
                    if(redir_url === '') {
                    } else {
                } else {
                    //close the loading modal
            error: function(jqXHR, textStatus, errorThrown) {
                //if fails

which works fine calling it like this:

<form method="post" action="/users/mileage" id="form1" onsubmit="post_form('#form1', 'modal');">

<input="submit" />

i am trying to use this code:

<form id="invoices" action="/accounting/dashboard" method="post">


<script type="text/javascript">
$(document).ready(function() {
    var timeoutId;
    $('#invoices input, #invoices textarea').on('input property        


lightcast February 2016

You do realize that in your code you have on "propertychange change".

If you want on click than you have to do the following:

$("#form1").submit(function(){ "your code"});

Jasen February 2016

Remove the submit handler $( form_id ).submit(function(e) it is unnecessary in both of your usage cases.

In the first case you trigger off the inline onsubmit="postform(...)".

It doesn't work in the second case because you don't trigger a submit event.

Edit for a clearer example

If you want to move the AJAX call so it triggers off the input change...

Let's remove the onsubmit from the form element.

<form id="invoices" action="/accounting/dashboard" method="post">
    <input type="text" />
    <button type="submit">Submit</button>

Set up a submit handler so the browser won't do the normal form submission which could cause your page to navigate away.

$("#invoices").on("submit", function(e) {

Handle the property change event

var timeoutId;
$("#invoices input").on("input propertychange change", function() {
   timeoutId = setTimeout(function() {
   }, 1000); 

Do the AJAX post

function postForm(formId) {
    var form = $(formId);
        url: form.attr("action"),
        type: form.attr("method"),
        data: form.serializeArray(),
        success: function(data) {
        error: function(jqxhr, status, error) { }

And a JSFiddle example.

What's different?

In the second case you've wrapped the AJAX request in a form submission event. But it will never trigger because you are in the change event. I suggested you remove the submit handler because you are essentially setting up a submit handler within the inline onsubmit.<

Post Status

Asked in February 2016
Viewed 2,433 times
Voted 13
Answered 2 times


Leave an answer

Quote of the day: live life