ajax calls iterating through javascript array

Question

I am trying iterate through a series of inputs from a form. foreach input i want to fire an ajax call that will only fire after previous call was completed. I read a Stack answer here.

$(function(){

 var data = [];

    $('input[type=text]').each(function(e,i){
            var val = $(this).val();
            data.push(val);
    });

    current = 0;
    function do_ajax() {
            if (current < data.length) {
                    $.ajax({
                            type:"POST",
                            data:"id="+data[current].value,
                            url:"tester.php",
                            success:function(result){
                                    $('#div').append(result);
                                    current++;
                                    do_ajax();
                            }
                    });
            };
    }
    do_ajax();
 });

HTML

    <input type='text' id='users[][name]' value='Bob'>
    <input type='text' id='users[][name]' value='Frank'>
    <input type='text' id='users[][name]' value='Tom'>
    <input type='text' id='users[][name]' value='Joe'>
    <input type='text' id='users[][name]' value='Bill'>
    <input type='text' id='users[][name]' value='Gary'>

<div id='done'></div>
<div id='div'>DIV</div>

tester.php for testing is simply:

 echo $_POST['id'];

i cant get anything returned from tester.php except:

undefined

what do i need to put for id in the data section of ajax call?

I have tried:

data[current].value;

data[current].val;

data[current].val();

EDIT::::::

Using accepted solution i also had to change:

  $('#div').append(result);

to:

 $('#div').append(result.responseText);

this is a stripped down version of what I am trying to do. i posted only enough to get my question across. each ajax call builds off the results of the previous. — bart2puck, Oct 05 '16 at 19:12

score 2 · Accepted Answer · answered Oct 05 '16 at 19:06

2

There's no value property, change this:

data:"id="+data[current].value

to this:

data:"id="+data[current]

and also use complete instead of success callback because complete executes after success and error callback

answered Oct 05 '16 at 19:06

vher2

980
6
9

Is the array built "correctly"(is it bad code to not have index)? should i build it with index:value? should i use an object instead? – bart2puck Oct 05 '16 at 19:13
actually have to retract my acceptance. the result of echo $_POST['id'] is 0,1,2,3,4,5 – bart2puck Oct 05 '16 at 19:14
can you see in the developer tool in network tab what form data is being submitted. – vher2 Oct 05 '16 at 19:20
yea, well no, i can see the response from tester.php is "Bill" or "Joe" or whatever. so it appears $('#div').append(result) isnt appending, or appending "" – bart2puck Oct 05 '16 at 19:23
the numbers were a mistake in my comment above. the result of tester.php seems to be correct, but nothing is being appended to #div. now. in the complete of ajax, if i do $('#div').append(result+",
"); i see [object Object], and so on. – bart2puck Oct 05 '16 at 19:25
try to use `complete`, instead of `success`. – vher2 Oct 05 '16 at 19:27
I have done that, and i also replaced append with alert(result); and get [object Object] in the alert window. – bart2puck Oct 05 '16 at 19:28
got it. alert(result.responseText) shows the response from tester.php. – bart2puck Oct 05 '16 at 19:34

ajax calls iterating through javascript array

1 Answers1