on single button want to post a form and also post data by ajax?

Question

I have make a one page in which I have used the KendoUI treeview control and its data is posted by an AJAX call, and there is also form data. Currently I have a separate buttons for the AJAX call and for posting the form, now I want to post form data and also perform the AJAX call on single button.

I have tried to make a jQuery function which triggers both buttons on a single click. I have made another button which has a click event:

<input type=submit onclick="BtnClick" />  <-- on click function call

javascript function:

function BtnClick() {
    $("#Submit").click(); <-- Submit ajax call
    $("#Save").click(); <-- post form
}

In the above function, the AJAX call is going and on same time page is also posting so the AJAX call is not completing.

How can I get this functionality by a single click?

Please advise.

send ajax call first when ajax call completes call form submit — Ehsan Sajjad, Apr 16 '14 at 06:45
You can do this with *callbacks*, `$("#Submit").click(function () { $("#Save").click(); })` — Praveen, Apr 16 '14 at 06:47
but after form submit page will be posted and ajax call will not instantiate — Ehsan Sajjad, Apr 16 '14 at 06:47
there are 3 ajax call and 1 form post so it's all ajax call complete and then we try to post form then it takes some time delay — Vinit Patel, Apr 16 '14 at 07:15

score 2 · Answer 1 · answered Apr 16 '14 at 06:47

2

you need to send Ajax Call first and in the success function of ajax call trigger form Submit button:

Here is pseudocode:

$.ajax({
...
...
success:function(){

$("#Save").click();
}
})

answered Apr 16 '14 at 06:47

Ehsan Sajjad

61,834
16
105
160

score 2 · Accepted Answer · answered Apr 16 '14 at 06:49

You need to place the code that is run under those buttons within their own functions so that they can be called either individually under the #Save or #Submit buttons, or together under the BtnClick function. Try this:

<form id="myForm">
    <!-- your fields ... -->

    <input type="button" id="postForm" />
</form>

function submitHandler(callback) {
    // make the AJAX call, using the callback parameter as the callback:
    $.ajax({ 
        url: 'foo.com',
        data: { foo: 'bar' },
        success: function() {
            callback && callback();
        }
    });
}

function saveHandler() {
    // post the form
    $('#myForm').submit();
}

function formHandler() {
    // do both
    submitHandler(saveHandler);
}

$("#Submit").click(submitHandler);
$("#Save").click(saveHandler);
$('#postForm').click(formHandler);

thank you for reply but in my case there is 3 ajax call on single page and 1 form so there is so much time take and if any ajax call is brak then whloe chain is break so some of data store and some are missing and we didn't revert it. — Vinit Patel, Apr 16 '14 at 07:12
That's correct, there will be a time delay while the AJAX requests complete, but there is no other way using this model. You cannot leave the page while an AJAX request is in progress or it will be cancelled. — Rory McCrossan, Apr 16 '14 at 08:16

on single button want to post a form and also post data by ajax?

2 Answers2