i tried to submit multiple form using ajax, but how to send one by one, i mean send the first ajax after done/success then send second ajax, below is my script:

<form>
 <input type="text" name="name" value="john doe" size="60">
 <input type="text" name="age" value="23" size="2">
</form>

<form>
 <input type="text" name="name" value="Alex" size="60">
 <input type="text" name="age" value="24" size="2">
</form>

<button>Submit</button>


<script>
function post_form_data(data) {
    $.ajax({
        type: 'POST',
        url: '.asp',
        data: data,
        success: function () {
            console.log('Success');
        },
        error: function () {
            console.log('error');   
        }
    });
}

$('button').on('click', function () {
    $('form').each(function () {
        post_form_data($(this).serialize());
    });
});
</script>

i tried to submit multiple form using ajax, but how to send one by one, i mean send the first ajax after done/success then send second ajax, below is my script:

<form>
 <input type="text" name="name" value="john doe" size="60">
 <input type="text" name="age" value="23" size="2">
</form>

<form>
 <input type="text" name="name" value="Alex" size="60">
 <input type="text" name="age" value="24" size="2">
</form>

<button>Submit</button>


<script>
function post_form_data(data) {
    $.ajax({
        type: 'POST',
        url: 'https://members.lelong..my/Auc/Member/Feed/feed.asp',
        data: data,
        success: function () {
            console.log('Success');
        },
        error: function () {
            console.log('error');   
        }
    });
}

$('button').on('click', function () {
    $('form').each(function () {
        post_form_data($(this).serialize());
    });
});
</script>

• javascript
• jquery
• ajax

• Unless I'm missing something, you seem to be on the right track. What's going wrong? Are you getting errors? – Cerbrus Commented May 20, 2014 at 8:48
• Instead of using .each() call post_form_data from the success function, add the forms that should be submitted to an array and remove them once sent, do that until the array is empty. – Patsy Issa Commented May 20, 2014 at 8:49
• try using async:false; – user2587132 Commented May 20, 2014 at 8:49
• e.g: stackoverflow./a/4097855/1414562 Now you could use then too api.jquery./deferred.then still using an array in some way – A. Wolff Commented May 20, 2014 at 8:50
• Since you accepted the answer that promotes bad practice, I hope you really understand what it implies to make the call synchronous. Basically, the browser is pletely unusable during the Ajax calls. That is already bad enough for a single call, but if you do that with multiple calls, it's a usability nightmare. – Felix Kling Commented May 20, 2014 at 15:43

3 Answers 3

You can try this :

function post_form_data(data,cache,i) {
    $.ajax({
        type: 'POST',
        url: 'https://members.lelong..my/Auc/Member/Feed/feed.asp',
        data: data,
        success: function () {
            console.log('Success');
            i++;
            post_form_data(cache.eq(i).serialize(),_cached,i);
        },
        error: function () {
            console.log('error');   
        }
    });
}

$('button').on('click', function () {

  var _cached=$('form');
  post_form_data(_cached.eq(0).serialize(),_cached,0);

});

You can add

async : false

to make it sequential.

$.ajax({
    type: 'POST',
    url: 'https://members.lelong..my/Auc/Member/Feed/feed.asp',
    data: data,
    async :false ,
    success: function () {
        console.log('Success');
    },
    error: function () {
        console.log('error');   
    }
});

Note:- async : false can logically turn down behavior of ajaxified request. We discourage the use of it until its needed desperately.

You could put requests data in array, returning promise interface from function and use done/then or always:

function post_form_data(data) {
    return $.ajax({
        type: 'POST',
        url: '/echo/html',
        data: data,
        success: function () {
            console.log('Success');
        },
        error: function () {
            console.log('error');
        }
    });
}

$('button').on('click', function () {
    var requests = $('form').map(function () {
        return $(this).serialize();
    }).get();
    var i = 0;
    if (requests.length) {
        makeRequest(requests, i);

    }
});

function makeRequest(requests, i) {
    var iPromise = post_form_data(requests[i]);
    if (i < requests.length - 1) {
        iPromise.done(makeRequest(requests, ++i))
    }
}