0

necesito al hacer click en un boton que me recorra los registros de la tabla html y me los guarde en la base de datos. La funcion "guardar" me carga en la tabla html registros mediante el boton "añadir". Lo que necesito es que con el boton "Guardar Todo" se me inserten todos los registros que ya añadí a la tabla html y se guarden en la base de datos. Este ejemplo lo saque de unas de las preguntas de este gforo pero no me ha funcionado y no entiendo como funciona. Al hacer click en el boton "guardar todo" deberia ejecutarme la funcion "table-2" Este es el codigo que tengo:

function guardar() {

                var producto = $('select[name="producto"] option:selected').text();
                var cantidad = document.getElementById("cantidad").value;
                var medida = $('select[name="medida"] option:selected').text();
                var fecha = document.getElementById("fecha").value;
                var turno = document.getElementById("turno").value;

                var fila = "<tr><td>" + producto + "</td><td>" + cantidad + "</td><td>" + medida + "</td><td>" + fecha + "</td><td>" + turno + "</td></tr>";

                var btn = document.createElement("TR");
                btn.innerHTML = fila;
                document.getElementById("tablita").appendChild(btn);
            }



            $('#table-2 tr').each(function () {
                var producto = $(this).find('td').eq(0).html();
                var cantidad = $(this).find('td').eq(1).html();
                var medida = $(this).find('td').eq(2).html();
                var fecha = $(this).find('td').eq(3).html();
                var turno = $(this).find('td').eq(4).html();

                $.ajax({
                    async: false,
                    type: "POST",
                    url: "sql_add_turno_manana.php",
                    data: "producto=" + producto + "&cantidad=" + cantidad + "&medida=" + medida + "&fecha=" + fecha + "&turno=" + turno,
                    data: {valores: valores},
                    success: function (data) {
                        if (data !== "")
                            ;
                    }
                });
            });
<div class="row">
            <div class="col-md-4 col-md-offset-4" id="register_form">
                <!-- Form Name -->
                <legend>Vender Producto</legend>
                <!-- Text input-->
                <div class="form-group">
                    <label class="col-sm-2 control-label" for="textinput">Producto</label>
                    <div class="col-sm-10">
                        <select class="form-control" name="producto" id="producto" required>
                            <option disabled selected value ></option>
                            <?php
                            $clavebuscadah = mysql_query("select productos.id_prod, productos.prod_nomb, unidad_medida.unme_nomb FROM productos INNER JOIN unidad_medida ON productos.id_unid_medi=unidad_medida.id_unid_medi ORDER BY prod_nomb ASC", $link) or
                                    die("Problemas en el select:" . mysql_error());
                            while ($row = mysql_fetch_array($clavebuscadah)) {
                                echo'<OPTION VALUE="' . $row['id_prod'] . '">' . $row['prod_nomb'] . ' {' . $row['unme_nomb'] . '} </OPTION>';
                                //$categoria = $row['cate_nomb'];
                            }
                            ?>
                        </select>
                    </div>
                </div><br>

                <!-- Text input-->
                <div class="form-group">
                    <label class="col-sm-2 control-label" for="textinput">Cantidad</label>
                    <div class="col-sm-4">
                        <input type="text"  name="cantidad" id="cantidad" class="form-control">
                    </div>

                    <label class="col-sm-2 control-label" for="textinput">Un.Medida</label>
                    <div class="col-sm-4">

                        <select class="form-control" name="medida" id="medida" required>
                            <option disabled selected value ></option>
                            <?php
                            $clavebuscadah = mysql_query("select * from unidad_medida", $link) or
                                    die("Problemas en el select:" . mysql_error());
                            while ($row = mysql_fetch_array($clavebuscadah)) {
                                echo'<OPTION VALUE="' . $row['id_unid_medi'] . '">' . $row['unme_nomb'] . ' </OPTION>';
                                //$categoria = $row['cate_nomb'];
                            }
                            ?>
                        </select>

                    </div>
                </div><br>

                <!-- Text input-->
                <div class="form-group">
                    <label class="col-sm-2 control-label" for="textinput">Fecha</label>
                    <div class="col-sm-4">
                        <input class="form-control" id="fecha" type="date" value="<?php echo date('Y-m-d') ?>" disabled>
                    </div>
                    <label class="col-sm-2 control-label" for="textinput">Turno</label>
                    <div class="col-sm-4">
                        <input class="form-control" id="turno" value="MAÑANA" type="text" disabled>

                    </div>
                </div><br>

                <button id="btn_guardar" onclick="guardar()">Añadir</button><br><br>
                <button id="table-2">Guardar todo</button><br><br>
            </div>
        </div>

        <div class="container">
            <div class="row">
                <div class="panel panel-primary filterable">
                    <div class="panel-heading">
                        <h3 class="panel-title">Listado de Productos Vendidos</h3>
                        <div class="pull-right">
                            <button class="btn btn-default btn-xs btn-filter"><span class="glyphicon glyphicon-filter"></span> Filtro</button>
                        </div>
                    </div>
                    <div class="table-wrapper-scroll-y">
                        <table id="table-2" class="table table-hover ">
                            <style>
                                .table-wrapper-scroll-y {
                                    display: block;
                                    max-height: 250px;
                                    overflow-y: auto;
                                    -ms-overflow-style: -ms-autohiding-scrollbar;
                                }
                            </style>
                            <thead>
                                <tr class="filters">
                                    <th><input type="text" class="form-control" placeholder="Nombre" disabled></th>
                                    <th><input type="text" class="form-control" placeholder="Cantidad" disabled></th>
                                    <th><input type="text" class="form-control" placeholder="Unidad de medida" disabled></th>
                                    <th><input type="text" class="form-control" placeholder="Fecha" disabled></th>
                                    <th><input type="text" class="form-control" placeholder="Turno" disabled></th>

                                    <th><input type="text" class="form-control" placeholder="Acciones" disabled></th>
                                </tr>
                            </thead>
                            <tbody id="tablita">

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

1 respuesta 1

1

La función $('#table-2 tr').each( es para recorrer los tr de tu tabla con id="table-2" lo que deberías hacer es agregar un evento de onclic

ejemplo:

$(document).on("click", "button #table-2", function() { 

     $('table #table-2 tr').each(function () {
                var producto = $(this).find('td').eq(0).html();
                var cantidad = $(this).find('td').eq(1).html();
                var medida = $(this).find('td').eq(2).html();
                var fecha = $(this).find('td').eq(3).html();
                var turno = $(this).find('td').eq(4).html();

                $.ajax({
                    async: false,
                    type: "POST",
                    url: "sql_add_turno_manana.php",
                    data: "producto=" + producto + "&cantidad=" + cantidad + "&medida=" + medida + "&fecha=" + fecha + "&turno=" + turno,
                    data: {valores: valores},
                    success: function (data) {
                        if (data !== "")
                            ;
                    }
                });
            });

 });
8
  • Ahh bien.. y el boton "guardar todo" me qeudaria asi? el 26 ago. 2019 a las 22:07
  • <button id="table-2">Guardar todo</button> el 26 ago. 2019 a las 22:07
  • puedes cambiarle el id con otro nombre como id="guardar-table-2" para que no te confundas y cambiar tu evento $(document).on("click", "#guardar-table-2", function() { el 26 ago. 2019 a las 22:12
  • Sigo sin poder accionar el evento desde el boton, probe usando el codigo que me pasaste y tampoco.. Le hago click al boton y no me hace nada. Lo tengo asi al codigo ahora: <button id="guardar-table-2">Guardar todo</button> Codigo del script: $("#guardar-table-2").click(function () { $('#table-2 tr').each(function () { }); }); el 27 ago. 2019 a las 11:53
  • Agradezco mucho si puedes ayudarme.. el 27 ago. 2019 a las 11:57

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.