Show selected objects in a modal with jQuery

Question

Show selected objects in a modal with jQuery

Navigation

#1 by (0 votes)

1

I am doing an exercise in which you must select the months you want to pay by selecting the corresponding checkbox. The table is generated from a query to the database. Therefore, this can have one or several records so I do not know how to assign a identificador to the row from which to take the information. The intention of all this is that before performing operations on the server side the program shows in a modal the summary of what is going to be paid. (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

It occurs to me that I could do the following in id of <td> :% <td id='fecha[]'><?echo $fila['fecha']?></td> with this the id had an identifier different from the others, but from there with javascript I do not know how to go through that% fecha[] to access the information it has.

The program code is as follows.

  $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>

It may be easy but I have no idea how to capture the values of the row and present them in the modal.

javascript jquery bootstrap

asked by jeancarlos733 07.09.2017 в 07:00

source

1 answer

Modal of bootstrap does not open Python / MongoDB - Problem with query including "OR" & "LIKE"

score 0 · Accepted Answer

First I collect the values and store them in an array.

Then I print it in the modal field.

Finally I call the 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>