Submit ajax request one by one with each()

Question

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.com.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>

Answer 1

You can try this :

function post_form_data(data,cache,i) {
    $.ajax({
        type: 'POST',
        url: 'https://members.lelong.com.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);

});

Answer 2

You can add

async : false

to make it sequential.

$.ajax({
    type: 'POST',
    url: 'https://members.lelong.com.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.

Answer 3

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))
    }
}