2

tengo el siguiente problema:

Tengo un listado que hago por PHP de presuestos. Pues bien, en cada vuelta del bucle se muestran 2 botones: aceptar y rechazar. Al pulsar el botón de aceptar aparecen dos campos mas (Que tenía ocultos con display:none) y otro botón de aceptar con una función onclick para procesar las fechas introducidas.

¿Cual es el problema? Que si tengo un solo resultado funciona a la perfección, pero cuando tengo varios da igual en que parte hagas click, se abre el primer resultado (Entiendo el problema, que es que el ID es igual en todas las lineas).¿Como puedo solucionarlo? Entiendo que debería tener alguna forma de diferenciar cada linea pero no se cómo, gracias por adelantado:

Listado en PHP

$data = $Partes->listarPartes($query);
       if ($lisc = mysqli_fetch_array($data)) {
           echo '<div class="card"><div class="card-body"><table id="" class="table table-bordered table-hover table-sm  table-responsive datatable table-striped" role="grid">';
           echo '<thead class="thead-dark"><tr role="row">
             <th class="sorting" tabindex="0" aria-controls="Tablaresumenasc" rowspan="1" colspan="1"><h3>Instalacion</h3></th>
             <th class="sorting" tabindex="0" aria-controls="Tablaresumenasc" rowspan="1" colspan="1"><h3>Fecha de Petición</h3></th>
             <th class="sorting" tabindex="0" aria-controls="Tablaresumenasc" rowspan="1" colspan="1"><h3>Matrícula</h3></th>
             <th class="sorting" tabindex="0" aria-controls="Tablaresumenasc" rowspan="1" colspan="1"><h3>Vehículo</h3></th>
             <th class="sorting" tabindex="0" aria-controls="Tablaresumenasc" rowspan="1" colspan="1"><h3>Daños</h3></th>
             <th class="sorting" tabindex="0" aria-controls="Tablaresumenasc" rowspan="1" colspan="1"><h3>Compañía</h3></th>
             <th class="sorting" tabindex="0" aria-controls="Tablaresumenasc" rowspan="1" colspan="1"><h3>Importe Valoración</h3></th>
             <th></th>
             <th></th>
           </tr> </thead><tbody>';
           do {
               $id = $lisc['id'];
               $cia = new Clientes(intval($lisc['id_cia']));
               $dano = $Partes->sacarNombredano($lisc['tipo_dano']);
               $arraydano = mysqli_fetch_array($dano);
               $espacio = " ";
               //Comprobamos si marca / modelo es integro para mostrar el nombre o cargarlo de la BD
               $idmarca = $lisc['id_marca'];
               $idmodelo = $lisc['id_modelo'];
               if (is_numeric($idmodelo) && $idmodelo != 0) {
                   $datos_modelo = $Vehiculos->listarModelos('', $idmodelo);
                   $arraymd = mysqli_fetch_array($datos_modelo);
                   $modelo = $arraymd['nombre'];
                   $datos_marca = $Vehiculos->listarMarcas($idmarca);
                   $arrayma = mysqli_fetch_array($datos_marca);
                   $marca = $arrayma['nombre'];
               } else {
                   $marca = $lisc['marca'];
                   $modelo = $lisc['modelo'];
               }
               $tallerrep = $lisc['id_delegacion'];
               $datostaller = new Talleres($tallerrep);
               $datos_valoracion = $Partes->listarValoracion("WHERE id_empresa = '$id_empresa' AND id_parte = '$id'");
               $array_valoraciones = mysqli_fetch_array($datos_valoracion);
               echo '<tr role="row">
             <td >'.$datostaller->nombre.'</td>
             <td >'.cfecha($lisc['fecha_presupuesto']).'</td>
             <td >'.$lisc['matricula'].'</td>
             <td >'.$marca.$espacio.$modelo.'</td>
             <td >'.$arraydano['nombre'].'</td>
             <td >'.$cia->nombre_comercial.'</td>
             <td >'.$array_valoraciones['base_total'].' + IVA = '.$array_valoraciones['importe_total']. ' €</td>
         ';
          ?>
         <td>
            <button type="button" class="btn btn-success" id="botonAceptar" onclick="mostrarInputval()">Aceptar</button>
            <br>
            <label id="Fecha_recogidalabel" style="display:none">Fecha de recogida del material: </label>
            <input type="date" name="Fecha_recogida" id="Fecha_recogida" style="display:none">
            <br>
            <label id="Fecha_propuestalabel" style="display:none">Fecha propuesta de devolución del material: </label>
            <input type="date" name="Fecha_propuesta" id="Fecha_propuesta" style="display:none">
            <br>
            <button type="button" class="btn btn-success" id="botonAceptacion" onclick="guardarAceptacion(<?=$lisc['id']?>)" style="display:none">Aceptar</button>
          </td>
          <td><button type="button" class="btn btn-danger" id="botonRechazar">Rechazar y Cancelar</button></td>
         </tr>
         <?php
           } while ($lisc = mysqli_fetch_array($data));
           echo '</tbody></table></div></div></a>';
       } else {
           echo "No hay Presupuestos Valorados :(";
       }

Función JS que hace que se muestren y desabiliten botones y campos:

 function mostrarInputval() {
         var fechaReecogida = document.getElementById("Fecha_recogida");
         var labelfecharecogida = document.getElementById("Fecha_recogidalabel");
         var element = document.getElementById("Fecha_propuesta");
         var labelfechapropuesta = document.getElementById("Fecha_propuestalabel");
         var botonAceptacion = document.getElementById("botonAceptacion");
         var botonAceptar = document.getElementById("botonAceptar");
         var botonRechazar = document.getElementById("botonRechazar");
         fechaReecogida.style.display = "block";
         labelfecharecogida.style.display = "block";
         element.style.display = "block";
         labelfechapropuesta.style.display = "block";
         botonAceptacion.style.display = "block";
         botonAceptar.disabled = true;
         botonRechazar.disabled = true;

 }

Por si hace falta, función que procesa los campos una vez introducidos:

 function guardarAceptacion(idTrab)
       {
       fecha_recog = document.getElementById['Fecha_recogida'];
       fecha_entreg = document.getElementById['Fecha_propuesta'];
       var ventana = confirm("¿Aceptar Presupuesto y fechas de entrega?");
       if (ventana === true) {
         $.post("procesarAceptado.php", {
             fecha_recogida: fecha_recog,
             fecha_devolucion: fecha_entreg,
             id_parte: idTrab,
           },
           function(mostrar) {
             alert("Guardado correctamente!");
             location.reload(true);
           });
       }

       }

1 respuesta 1

2

A ver, son varios cambios lo que deberias hacer para basar tus acciones de los botones en los id.

Donde pone esto:

<button type="button" class="btn btn-success" id="botonAceptar" onclick="mostrarInputval()">Aceptar</button>
<br>
<label id="Fecha_recogidalabel" style="display:none">Fecha de recogida del material: </label>
<input type="date" name="Fecha_recogida" id="Fecha_recogida" style="display:none">
<br>
<label id="Fecha_propuestalabel" style="display:none">Fecha propuesta de devolución del material: </label>
<input type="date" name="Fecha_propuesta" id="Fecha_propuesta" style="display:none">
<br>
<button type="button" class="btn btn-success" id="botonAceptacion" onclick="guardarAceptacion(<?=$lisc['id']?>)" style="display:none">Aceptar</button>
</td>
<td><button type="button" class="btn btn-danger" id="botonRechazar">Rechazar y Cancelar</button></td>

pones esto:

<button type="button" class="btn btn-success" id="botonAceptar_<?=$id?>" onclick="mostrarInputval(<?=$id?>)">Aceptar</button>
<br>
<label id="Fecha_recogidalabel_<?=$id?>" style="display:none">Fecha de recogida del material: </label>
<input type="date" name="Fecha_recogida_<?=$id?>" id="Fecha_recogida_<?=$id?>" style="display:none">
<br>
<label id="Fecha_propuestalabel_<?=$id?>" style="display:none">Fecha propuesta de devolución del material: </label>
<input type="date" name="Fecha_propuesta_<?=$id?>" id="Fecha_propuesta_<?=$id?>" style="display:none">
<br>
<button type="button" class="btn btn-success" id="botonAceptacion_<?=$id?>" onclick="guardarAceptacion(<?=$id?>)" style="display:none">Aceptar</button>
</td>
<td><button type="button" class="btn btn-danger" id="botonRechazar_<?=$id?>">Rechazar y Cancelar</button></td>

Es decir, hemos cambiado todos los name= e id= en función del $id pasado (que se corresponde con $lisc['id'] en la primera asignación que haces en el do).

Ahora toca cambiar la función para que lo coja bien.

Cambia esto:

function mostrarInputval() {
         var fechaReecogida = document.getElementById("Fecha_recogida");
         var labelfecharecogida = document.getElementById("Fecha_recogidalabel");
         var element = document.getElementById("Fecha_propuesta");
         var labelfechapropuesta = document.getElementById("Fecha_propuestalabel");
         var botonAceptacion = document.getElementById("botonAceptacion");
         var botonAceptar = document.getElementById("botonAceptar");
         var botonRechazar = document.getElementById("botonRechazar");

por esto:

function mostrarInputval(idTrab) {
         var fechaReecogida = document.getElementById("Fecha_recogida_" + idTrab);
         var labelfecharecogida = document.getElementById("Fecha_recogidalabel_" + idTrab);
         var element = document.getElementById("Fecha_propuesta_" + idTrab);
         var labelfechapropuesta = document.getElementById("Fecha_propuestalabel_" + idTrab);
         var botonAceptacion = document.getElementById("botonAceptacion_" + idTrab);
         var botonAceptar = document.getElementById("botonAceptar_" + idTrab);
         var botonRechazar = document.getElementById("botonRechazar_" + idTrab);

Y por último, en la función guardarAceptacion(idTrab) cambia esto:

fecha_recog = document.getElementById['Fecha_recogida'];
fecha_entreg = document.getElementById['Fecha_propuesta'];

por esto:

fecha_recog = document.getElementById('Fecha_recogida_' + idTrab);
fecha_entreg = document.getElementById('Fecha_propuesta_' + idTrab);

Y diria que ya lo tienes.

Explicación:

Repetías los name e id del html en cada ciclo de tu bucle y en las funciones de javascript solo te cogian el primero que encontraban.

Agregando la coletilla del _id en cada uno de ellos los estamos diferenciando, y al modificar las funciones javascript tal como lo hemos hecho los estamos llamando de forma única.

Ojo con mi última edición. He visto que preguntabas por un error y era porque de inicio que tenias [] en ['Fecha_recogida'] y en ['Fecha_propuesta'], y ahora los acabo de cambiar en mi respuesta por ('Fecha_recogida_' + idTrab) y ('Fecha_propuesta_' + idTrab) (con paréntesis, no corchetes, tal como te han dicho en los comentarios de la otra pregunta).

1
  • //Me edito, faltaba un + en una var de la función, lo he añadido y funciona perfectamente. ¡Gracias! Commented el 24 ene. 2022 a las 10:31

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.