Posting two input arrays via jquery at the same time

Question

I am appending multiple input boxes and successfully posting one input array to the mysql as here it is.

$('<p><input type="text"  class="name" name="task" ></p>').appendTo($('#add_here'));

function addmem(id, text, number) {
    $('input.name').each(function() {
        // var te=$('input.task').val();
        $.post(
            'sendchat2.php', 
            { option: 'add_mem', id: id , text: $(this).val() }, 
            function(data) {
                alert(data);
            });
        });
    }

But now I need to post two input arrays at the same time. One input is customer name and another is his mobile number. I tried the below, but its not working correctly. Please help or suggest any alternative approach.

$('<p><input type="text"  class="name" ><input type="text"  class="number" name="task" ></p>').appendTo($('#add_here'));

function addmem(id, text, number) {
    $('input.name').each(function() {
        $('input.number').each(function() {
            $.post(
                'sendchat2.php', 
                { option: 'add_mem', id: id, text: $(this).val(), number: $(this).val()}, 
                function(data) {
                    alert(data);
                }
            );
        });
    });
}

Mike · Accepted Answer · 2012-11-16 16:35:33Z

You should use the $.ajax{}) function instead of $.post.

$.ajax({
  type: 'POST',
  data: array1.serialize() + array2.serialize(), //(if this info is coming from a form, just do $(form identifier).serialize(); and it will send all form elements).
  url: <destination url>
  success: function (data){
          <what you want to do when the request is successful here>
         }
})

Doing it this way, you only make 1 ajax call with all of your data, as opposed to an ajax call on each iteration through your loop. It should be much more efficient.

I think this function is also easier to use with multiple data sources, but I am sure you could probably come up with a way to do this with $.post also (perhaps serializing both arrays, or combining the two arrays into one before passing to the server. If you can give me an idea of what your form looks like, I be more specific.

Andreas · Accepted Answer · 2012-11-16 16:33:09Z

1

If the markup will always fit the scheme <name><number>

function addmem(id, text, number) {
    $('input.name').each(function() {
        var input = $(this),
            name = input.val(),
            number = input.next().val();

        $.post(
            "sendchat2.php", 
            { "option": "add_mem", "id": id, "text": name, "number": number }, 
            function(data) {
               alert(data);
            }
        );
    });
}

answered Nov 16, 2012 at 16:33

Andreas

21.9k7 gold badges52 silver badges58 bronze badges

2 Comments

Cuty Pie Over a year ago

,teted this,but its not working.number is returned as undefined index.

Andreas Over a year ago

Please show us an example with the markup and your javascript on jsfiddle.net or jsbin.com so we can experiment with it

madlee · Accepted Answer · 2012-11-16 16:29:45Z

the thing that stands out is this loop

$('input.name').each(function(){

    $('input.number').each(function(){

$.post('sendchat2.php', {option:'add_mem', id:id , text:$(this).val(),number:$(this).val()}, function(data) {
 alert(data);
});
    });

});

it looks like you are assigning the same value to the text and number post variables, since the this keyword will always refer to the input.number element in the inner each loop. try this:

$('input.name').each(function(){
  var nameval = $(this).val();

  $('input.number').each(function(){
    var numval = $(this).val();

    $.post('sendchat2.php', {option:'add_mem', id:id , text:nameval, number:numval}, function(data) {
     alert(data);
    });

  });
});

Collectives™ on Stack Overflow

Posting two input arrays via jquery at the same time

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related