1

Estoy realizando un ejercicio en el cual se debe seleccionar los meses que se desea pagar seleccionando el checkbox correspondiente. La tabla se genera a partir de una consulta a la base de datos. Por lo cual, esta puede tener uno o varios registros entonces no se como asignarle un identificador a la fila de la cual tomar la información. La intención de todo esto es que antes de realizar las operaciones en el lado del servidor el programa muestre en un modal el resumen de lo que se va a pagar.(img 1).

id  fecha   costo    seleccione
1   Enero   35.50 $     ☐
2   Febrero 50.00 $     ☐
3   Marzo   20.50 $     ☐
4   Abril   75.00 $     ☐
5   Mayo    10.00 $     ☐
6   Junio   15.00 $     ☐

img 1 introducir la descripción de la imagen aquí

Se me ocurre que podría hacer lo siguiente en el id del <td>:
<td id='fecha[]'><?echo $fila['fecha']?></td> con esto el id tuviera un identificador distinto a los demás, pero de ahí con javascript no se como recorrer ese array fecha[]para acceder a la información que tiene.

El código del programa es el siguiente.

  $datos = $con->query("SELECT * FROM pago");

  if(isset($_POST['btnEnviar'])){
    if(!empty($_POST['fecha'])){
      ?>
      <div class="alert alert-success">
        Se a realizado el pago de :
      <?

      foreach ($_POST['fecha'] as $key) {
        echo '<ul><li>'.$key . '</li></ul>';
      }
      ?>
      </div>
      <?

    }else{
      ?>
      <div class="alert alert-danger">
        No a seleccionado nada!
      </div>
      <?
    }
  }
  ?>

  <div class="container">
    <div class="col-lg-5">
      <form class="" action="<?echo $_SERVER['PHP_SELF']?>" method="post" id="formulario">
        <table class="table table-bordered table-hover" >
          <thead>
            <tr class="warning">
              <th>id</th>
              <th>fecha</th>
              <th>costo</th>
              <th>seleccione</th>
            </tr>
          </thead>
          <tbody>
            <?
            if(!empty($datos)){
              while($fila = mysqli_fetch_array($datos)){
                ?>
                <tr>
                  <td><?echo $fila['id']?></td>
                  <td><?echo $fila['fecha']?></td>
                  <td><?echo $fila['costo']?>&nbsp;<b>$</b></td>
                  <td>
                    <input type="checkbox" name="fecha[]" value="<?echo $fila['fecha']?>">
                  </td>
                </tr>
                <?
              }
            }
            ?>
          </tbody>
        </table>
        <div class="text-center">
          <span id="btn" class="btn btn-success" data-target="#modal-pagar" data-toggle="modal">Pagar</span>
        </div>
        <div class="modal fade modal-default" id="modal-pagar" tabindex="-1" role="dialog" aria-labelledby=""
             aria-hidden="true">
            <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" id="">Resumen de pago</h4>
                    </div>
                    <div class="modal-body">

                    </div>
                    <div class="modal-footer">
                        <span class="btn btn-default">Cancelar</span>
                        <button type="submit" name="btnEnviar" class="btn btn-success">Pagar</button>
                    </div>
                </div>
            </div>
        </div>

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

  <script type="text/javascript">
    $(document).ready(function(){
      btn = $('#btn');
      mes = "<input type='text' value='Abril' class=''>";
      costo = "<input type='text' value='75$' class=''>";
      total= "<h4>Total a pagar <span class='text-success'>75 $</span></h4>";

      btn.click(function(){
        $('.modal-body').append(mes,costo,total);
      });
    });

  </script>
</body>
</html>

Es posible que sea fácil pero no tengo ni idea de como capturar los valores de la fila y presentarlos en el modal.

6
  • Este código no esta completo.
    – GDP
    Commented el 7 sept. 2017 a las 8:40
  • Cuando hagas click captura los valores y guardalo en variables. Luego carga esas variables en los campos de los modales.
    – GDP
    Commented el 7 sept. 2017 a las 8:40
  • Es precisamente lo que quiero hacer, capturar los valores pero no se como acceder a la posición de la tabla. se me ocurre hacer esto $('#fecha[i]').val() creando un boocle for para ir recorriendo cada una de las posiciones y generando variables pero obviamente esto no funciona o no se como hacerlo 😣 Commented el 7 sept. 2017 a las 15:33
  • recoge los filas que esten checkeadas. Primero comprueba los check, luego sacas las casillas de esas filas ya seleccionadas y los guardas en un array en lugar de una variable.
    – GDP
    Commented el 7 sept. 2017 a las 15:37
  • ¿te ha valido la última edición?
    – GDP
    Commented el 8 sept. 2017 a las 6:34

1 respuesta 1

0
  1. Primero recojo los valores y los guardo en un array.
  2. Despues la imprimo en el campo de la modal.
  3. Finalmente llamo a la modal.

function guardar() {
  var txt=$("#texto1").val();
  var valores = new Array();
  var sList = "";
  $('input[type=checkbox]').each(function () {
    if(this.checked){
      valores.push(
          $(this).parent().parent().find(".costo").text()
      );
    }
  });

  $( "#texto2" ).text(valores);
  $( "#dialog" ).dialog();
};
table, td, tr{
  border: 1px solid black;
}
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Dialog - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>

<div>
  <input type="button" value="enviar" onclick="guardar()" />
  
  <table>
  <tr>
    <th>ID</th>
    <th>Mes</th>
    <th>Costo</th>
    <th>Seleccione</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Enero</td>
    <td class="costo">20</td>
    <td><input type="checkbox"></td>
  </tr>
  <tr>
    <td>2</td>
    <td>Febrero</td>
    <td class="costo">30</td>
    <td><input type="checkbox"></td>
  </tr>
  <tr>
    <td>3</td>
    <td>Marzo</td>
    <td class="costo">40</td>
    <td><input type="checkbox"></td>
  </tr>
  <tr>
    <td>4</td>
    <td>Abril</td>
    <td class="costo">50</td>
    <td><input type="checkbox"></td>
  </tr>
  <tr>
    <td>5</td>
    <td>Mayo</td>
    <td class="costo">60</td>
    <td><input type="checkbox"></td>
  </tr>
  <tr>
    <td>6</td>
    <td>Junio</td>
    <td class="costo">70</td>
    <td><input type="checkbox"></td>
  </tr>
</table>

</body>
</html>
</div>



<div id="dialog" title="Basic dialog">
  <p id="texto2"></p>
</div>

</body>
</html>

2
  • Estimado amigo gracias por su respuesta pero no es lo que necesito, eh modificado el post con algo de información adicional a fin de aclarar el problema. Commented el 7 sept. 2017 a las 15:30
  • 1
    te he modificado el ejemplo con array, luego tratalo como quieras en la modal
    – GDP
    Commented el 7 sept. 2017 a las 16:01

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.