Guardar datos de un formulario con un botón javascript

publicado por: Anonymous

Buen día, sucede que estoy aprendiendo y no sé como resolver esto, tengo un formulario para solicitudes de producto que llena una tabla de manera dinámica, funciona, el usuario llena el formulario y al clickear el botón guardar la tabla se va llenando.

Resulta que necesito que al mismo tiempo se vaya llenando la tabla de la base de datos por medio de php, he ensayado y guarda los datos siempre y cuando le quito el evento onclick al botón, es decir el botón sirve, o bien para llamar la función de javaScript que me pinta la tabla, o bien, para guardar en la base de datos, pero no para las dos cosas.

He pensado que se podría crear un arreglo con la tabla pintada pero no se como hacerlo 🙁 ,
agradezco de antemano cualquier colaboración.
dejo mi código:

<?php 

include "config.php"; 

if(isset($_POST['btn_guardar'])){

  $planta = $_POST['planta'];
  $solicitante = $_POST['codigoUsu'];

  $cod_PT = $_POST['cod_PT'];
  $descripcion_PT = $_POST['desc_PT'];    
  $lote = $_POST['lote'];

  $ff = $_POST['ffab'];
  $fv = $_POST['fven'];
  $Vu = $_POST['vida_util'];

  $cod_etq = $_POST['cod_etq'];
  $desc_etq = $_POST['desc_etq'];
  $cant = $_POST['cantidad'];


  $validarUsuario = mysqli_query($con,"select codigo from usuarios where codigo='$solicitante'");

  if(mysqli_num_rows($validarUsuario)==0 ) {
    echo "<script>alert(' Este usuario no existe.')</script>";
  }else{


    $insertSQL = "INSERT INTO solicitudes (id_solicitud, planta, solicitante, codigo_PT, descripcion_PT,lote, ffab_prod, fven_prod, vida_util, cod_etq, descripcion_etq, cantidad) VALUES (null,
    '$planta',
    '$solicitante',

    '$cod_PT',
    '$descripcion_PT',
    '$lote',

    '$ff',                    
    '$fv',
    '$Vu',                  

    '$cod_etq', 
    '$desc_etq',
    '$cant')";

    $ejecutarSQL = mysqli_query($con, $insertSQL);
  }

  if ($ejecutarSQL) {
    echo "<script>alert('Solicitud exitosa.')</script>";

  }else {
    echo "<script>alert('Por favor intente de nuevo.')</script>";
  }
}

?>

<!doctype html>
<html>
<head>

  <title>Ens Mod Etq</title>
  <link href="style.css" rel="stylesheet" type="text/css">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!--script src="jquery-1.12.0.min.js" type="text/javascript"></script-->

  <link href='jquery-ui.min.css' type='text/css' rel='stylesheet' >
  <script src="jquery-3.2.1.min.js" type="text/javascript"></script>
  <script src="jquery-ui.min.js" type="text/javascript"></script>
  <!--script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script-->

  <script type="text/javascript">
    //Inicialice autocompletar en el cuadro de texto del nombre de usuario cuando se active el keydownevento.
     //Definir source y select opciones en el autocomplete()método.

     $(document).ready(function(){


      $(document).on('keydown', '.codigoP', function producto() {//el evento keydown se aplica sobre el elemento con la calse "sites"

        var id = this.id;
        var splitid = id.split('_');
        var index = splitid[1];

      // Inicializar jQuery UI autocompletar
      $( '#'+id ).autocomplete({
        source: function( request, response ) {
          $.ajax({
            url: "getProducts.php",
            type: 'post',
            dataType: "json",
            data: {
              search: request.term,request:1
            },
            success: function( data ) {
              response( data );

            }
          });
        },

        //seleccione: función (evento, interfaz de usuario)
        select: function (event, ui) {
          $(this).val(ui.item.label); //  muestra el texto seleccionado
          var regid = ui.item.value; // valor seleccionado

          // AJAX
          $.ajax({
            url: 'getProducts.php',
            type: 'post',
            data: {regid:regid,request:2},
            dataType: 'json',
            success:function(response){

              var len = response.length;

              if(len > 0){
                var id = response[0]['idProd'];
                var descripcion = response[0]['descripcionProd'];
                var vida = response[0]['vidaUtil'];


                // Establecer valor en cuadros de texto
                document.getElementById('descripcion_'+index).value = descripcion;
                document.getElementById('vidaUtil_'+index).value = vida;

              }

            }
          });

          return false;
        }
      });
    });

      function guardar() {

        var _planta = document.getElementById("pl_1").value;
        var _solicitante = document.getElementById("solicitante_1").value;
        var _codPT = document.getElementById("codigoP_1").value;
        var _descPT = document.getElementById("descripcion_1").value;
        var _lote = document.getElementById("lote_1").value;

        var _ff = document.getElementById("ffab_1").value;
        var _fv = document.getElementById("fv_1").value;
        var _vida = document.getElementById("vidaUtil_1").value;

        var _codE = document.getElementById("codigoE_1").value;
        var _descE = document.getElementById("descripcionE_1").value;
        var _cant = document.getElementById("cant_1").value;

        var i = 1; 
          //contador para asignar id al boton que borrara la fila

          var fila = '<tr id="row' + i + '"><td>' + _planta + '</td><td>' + _solicitante + '</td><td>' + _codPT + '</td><td>' + _descPT + '</td><td>' + _lote + '</td><td>' + _ff + '</td><td>' + _fv + '</td><td>' + _vida + '</td><td>' + _codE + '</td><td>' + _descE + '</td><td>' + _cant + '</td><td><button type="button" name="remove" id="' + i + '" class="btn btn-danger btn_remove">Borrar</button></td></tr>'; 

          i++;

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

          document.getElementById("pl_1").value ="";
          document.getElementById("solicitante_1").value = "";

          document.getElementById("codigoP_1").value ="";
          document.getElementById("descripcion_1").value = "";
          document.getElementById("lote_1").value = "";

          document.getElementById("ffab_1").value ="";
          document.getElementById("fv_1").value = "";
          document.getElementById("vidaUtil_1").value = "";

          document.getElementById("codigoE_1").value = "";
          document.getElementById("descripcionE_1").value ="";
          document.getElementById("cant_1").value = "";

          document.getElementById("codigoP_1").focus();

        };        

        $(document).on('click', '.btn_remove', function (event) {
          event.preventDefault();
          $(this).closest('tr').remove();
        });

      </script>
    </head>
    <body>

      <!----------------------------------FORMULARIO-------------------------------------------->

      <div class="container">
        <form id="form" method="post"  >

          <div class=" col-xs12 col-sm-12 col-md-12 col-lg-12 offset-md-12">
            <label>Planta:</label>
            <select id="pl_1" class='planta' required name="planta">
              <option value="0">- Select -</option>                       
              <?php
              $sql_plantas = "SELECT * FROM plantas";
              $pl_data = mysqli_query($con,$sql_plantas);
              while($row = mysqli_fetch_assoc($pl_data) ){
                $id_pl = $row['id_pl'];
                $nombre_pl = $row['nombre_pl'];
                echo "<option value='".$id_pl."' >".$nombre_pl."</option>";
              }
              ?>
            </select>
          </div>

          <div class=" col-xs12 col-sm-12 col-md-12 col-lg-12 offset-md-12">
            <label>Solicitante:</label>
            <input type='text' class="solicitante" id='solicitante_1' name="codigoUsu"> 
          </div>

          <div class=" col-xs12 col-sm-12 col-md-12 col-lg-12 offset-md-12">
            <label>Codigo PT:</label>
            <input type='text' class='codigoP' id='codigoP_1' placeholder='Enter código' name="cod_PT"> 
          </div>
          <div class=" col-xs12 col-sm-12 col-md-12 col-lg-12 offset-md-12">
            <label>Descripción PT:</label>
            <input type='text' class="descripcion" id='descripcion_1' name="desc_PT" > 
          </div>
          <div class=" col-xs12 col-sm-12 col-md-12 col-lg-12 offset-md-12">
            <label>Lote:</label>
            <input type='text' class="lote" id='lote_1' name="lote"> 
          </div>

          <div class=" col-xs12 col-sm-12 col-md-12 col-lg-12 offset-md-12">
            <label>Fecha de fabricación:</label>
            <input type='date' class='ffab' id='ffab_1' onchange="calcularFV()" name="ffab"> 
          </div>
          <div class=" col-xs12 col-sm-12 col-md-12 col-lg-12 offset-md-12">
            <label>Fecha de vencimiento:</label>
            <input type='text' class="fv" id='fv_1' name="fven" > 
          </div>
          <div class=" col-xs12 col-sm-12 col-md-12 col-lg-12 offset-md-12">
            <label>Vida Util:</label>
            <input type='number' class="vidaUtil" id='vidaUtil_1' onchange="calcularFV()" name="vida_util">
          </div>

          <div class=" col-xs12 col-sm-12 col-md-12 col-lg-12 offset-md-12">
            <label>Código de etiqueta:</label>
            <input type='text' class='codigoE' id='codigoE_1' placeholder='Enter código' name="cod_etq">
          </div>
          <div class=" col-xs12 col-sm-12 col-md-12 col-lg-12 offset-md-12">
            <label>Descripción de etiqueta:</label>
            <input type='text' class="descripcionE" id='descripcionE_1' name="desc_etq"> 
          </div>
          <div class=" col-xs12 col-sm-12 col-md-12 col-lg-12 offset-md-12">
            <label>Cantidad:</label>
            <input type='text' class="cant" id='cant_1' name="cantidad"> 
          </div>

          <button type="submit" id="btn_guardar" name="btn_guardar" onclick="guardar()">Guardar</button><br><br>  

        </form>

        <div id="adicionados">
          <table  id="mytable"  border="1">
            <tr>
              <th>Planta</th>
              <th>Solicitante</th>
              <th>Codigo PT</th>
              <th>Descripción PT</th>
              <th>Lote</th>
              <th>Fecha de fabricación</th>
              <th>Fecha de vencimiento</th>
              <th>Vida Util</th>
              <th>Código de etiqueta</th>
              <th>Descripción de etiqueta</th>
              <th>Cantidad</th>
              <th>Cancelar</th>
            </tr>
          </table>
        </div>

      </div>

    </body>
  </html>

solución

Lo que puedes hacer es poner el código php del principio en otro archivo, por ejemplo guardarDatos.php:

<?php 

include "config.php"; 

if(isset($_POST['btn_guardar'])){

  $planta = $_POST['planta'];
  $solicitante = $_POST['codigoUsu'];

  $cod_PT = $_POST['cod_PT'];
  $descripcion_PT = $_POST['desc_PT'];    
  $lote = $_POST['lote'];

  $ff = $_POST['ffab'];
  $fv = $_POST['fven'];
  $Vu = $_POST['vida_util'];

  $cod_etq = $_POST['cod_etq'];
  $desc_etq = $_POST['desc_etq'];
  $cant = $_POST['cantidad'];


  $validarUsuario = mysqli_query($con,"select codigo from usuarios where codigo='$solicitante'");

  if(mysqli_num_rows($validarUsuario)==0 ) {
    echo "<script>alert(' Este usuario no existe.')</script>";
  }else{


    $insertSQL = "INSERT INTO solicitudes (id_solicitud,planta, solicitante, codigo_PT, descripcion_PT,lote, ffab_prod, fven_prod, vida_util, cod_etq, descripcion_etq, cantidad) VALUES (null,
    '$planta',
    '$solicitante',

    '$cod_PT',
    '$descripcion_PT',
    '$lote',

    '$ff',                    
    '$fv',
    '$Vu',                  

    '$cod_etq', 
    '$desc_etq',
    '$cant')";

    $ejecutarSQL = mysqli_query($con, $insertSQL);
  }

  if ($ejecutarSQL){
    echo "1";
  }else {
    echo "0";
  }
}

?>

Solo en la ultima parte haces este cambio:

if ($ejecutarSQL){
    echo "1";
}else {
    echo "0";
}

Esa sera la respuesta de tu llamada ajax, 1 para exito y 2 para error.

Luego en el boton debes cambiar el type de “submit” a “button” así:

<button type="button" id="btn_guardar" name="btn_guardar" onclick="guardar()">Guardar</button><br><br>  

Esto para que el formulario no se envie al hacer click.

Por ultimo debes modificar tu función “guardar()” para que tambien guarde los datos en tu base de datos así:

function guardar() {

        var _planta = document.getElementById("pl_1").value;
        var _solicitante = document.getElementById("solicitante_1").value;
        var _codPT = document.getElementById("codigoP_1").value;
        var _descPT = document.getElementById("descripcion_1").value;
        var _lote = document.getElementById("lote_1").value;

        var _ff = document.getElementById("ffab_1").value;
        var _fv = document.getElementById("fv_1").value;
        var _vida = document.getElementById("vidaUtil_1").value;

        var _codE = document.getElementById("codigoE_1").value;
        var _descE = document.getElementById("descripcionE_1").value;
        var _cant = document.getElementById("cant_1").value;

        var datos = {
          "planta" : _planta,
          "codigoUsu" : _solicitante,
          "cod_PT" : _codPT,
          'desc_PT' : _descPT,
          'lote' : _lote,

          'ffab' : _ff,
          'fven' : _fv,
          'vida_util' : _vida,

          'cod_etq' : _codE,
          'desc_etq' : _descE,
          'cantidad' : _cant
        };
        $.ajax({
          data:  datos,
          url:   'guardarDatos.php',
          type:  'post',
          success:  function (response) {
            if(response==1)
              alert('Solicitud exitosa.')
            else
              alert('Por favor intente de nuevo.')
          }
        });

        var i = 1; 
        //contador para asignar id al boton que borrara la fila

        var fila = '<tr id="row' + i + '"><td>' + _planta + '</td><td>' + _solicitante + '</td><td>' + _codPT + '</td><td>' + _descPT + '</td><td>' + _lote + '</td><td>' + _ff + '</td><td>' + _fv + '</td><td>' + _vida + '</td><td>' + _codE + '</td><td>' + _descE + '</td><td>' + _cant + '</td><td><button type="button" name="remove" id="' + i + '" class="btn btn-danger btn_remove">Borrar</button></td></tr>'; 

        i++;

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

        document.getElementById("pl_1").value ="";
        document.getElementById("solicitante_1").value = "";

        document.getElementById("codigoP_1").value ="";
        document.getElementById("descripcion_1").value = "";
        document.getElementById("lote_1").value = "";

        document.getElementById("ffab_1").value ="";
        document.getElementById("fv_1").value = "";
        document.getElementById("vidaUtil_1").value = "";

        document.getElementById("codigoE_1").value = "";
        document.getElementById("descripcionE_1").value ="";
        document.getElementById("cant_1").value = "";

        document.getElementById("codigoP_1").focus();

      };

En esta ultima parte pones todos tus datos en la variable “datos” para enviarla a tu archivo php con ajax y guardar los datos.

avisame si se te complica en alguna parte.

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *