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) {
        CheckRequired(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');
        $.ajax({
            url : '/section' + formURL,
            type: "POST",
            data : postData,
            success:function(data, textStatus, jqXHR) {
                //alert(type);
                if(type === 'modal') {
                    if(redir_url === '') {
                        LoadModal('/section' + formURL, '');
                    } else {
                        LoadModal('/section' + redir_url, '');
                    }
                } else if(type === 'reload') {
                    if(redir_url === '') {
                        location.reload();
                    } else {
                        //
                    }
                } else {
                    //close the loading modal
                    CloseModal();
                    //location.reload();
                    //$("body").html(data);
                }
            },
            error: function(jqXHR, textStatus, errorThrown) {
                //if fails
            }
        });
        e.preventDefault();
    });
}

which works fine calling it like this:

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

<input="submit" />
</form>

i am trying to use this code:

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

</form>

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

Answers


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>
</form>

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) {
    e.preventDefault();
    postForm("#invoices");
});

Handle the property change event

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

Do the AJAX post

function postForm(formId) {
    var form = $(formId);
    $.ajax({
        url: form.attr("action"),
        type: form.attr("method"),
        data: form.serializeArray(),
        success: function(data) {
            console.log(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

Search




Leave an answer