Iker Ocio Zuazo
Iker Ocio Zuazo

Reputation: 351

How can I send a multidimensional array with Ajax jQuery?

I have this 'table' and 'tbody' tags in html with many 'tr' elements. I want to send with Ajax every element of table to capture with PHP but I do not know how to create a multidimensional array to set every element. I wrote that code but it's not correct.

<tbody id="nuevo_producto">
    <tr>
        <td><input type="hidden" name="tabla-1">1</td>
        <td><input class="form-control" placeholder="Ref." type="text" size="15" id="modelo_ref_1" name="modelo_ref_1"></td>
        <td><input class="form-control" placeholder="Ref. C" type="text" size="15" id="modelo_refc_1" name="modelo_refc_1"></td>    
        <td><input class="form-control" placeholder="Modelo" type="text" size="60" id="modelo_modelo_1" name="modelo_modelo_1"></td>
        <td><input class="form-control" placeholder="PVP" type="text" size="15" id="modelo_pvp_1" name="modelo_pvp_1"></td>
    </tr>
    <tr>
        <td><input type="hidden" name="tabla-2">1</td>
        <td><input class="form-control" placeholder="Ref." type="text" size="15" id="modelo_ref_2" name="modelo_ref_2"></td>
        <td><input class="form-control" placeholder="Ref. C" type="text" size="15" id="modelo_refc_2" name="modelo_refc_2"></td>    
        <td><input class="form-control" placeholder="Modelo" type="text" size="60" id="modelo_modelo_2" name="modelo_modelo_2"></td>
        <td><input class="form-control" placeholder="PVP" type="text" size="15" id="modelo_pvp_2" name="modelo_pvp_2"></td>
    </tr>
...

Javascript-jQuery-Ajax code is

function pruebaAjax() {
var tamano = $("#tamano_hidden").val() * 4; // Value of table length
var array = [[[[]]]]; // How can I create a multidimensional array? I know that form is not correct
for (var i = 1; i <= tamano; i++) {
    array[i][1] = $("#modelo_ref_" + i.toString()); 
    array[i][2] = $("#modelo_refc_" + i.toString());
    array[i][3] = $("#modelo_modelo_" + i.toString());
    array[i][4] = $("#modelo_pvp_" + i.toString());
}
var marca = $("#nombreMarca").val();
var tipo = $("#tipo_producto").val();
var nombre = $("#nombre_producto").val();
var comentarios = $("#descripcion").val();
var parametros = {
    "tamano"
            : tamano,
    "tabla"
            : array,
    "marca"
            : marca,
    "tipo"
            : tipo,
    "nombre"
            : nombre,
    "comentarios"
            : comentarios
};
$.ajax({
    data: parametros,
    url: 'ejemplo_ajax_proceso.php',
    type: 'post',
    beforeSend: function() {
        $("#resultado").html("Procesando, espere por favor...");
    },
    success: function(response) {
        $("#resultado").html(response);
    }
});

I want something like that to send via POST

[0][0] = modelo_ref_0    //table's first row elements
[0][1] = modelo_refc_0
[0][2] = modelo_modelo_0
[0][3] = modelo_pvp_0
[1][0] = modelo_ref_1    //table's second row elements
[1][1] = modelo_refc_1
[1][2] = modelo_modelo_1
[1][3] = modelo_pvp_1 
[2][0] = modelo_ref_2    //table's third row elements
[2][1] = modelo_refc_2
[2][2] = modelo_modelo_2
[2][3] = modelo_pvp_2
....

Thank you everybody.

LAST QUESTION:

I wrote this with other variables:

function pruebaAjax() {
var tamano = $("#tamano_hidden").val() * 4;
var dataString = $('#form_serialize').serialize();  
var marca = $("#nombreMarca").val();
var tipo = $("#tipo_producto").val();
var nombre = $("#nombre_producto").val();
var comentarios = $("#descripcion").val();
var parametros = {
    "tamano"
            : tamano,
    "tabla"
            : dataString,
    "marca"
            : marca,
    "tipo"
            : tipo,
    "nombre"
            : nombre,
    "comentarios"
            : comentarios
};

$.ajax({
    data: parametros,
    url: 'ejemplo_ajax_proceso.php',
    type: 'post',

Then, I set variables in PHP...

$tamano = $_POST['tamano'];
$fila = $_POST['tabla'];
$marca = $_POST['marca'];
$tipo = $_POST['tipo'];
$nombre = $_POST['nombre'];
$comentarios = $_POST['comentarios'];

How can I iterate $fila with serialize's variables?

Upvotes: 0

Views: 973

Answers (2)

Flavio
Flavio

Reputation: 398

$.ajax({
    data: $('form').serialize(),
    url: 'ejemplo_ajax_proceso.php',
    type: 'post',
    beforeSend: function() {
        $("#resultado").html("Procesando, espere por favor...");
    },
    success: function(response) {
        $("#resultado").html(response);
    }
});

Upvotes: 1

Ashraf Samhouri
Ashraf Samhouri

Reputation: 408

Oh. Just surround it with tag. Like:

<form id="my-form">
   <!--- INPUTS -->
</form>

And get the serialized form:

$('#my-form').serialize();

Easy. Right?

Update And wait, the input names should be something like:

<input name="field[1]" />
<input name="field[2]" />
<input name="field[3]" />

This will make an array of (field).

Upvotes: 2

Related Questions