jquery : pass an array in ajax

Question

I have a form with several identical fields:

<input type="text" id="qte" value="" name="qte[]">

How transmetre the array in my file processing?

I noticed that the array sent ajax became a string.

$("#form_commande").submit(function(event){

var qte = $("#qte").val();

if(qte== '')
{
    $('#qte_message').html("KO QTE");
}
else
{
    $.ajax({
        type : "POST",
        url: $(this).attr('action'),
        data: $(this).serialize(),
        success : function(){
            $('#form_commande').html('<p>OK</p>');
        },
        error: function(){
            $('#form_commande').html("<p>KO</p>");
        }
    });
}
return false;

}

possible duplicate of [Serializing to JSON in jQuery](http://stackoverflow.com/questions/191881/serializing-to-json-in-jquery) — Joren, Sep 02 '13 at 14:46
If it's sending a string then you probably need to use `serializeArray()`. — Ben Fortune, Sep 02 '13 at 14:47
You can't have several fields with the same ID jQuery will only ever recognize the first one it sees. ID's are unique identifiers. — Rick Calder, Sep 02 '13 at 14:48
You cant have identical fields with same id, may be you can use class — SarathSprakash, Sep 02 '13 at 14:52

MD SHAHIDUL ISLAM · Answer 1 · 2013-09-02T15:36:22.090

3

Get value in jquery like:

$("#form_commande").submit(function(event){

    var qte_array = new Array();
    $('input[name="qte[]"]').each(function(){
       qte_array.push($(this).val());
    });

    if(qte_array.length== 0)
    {
        $('#qte_message').html("KO QTE");
    } 
    else
    {
        $.ajax({
            type : "POST",
            url: $(this).attr('action'),
            data: {qte:qte_array},
            success : function(){
               $('#form_commande').html('<p>OK</p>');
            },
            error: function(){
                $('#form_commande').html("<p>KO</p>");
            }
        });
    }
});

and get it in php like:

$qte = $_POST["qte"];

here qte an array

edited Sep 02 '13 at 15:36

answered Sep 02 '13 at 15:27

MD SHAHIDUL ISLAM

14,325
6
82
89

I also have a field name, surname and email. How to send the data (data :) and recover $ _post [] in php? Thank you for your help – Christophe Martin Sep 04 '13 at 09:53
@ChristopheMartin: Change line as data: {qte:qte_array, surname:"Name", email:"email@domain.com"}, and get it in php $surname = $_POST["surname"]; $email = $_POST["email"]; – MD SHAHIDUL ISLAM Sep 04 '13 at 10:00
Excellent; I really like being able to pass an array directly and receive it as an array – veeTrain Oct 11 '13 at 20:51

score 2 · Answer 2 · answered Sep 02 '13 at 14:49

2

This returns the input textbox object:

$("#qte");

This returns the value of the input textbox object:

$("#qte").val();

Remember you asked for DOM object by id, and this by definition returns only one.

answered Sep 02 '13 at 14:49

Marek

7,337
1
22
33

score 2 · Answer 3 · edited May 23 '17 at 12:22

Please read this topic: JQuery - Reading an array of form values and displaying it?

In short you should iterate with tag name="qte[]" instead of using ids. In DOM you cannot have two different objects with different ids.

var qte_array = new Array();
$('input[name="qte[]"]').each(function(){
   qte_array.push($(this).val());
});

After this you have all the values of qte[] array in one object - qte_array. You can later serialize this array to JSON and then pass it as a string.

ALTHOUGH - you shouldn't need to do all those things. You can send ajax request directly with your form, all those data in these inputs will be transferred anyway. You just need to handle them correctly server-side.

score 1 · Answer 4 · answered Sep 02 '13 at 14:55

1

id is unique, you can't have more fields with the same ID.

By the way you should convert values to JSON and pass them to Ajax

answered Sep 02 '13 at 14:55

Fez Vrasta

14,110
21
98
160

this is not the most important. I can put a class instead. – Christophe Martin Sep 02 '13 at 15:44

jquery : pass an array in ajax

4 Answers4