0

Tengo problemas con un formulario que se encuentra dentro de una tabla bootstrap. El formulario fuera de la tabla se me muestra así:

introducir la descripción de la imagen aquí

Mientras que si genero los formularios dinámicamente dentro de una tabla, estos se me desordenan:

introducir la descripción de la imagen aquí

Este es el código:

<button type="button" class="btn btn-warning btn-sm" data-toggle="modal" data-target="#myModal<?php echo $resultado['ID'];?>"><span class="glyphicon glyphicon-pencil" aria-hidden="true" ></span></button>

<!-- Modal -->
<div id="myModal<?php echo $resultado['ID'];?>" class="modal fade" role="dialog">
  <div class="modal-dialog modal-lg" >

    <!-- Modal content-->
    <div class="modal-content" >
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modificación de registro</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-lg-12">
            <div id="info"></div>
          </div>
          <div class="col-lg-12">
            <div class="panel panel-default">
              <div class="panel-heading">
                Datos de Instructor
              </div>
              <div class="panel-body">
                <form class="form-horizontal"> 

                  <div class="form-group">
                    <label for="rut" class="col-sm-2 control-label">RUN</label>
                    <div class="col-sm-4"><input type="text" class="form-control" id="rut<?php echo $resultado['ID']; ?>" value="<?php echo $resultado['RUT']; ?>" readonly=""></div>

                    <label for="nombreCompleto" class="col-sm-2 control-label">Nombre Completo</label>
                    <div class="col-sm-4"><input type="text" class="form-control" id="nombreCompleto<?php echo $resultado['ID']; ?>" value="<?php echo $resultado['NOMBRECOMPLETO']; ?>"></div>
                  </div> 

                  <div class="form-group">
                    <label for="fechaNacimiento" class="col-sm-2 control-label">Fecha Nacimiento</label>
                    <div class="col-sm-4">
                      <div class="input-group">
                        <div class="input-group-addon"><i class="fa fa-calendar" aria-hidden="true"></i></div>
                        <input type="date" class="form-control" id="fechaNacimiento<?php echo $resultado['ID']; ?>" value="<?php echo $resultado['FECHA']; ?>">
                      </div>
                    </div>

                    <label for="email" class="col-sm-2 control-label">Email</label>
                    <div class="col-sm-4">
                      <div class="input-group">
                        <div class="input-group-addon">@</div>
                        <input type="email" class="form-control" id="email<?php echo $resultado['ID']; ?>" value="<?php echo $resultado['EMAIL']; ?>">
                      </div>
                    </div>
                  </div>

                  <div class="form-group">
                    <label for="telefono" class="col-sm-2 control-label">Teléfono</label>
                    <div class="col-sm-4">
                      <div class="input-group">
                        <div class="input-group-addon">12</div>
                        <input type="number" class="form-control" id="telefono<?php echo $resultado['ID']; ?>" value="<?php echo $resultado['TELEFONO']; ?>">
                      </div>
                    </div>

                    <label for="direccionA" class="col-sm-2 control-label">Dirección</label>
                    <div class="col-sm-4"><input type="text" class="form-control" id="direccion<?php echo $resultado['ID']; ?>" value="<?php echo $resultado['DIRECCION']; ?>"></div>
                  </div>


                  <div class="form-group">
                    <label for="ciudad" class="col-sm-2 control-label">Ciudad</label>
                    <div class="col-sm-4">
                      <div class="input-group">
                        <select class="form-control" id="ciudad<?php echo $resultado['ID']; ?>" name="ciudad">
                          <?php 

                            $ciudadC = $resultado['IDCIUDAD'];
                            $sqlll = "SELECT id_ciudad AS CIUDAD, nombre AS NOMBRE FROM ciudad WHERE id_ciudad = '$ciudadC' ";
                            $consultaaa = mysqli_query($conexion,$sqlll);
                            while ($resultadooo = $consultaaa->fetch_array()) { 
                              echo '<option value="'. $resultadooo['CIUDAD'] .'">'. $resultadooo['NOMBRE'] .'</option>';
                            }

                            $sqlll = "SELECT id_ciudad AS CIUDAD, nombre AS NOMBRE FROM ciudad WHERE id_ciudad <> '$ciudadC' ORDER BY NOMBRE";
                            $consultaaa = mysqli_query($conexion,$sqlll);
                            while ($resultadooo = $consultaaa->fetch_array()) { 
                              echo '<option value="'. $resultadooo['CIUDAD'] .'">'. $resultadooo['NOMBRE'] .'</option>';
                            }

                          ?>
                        </select>                        
                      </div>
                    </div>

                    <label for="comunaa" class="col-sm-2 control-label">Comuna</label>
                    <div class="col-sm-4">
                      <div class="input-group">
                        <select class="form-control" id="comuna<?php echo $resultado['ID']; ?>" name="comuna">
                          <?php 

                            $comunaC = $resultado['IDCOMUNA'];
                            $sqlll = "SELECT id_comuna AS COMUNA, nombre AS NOMBRE FROM comuna WHERE id_comuna = '$comunaC' ";
                            $consultaaa = mysqli_query($conexion,$sqlll);
                            while ($resultadooo = $consultaaa->fetch_array()) { 
                              echo '<option value="'. $resultadooo['COMUNA'] .'">'. $resultadooo['NOMBRE'] .'</option>';
                            }

                            $sqlll = "SELECT id_comuna AS COMUNA, nombre AS NOMBRE FROM comuna WHERE id_comuna <> '$comunaC' ORDER BY NOMBRE";
                            $consultaaa = mysqli_query($conexion,$sqlll);
                            while ($resultadooo = $consultaaa->fetch_array()) { 
                              echo '<option value="'. $resultadooo['COMUNA'] .'">'. $resultadooo['NOMBRE'] .'</option>';
                            }

                          ?>
                        </select>
                      </div>
                    </div>
                  </div>


                  <div class="form-group">
                    <label for="auto" class="col-sm-2 control-label">Auto</label>
                    <div class="col-sm-10">
                        <select class="form-control" id="auto<?php echo $resultado['ID']; ?>" name="auto">
                          <?php 

                            $sqlAutos = "SELECT id_auto AS ID, patente AS PATENTE FROM auto WHERE estado = 1 ORDER BY PATENTE";
                            $consultaAutos = mysqli_query($conexion,$sqlAutos);
                            while ($resultadoAutos = $consultaAutos->fetch_array()) { 
                              echo '<option value="'. $resultadoAutos['ID'] .'">'. $resultadoAutos['PATENTE'] .'</option>';
                            }

                          ?>
                        </select>
                    </div>
                  </div>

                </form> 
              </div>
            </div>

          </div>

        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
        <button type="button" onclick="updatedata('<?php echo $resultado['ID']; ?>')" class="btn btn-primary" data-backdrop="false">Guardar</button>
      </div>
    </div>

  </div>
</div>
1
  • ¿Es realmente necesario que el formulario esté dentro de una tabla? No le veo un efecto práctico, de hecho tampoco los de bootstrap porque precisamente sus estilos no funcionan bien cuando no maquetas el html como ellos aconsejan y recomiendan. Te sugiero mejor trabajarlos fuera de la tabla en un modal como te aconsejan abajo, pero si realmente quieres que se vea como en la foto debes sacrificar un poco bootstrap por una solución CSS only. Commented el 27 ene. 2018 a las 15:34

1 respuesta 1

0

Yo jugaría con los elementos y trabajaría con un solo modal de edición fuera del bucle, te dejo un ejemplo que puede adaptar:

<div class="table-responsive">
    <table class="table table-hover">
        <thead>
            <tr>
                <th>Nombre</th>
        <th>Cedula</th>
        <th>Editar</th>
            </tr>
        </thead>
        <tbody id="lista">
        </tbody>
    </table>
</div>
<div class="modal fade" id="modal-id">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body">

                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">

                    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                        <div class="form-group">
                            <label>Nombre</label>
                            <input type="text" name="nombre" class="form-control" id="nombre"/>
                        </div>
                    </div>
                    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                        <div class="form-group">
                            <label>Cédula</label>
                            <input type="text" name="cedula" class="form-control" id="cedula"/>
                        </div>
                    </div>

                </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

<script>
    var data = [
        {
            nombre:"Carlos",
        cedula:"123456"
        },
      {
            nombre:"Saul",
        cedula:"659874"
        },{
            nombre:"Manuel",
        cedula:"8754874"
        }
    ];
    $(function(){
        for(var i=0; i<data.length; i++){
        var nombre = data[i].nombre;
        var cedula = data[i].cedula;
        $("#lista").append(`
            <tr id="`+cedula+`">
            <td>`+nombre+`</td>
            <td>`+cedula+`</td>
            <td><button type="button" data-cedula="`+cedula+`" data-nombre="`+nombre+`" class="btn btn-primary edita" id="`+cedula+`">Editar</button></td>
          </tr>
        `);
      };

      $(".edita").click(function(){
        $("#nombre").val($(this).attr('data-nombre'));
        $("#cedula").val($(this).attr('data-cedula'));
        $("#modal-id").modal('show');
      })
    })
</script>

MUESTRA

El ejemplo que te he dejado, lo utilizo en mis sistemas de muchas maneras, por ejemplo invocando ajax, trabajando con un json previamente preparado con php en la misma consulta, en fin, puedes hacer adaptaciones de tu código que te faciliten la manera en que interactuan los elementos.

Por cierto, tienes muchas consultas dentro del modal, imagina si tienes 10mil registros o más como sufriría tu base de datos, hay maneras más simples de organizar dicho meollo.

Espero ayudarte con la respuesta. Saludos

1
  • He probado tu método y me ha dado resultado. Muchas gracias. Commented el 4 feb. 2018 a las 5:56

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.