1

Primero agradecer a quien me pueda ayudar sobre este tema, que he tratado de resolver por mi cuenta pero no logro dar con la clave. Lo que necesito es actualizar registros de una tabla concreta de una base de datos. He precargado en un select la key (registro único) y al hacer click debería crearse una nueva linea con los datos del registro en unos inputs, para después modificar los campos que el usuario desee. El problema es que no se como hacerlo, solo he logrado cargar la key, pero me es imposible cargar el resto de datos. El código:

HTML

<select name="selectModificar" id="selectorModificar" onclick="recogerValor()">
<option value="0" selected disabled>...</option>
<?php
    $consulta = "Select * from prueba.S";
    $query = mysqli_query($conexion, $consulta);
    while ($datos = mysqli_fetch_array($query)) {
?>
<option value="<?php echo $datos['Cod_prov'] ?>"> <?php echo $datos['Cod_prov'] ?></option>
<?php
}
?>

JS

var miTabla = document.querySelector("table");

function recogerValor() {
var select = document.getElementById('selectorModificar');
var selectedOption = '';
select.addEventListener('change',
    function () {
        selectedOption = this.options[select.selectedIndex];
        modificar_seleccion(selectedOption);
    });
}

function modificar_seleccion(selectedOption) {
    var row = miTabla.insertRow(miTabla.rows.length);
    var celda1 = row.insertCell(0);
    var celda2 = row.insertCell(1);
    var celda3 = row.insertCell(2);
    var celda4 = row.insertCell(3);
    var celda5 = row.insertCell(4);
    var celda6 = row.insertCell(5);
    celda1.innerHTML = '<input type="text" name="Cod_prov" value="' + selectedOption.value + '"' + 'readonly style="background-color: grey; border: 1px solid blue;">';
    celda2.innerHTML = '<input type="text" name="Nombre" required>';
    celda3.innerHTML = '<input type="number" name="edad" min="0" max="100" required>';
    celda4.innerHTML = '<input type="text" name="ciudad" required>';
    celda5.innerHTML = '<input type="number" name="status" min="0" max="100" required>';
    celda6.innerHTML = '<input type="submit" name="btn_submit" value="Modificar Registro" style="padding: 5px;"></input>';
}

PHP

    function mostrar_datos($conexion)
{
    $consulta = "Select * from prueba.S order by lpad(Cod_prov, 10, 0)";

    $resultado = mysqli_query($conexion, $consulta);

    if ($resultado) {
    echo '<form action="procesar.php" method="POST" id="myForm">';
    echo "<table class='tabla'>";
    echo "<tr>";
    //mostrar cabecera tabla
    $campos = mysqli_query($conexion, "SHOW FIELDS from prueba.S");
    while ($v = mysqli_fetch_row($campos)) {
        echo "<td><b>" . $v[0] . "</b></td>";
    }
    echo "</tr>";

    //mostrar las filas de la tabla
    while ($v = mysqli_fetch_row($resultado)) {
        echo "<tr>";
        foreach ($v as $valor) {
            echo "<td>" .  $valor . "</td>";
        }
        echo "</tr>";
    }
    echo "</table>";
    echo "</form>";
    mysqli_free_result($resultado); //Liberar la memoria
} else {
    echo '<script>alert ("¡Error de conexión! Contacte con su administrador.");window.location="index.php";</script>';
}

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

y una vez seleccionado el proveedor, deberían cargarse todos los datos del registro en los inputs

introducir la descripción de la imagen aquí

De antemano, muchas gracias por vuestra ayuda.

6
  • ¿Puedes agregar el código relacionado con mitabla tambien? tanto el html como el javascript, gracias
    – masterguru
    Commented el 26 dic. 2021 a las 10:33
  • La pregunta no se entiende. El problema es que no se como hacerlo, solo he logrado cargar la key, pero me es imposible cargar el resto de datos. ¿A qué te refieres exactamente (indica la parte exacta del código donde tienes el problema). Di también qué depuraciones has hecho al respecto. Deberías depurar con var_dump (PHP) o con console.log (Javascript) aquellas variables u objetos problemáticos. ¿Lo has hecho? ¿Con qué resultados?
    – A. Cedano
    Commented el 26 dic. 2021 a las 23:03
  • La idea es cargar en una nueva linea todos los datos del registro seleccionado en el select, en el ejemplo la primary Key S3131 seleccionada al hacer click debería cargarse también el nombre, edad, provincia, estado, es decir, Maria, 20, Malaga, 10, y por el momento solo he logrado insertar el código S3131. Creo que la clave está en hacer llegar los datos desde PHP al JS, a la funcion modificar_seleccion(), y ahí hacer un innerHTML a cada celda/input, pero, ¿como llevo los datos hasta ahí? Hice un console.log y me devuelve siempre la key(codigo).
    – Peter
    Commented el 27 dic. 2021 a las 11:18
  • Vamos avanzando, pero a paso de tortuga, aun asi me he animado a intentar ayudarte. De momento veo esto: 1) Quita el onclick="recogerValor()" (ya estas supervisando esa accion en el js). 2) Quita el function recogerValor() { y tambien su cierre más abajo }. Con eso conseguiras que no repita la accion varias veces y no te inserte varias lineas a la vez. Y a partir de ahi siguen faltando datos para seguir ayudandote. Miralo tu mismo en este ejemplo que he hecho con lo que nos has dado hasta ahora: jsfiddle.net/zkpm0auf
    – masterguru
    Commented el 27 dic. 2021 a las 11:21
  • Bueno, creo que ya lo voy entendiendo mejor. Te faltan basicamente dos cosas para empezar: 1) una función o un archivo en php que recoja el dato clave y lo consulte en la base de datos (de momento solo muestras toda la tabla, pero debes tener una función que solo devuelva uno basado en su clave). y 2) Dentro de modificar_seleccion debes realizar una llamada ajax a esa función o archivo PHP pasandole la clave y luego gestionar su retorno. Para ello mira esto a ver si te ayuda
    – masterguru
    Commented el 27 dic. 2021 a las 11:37

2 respuestas 2

0

De pronto te podria sugerir otra manera de hacerlo, yo tengo un codigo parecido de un proyecto en el que trabaje, podrias poner un boton de editar al lado de cada registro para que tome el id

Para el boton de editar puedes ponerlo asi

<a href="editar-registro.php?id=<?php echo $datos ["Cod_prov"]; ?>"><input type="button" value="Editar"></a>

    <?php 
        $id= $_GET ["id"];
        $consulta="SELECT * from prueba WHERE Cod_prov='$id'";
        $query=mysqli_query($conexion,$consulta);
        while($datos=mysqli_fetch_array($query)){   
                    
    ?>
    <div>
       <td><?php echo $datos['Cod_prov']?></td>
       <td><?php echo $datos['nombre']?></td>
       <td><?php echo $datos['edad']?></td>
       <td><?php echo $datos['ciudad']?></td>
       <td><?php echo $datos['estatus']?></td>
       
    </div>
    <?php } ?>
0

Ya lo tengo solucionado. Lo que hice fue pasar como value todos los valores del registro separados por espacios, en vez de enviar solo el Cod_prov: introducir la descripción de la imagen aquí

Y desde JS hice un split() formando un nuevo array con los datos, y los asignané a cada una de las celdas/inputs correspondiente: introducir la descripción de la imagen aquí

y se hizo la luz... introducir la descripción de la imagen aquí

HTML y PHP:

                <select name="selectModificar" id="selectorModificar" onclick="recogerValor()">
                    <option value="0" selected disabled>...</option>
                    <?php
                    $consulta = "Select * from prueba.S";
                    $query = mysqli_query($conexion, $consulta);
                    while ($datos = mysqli_fetch_array($query)) {
                    ?>
                        <option value="<?php echo $datos['Cod_prov'] . ',' . $datos['Nombre'] . ',' . $datos['edad'] . ',' . $datos['ciudad'] . ',' . $datos['status'] ?>">
                            <?php echo $datos['Cod_prov'] ?></option>
                    <?php
                    }
                    ?>
                </select>

JS

function modificar_seleccion(selectedOption) {
var array_selectedOption = selectedOption.value.split(',');
//console.log(array_selectedOption);
ocultarCampos();
var row = miTabla.insertRow(miTabla.rows.length);
var celda1 = row.insertCell(0);
var celda2 = row.insertCell(1);
var celda3 = row.insertCell(2);
var celda4 = row.insertCell(3);
var celda5 = row.insertCell(4);
var celda6 = row.insertCell(5);
celda1.innerHTML = '<input type="text" name="Cod_prov" value="' + array_selectedOption[0] + '"' + 'readonly style="background-color: grey; border: 1px solid blue;">';
celda2.innerHTML = '<input type="text" name="Nombre" pattern="[a-zA-Z ]{2,254}" value="' + array_selectedOption[1] + '"' + 'required>';
celda3.innerHTML = '<input type="number" name="edad" min="0" max="100" value="' + array_selectedOption[2] + '"' + 'required>';
celda4.innerHTML = '<input type="text" name="ciudad" pattern="[a-zA-Z ]{2,254}" value="' + array_selectedOption[3] + '"' + 'required>';
celda5.innerHTML = '<input type="number" name="status" value="' + array_selectedOption[4] + '"' + 'min="0" max="100" required>';
celda6.innerHTML = '<input type="submit" name="btn_submit" value="Modificar Registro" style="padding: 5px;"></input>';
}
3
  • Con esta solución no se si nadie que se llame "Juan Antonio" o viva en "A Coruña" saldrá correctamente en tu resultado
    – masterguru
    Commented el 2 ene. 2022 a las 10:16
  • En ese caso lo voy a separar por comas (,) así no habrá fallo en nombres o ciudades compuestas separadas por un espacio.
    – Peter
    Commented el 2 ene. 2022 a las 10:47
  • Saludos, Peter, sería bueno si podrías dejar la respuesta del código en texto en caso de que alguien más lo necesite.
    – israteneda
    Commented el 2 ene. 2022 a las 23:52

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.