1

Buenas un gusto saludarlos.

Tengo un pequeño conveniente al momento de enviar los datos de una tabla

Los datos los traigo con php (while)

introducir la descripción de la imagen aquí

Como pueden ver ya me arroja el resultado de la primera tabla al momento de enviar #2 me sale el mismo resultado.

Codigo ajax:

function realizaProceso(valorCaja1){
        var parametros = {
                "valorCaja1" : valorCaja1,
        };
        $.ajax({
                data:  parametros, //datos que se envian a traves de ajax
                url:   'update.php', //archivo que recibe la peticion
                type:  'post', //método de envio
                beforeSend: function () {
                        $("#resultado").html("Procesando, espere por favor...");
                },
                success:  function (response) { //una vez que el archivo recibe el request lo procesa y lo devuelve
                        $("#resultado").html(response);
                }
        });
} 

Parte del codigo en PHP

<td><input type="hidden" id="valor1" value="<?php echo $id ;?>"><?php echo $rownumber; ?></td>


 <td><input type="button" class="btn btn-success" href="javascript:;" onclick="realizaProceso($('#valor1').val());return false;" value="Enviar"></td>

Codigo del archivo update.php

$resultado = $_POST['valorCaja1'];

echo $resultado;


Actualizado:

Con las sugerencias

introducir la descripción de la imagen aquí

Codigo:

        function realizaProceso(idCaja1){
        var parametros = {
                "idCaja1" : idCaja1,
        };
        $.ajax({
                data:  parametros, //datos que se envian a traves de ajax
                url:   'update.php', //archivo que recibe la peticion
                type:  'post', //método de envio
                beforeSend: function () {
                        $("#resultado").html("Procesando, espere por favor...");
                },
                success:  function (response) { //una vez que el archivo recibe el request lo procesa y lo devuelve
                        $("#resultado").html(response);
                }
        });
} 

  <td><input type="hidden" id="<?php echo $id; ?>" value="<?php echo $nom ;?>"><?php echo $rownumber; ?></td>
 
 
 <td><input type="button" class="btn btn-success" href="javascript:;" onclick="realizaProceso($('#id').val());return false;" value="Enviar"></td>

Update.php

$resultado = $_POST['idCaja1'];
echo $resultado;

Gracias.

5
  • El id del input debería ser dinámico y en el botón al llamar debería apuntar a ese id.
    – Bicho
    Commented el 16 jul. 2020 a las 13:26
  • Gracias por su pronta respuesta. Estimado Bicho, ya le pase el id (id="<?php echo $id?>" y modifique el llamado del input en id y en el javascript tambien lo apunte a id, cree una nueva variable indipendiente para probar y aun sigue llamando al primer valor. Commented el 16 jul. 2020 a las 13:33
  • Podrías editar en la pregunta, con los ajustes que te propuso Bicho para ver como quedo finalmente? Commented el 16 jul. 2020 a las 13:55
  • Los ID deben ser únicos, pero los estás repitiendo en cada iteración: <input type="hidden" id="valor1" ...>. Es por eso que siempre obtienes el mismo: realizaProceso($('#valor1').val()).
    – Triby
    Commented el 16 jul. 2020 a las 15:05
  • Actualizado con las sugerencias. Commented el 16 jul. 2020 a las 15:23

1 respuesta 1

1

En PHP asegúrate de no generar IDs duplicados, en su lugar, usa name

<td><input type="hidden" name="valor1" value="<?php echo $id ;?>"><?php echo $rownumber; ?></td>

<td><input type="button" class="btn btn-success" href="#" onclick="realizaProceso(); return false;" value="Enviar"></td>

En javascript revisa el elemento que lanzó el evento para obtener el campo

function realizaProceso(e){
    // e.target es el elemento en que se hizo clic
    // Accede a la fila padre con .closest('tr')
    // Encuentra el elemento con .find()
    valorCaja1 = $(e.target).closest('tr').find('[name="valor1"]').val();
    var parametros = {
            "valorCaja1" : valorCaja1,
    };
    $.ajax({
            data:  parametros, //datos que se envian a traves de ajax
            url:   'update.php', //archivo que recibe la peticion
            type:  'post', //método de envio
            beforeSend: function () {
                    $("#resultado").html("Procesando, espere por favor...");
            },
            success:  function (response) { //una vez que el archivo recibe el request lo procesa y lo devuelve
                    $("#resultado").html(response);
            }
    });
}

Opción más sencilla: Envía directamente ID

No necesitas el campo oculto, solo enviar ID como parámetro a la función:

<td><?php echo $rownumber; ?></td>
<td><input type="button" class="btn btn-success" href="#" onclick="realizaProceso(<?php echo $id ;?>); return false;" value="Enviar"></td>

En Javascript solo recibes el parámetro:

function realizaProceso(valorCaja1){
    var parametros = {
            "valorCaja1" : valorCaja1,
    };
    $.ajax({
            data:  parametros, //datos que se envian a traves de ajax
            url:   'update.php', //archivo que recibe la peticion
            type:  'post', //método de envio
            beforeSend: function () {
                    $("#resultado").html("Procesando, espere por favor...");
            },
            success:  function (response) { //una vez que el archivo recibe el request lo procesa y lo devuelve
                    $("#resultado").html(response);
            }
    });
}
1
  • El primer ejemplo no me funciono como lo estaba haciendo. Pero intente con el segundo codigo y me funciono de lo lindo gracias de verdad ya actualizo como solucionado. Commented el 16 jul. 2020 a las 15:36

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.