Comunidad de diseño web y desarrollo en internet online

Recoger y guardar datos en una tabla mysql

Citar            
MensajeEscrito el 27 May 2014 01:02 am
Holis plis ayuda urgente necesito recoger y despues guardar estos datos dinámicos en una tabla mysql. Yo inserto filas que contiene producto, cantidad y valor en una <table> de html. El código funciona correctamente pero no se como recoger cada uno de los datos de la columna producto, cantidad, precio, subtotal. para despues guardarlos. De antemano gracias.

este es el código para copiar y probar

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Factura</title>

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.js" charset="utf-8"></script>
<script src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="main.js"></script>

<script type="text/javascript">
function borrar(obj,valor,iva,totales,descuento) {
fila = obj.parentNode.parentNode;
document.getElementById('tabla').removeChild(fila);


total = total - valor;
$("#txttotal").val(total);



iva = total * 0.19;
$("#txtiva").val(iva);


totales=total + iva- descuento ;
$("#txttotales").val(totales);

}
</script>

</head>

<body>
<form name='form1' id='form1' action='guardar.php' method='post'>

<table width='90%' height='180' align='center' class='tabl' >

<!--Ingreso de productos cantidad y valor -->

<tr>
<td>PRODUCTO</td>
<td><input type='text' name='txtNombres' id='txtNombres' /></div></td>
<td>CANTIDAD</td>
<td><input type='text' name='txtApellidos' id='txtApellidos'/></td>
<td>VALOR</td>
<td><input type='text' name='txtTelefono' id='txtTelefono' /><input name="btnInsertar" id="btnInsertar" type="button" value="Insertar" class="" /></td>
</tr>
</table>

<table width='90%' height='' align='center' bgcolor='#FFFFFF' class='tabl' id="tblDatos" >
<tbody id="tabla">
<tr>
<td><strong>Producto</strong></td>
<td><strong>Cantidad</strong></td>
<td><strong>Precio</strong></td>
<td><strong>Subtotal</strong></td>
<td><strong>Eliminar</strong></td>
</tr>

<!--Insertar los datos en la tabla -->

<script type="text/javascript" charset="utf-8">
var total = 0;
var iva = 0;
var totales = 0;
var i = 0;
$(function() {
$("#btnInsertar").click(addUsuario);

});

function addUsuario(){
var Nombres=$('#txtNombres').val();
var apellidos=$("#txtApellidos").val();
var telefono=$("#txtTelefono").val();
var descuento=$("#txtDescuento").val();
var tablaDatos= $("#tblDatos");
var valor=(apellidos*telefono)

if(Nombres!="" || apellidos!="" || telefono!="" ){
tablaDatos.append("<tr><td><input type='text' name='fruit[]' value='"+Nombres+"' autofocus readonly style='background-color:#FFF' /></td><td><input type='text' name='cantidad[]' value='"+apellidos+"' autofocus readonly style='background-color:#FFF' aling='center' class='Campo' /></td><td><input type='text' name='precio[]' value='"+telefono+"' autofocus readonly style='background-color:#FFF' class='Campo' /></td><td><input type='text' name='valor[]' value='"+valor+"' autofocus readonly style='background-color:#FFF' class='Campo'/></td><td align='center'><input type='button' onclick='borrar(this,"+valor+","+iva+","+totales+","+descuento+")' value='ELIMINAR' /></td><td><input type='hidden' name='valor[]' value='"+descuento+"'/></td></tr>");

total = total + valor;
iva = total * 0.19;

totales=total + iva - descuento
$("#txttotal").val(total);
$("#txtiva").val(iva);
$("#txtdescuento").val(descuento);
$("#txttotales").val(totales);
reset_campos();
}
}
function reset_campos(){
$("#txtNombres").val("");
$("#txtApellidos").val("");
$("#txtTelefono").val("");
}

$(".delete").live('click', function(event) {
$(this).parent().parent().remove(tr);
});
</script>
</tbody>
</table>


</form>

</body>
</html>

Por Rouse

4 de clabLevel



 

chrome
Citar            
MensajeEscrito el 27 May 2014 03:09 pm
hola, revisa el listado de foros la proxima vez que postees, asi posteas tu pregunta donde mejor te leen. http://foros.cristalab.com/

post movido a PHP y MySQL

Por Mariux

BOFH

7756 de clabLevel

28 tutoriales
15 articulos

Genero:Femenino   Héroes Editores

Diseñadora & ilustradora

chrome
Citar            
MensajeEscrito el 27 May 2014 05:02 pm
mmm si encesitas guardar datos los tienes que hacer mediante PHP y MySQL,cuandos e publica codigo en foro, tendras mas respuestas si los pones entre tags

Código :

[php]  [/php] o [code]  [/code]  

ahora el problema aca es que los formularios que usas te daran un array
por que usas "name='fruit[]'", etc...
lo ideal es que hagas algo asi
name=dato[][fruit]
asi cada dato que ingreses en el formulario tendras como resultado un array que tendras todas las filas,

Código :

  
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>Factura</title>

   <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
   <script type="text/javascript" src="jquery.js" charset="utf-8"></script>
   <script src="js/jquery-1.4.2.min.js"></script>
   <script type="text/javascript" src="main.js"></script>

   <script type="text/javascript">
      function borrar(obj,valor,iva,totales,descuento) {
         fila = obj.parentNode.parentNode;
         document.getElementById('tabla').removeChild(fila);

         total = total - valor;
         $("#txttotal").val(total);

         iva = total * 0.19;
         $("#txtiva").val(iva);
         
         totales=total + iva- descuento ;
         $("#txttotales").val(totales);

      }
   </script>

</head>

<body>
<form name='form1' id='form1' action='guardar.php' method='post'>

   <table width='90%' height='180' align='center' class='tabl' >

      <!--Ingreso de productos cantidad y valor -->

      <tr>
         <td>PRODUCTO</td>
         <td><input type='text' name='txtNombres' id='txtNombres' /></div></td>
         <td>CANTIDAD</td>
         <td><input type='text' name='txtApellidos' id='txtApellidos'/></td>
         <td>VALOR</td>
         <td><input type='text' name='txtTelefono' id='txtTelefono' /><input name="btnInsertar" id="btnInsertar" type="button" value="Insertar" class="" /></td>
      </tr>
   </table>

   <table width='90%' height='' align='center' bgcolor='#FFFFFF' class='tabl' id="tblDatos" >
      <tbody id="tabla">
      <tr>
         <td><strong>Producto</strong></td>
         <td><strong>Cantidad</strong></td>
         <td><strong>Precio</strong></td>
         <td><strong>Subtotal</strong></td>
         <td><strong>Eliminar</strong></td>
      </tr>

      <!--Insertar los datos en la tabla -->

      <script type="text/javascript" charset="utf-8">
         var total = 0;
         var iva = 0;
         var totales = 0;
         var i = 0;
         $(function() {
            $("#btnInsertar").click(addUsuario);

         });

         function addUsuario(){
            var Nombres=$('#txtNombres').val();
            var apellidos=$("#txtApellidos").val();
            var telefono=$("#txtTelefono").val();
            var descuento=$("#txtDescuento").val();
            var tablaDatos= $("#tblDatos");
            var valor=(apellidos*telefono)

            if(Nombres!="" || apellidos!="" || telefono!="" ){
               tablaDatos.append("<tr><td><input type='text' name='fruit[]' value='"+Nombres+"' autofocus readonly style='background-color:#FFF' /></td><td><input type='text' name='cantidad[]' value='"+apellidos+"' autofocus readonly style='background-color:#FFF' aling='center' class='Campo' /></td><td><input type='text' name='precio[]' value='"+telefono+"' autofocus readonly style='background-color:#FFF' class='Campo' /></td><td><input type='text' name='valor[]' value='"+valor+"' autofocus readonly style='background-color:#FFF' class='Campo'/></td><td align='center'><input type='button' onclick='borrar(this,"+valor+","+iva+","+totales+","+descuento+")' value='ELIMINAR' /></td><td><input type='hidden' name='valor[]' value='"+descuento+"'/></td></tr>");

               total = total + valor;
               iva = total * 0.19;

               totales=total + iva - descuento
               $("#txttotal").val(total);
               $("#txtiva").val(iva);
               $("#txtdescuento").val(descuento);
               $("#txttotales").val(totales);
               reset_campos();
            }
         }
         function reset_campos(){
            $("#txtNombres").val("");
            $("#txtApellidos").val("");
            $("#txtTelefono").val("");
         }

         $(".delete").live('click', function(event) {
            $(this).parent().parent().remove(tr);
         });
      </script>
      </tbody>
   </table>


</form>

</body>
</html> 

Por tuadmin

Claber

598 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 28 May 2014 04:34 pm
Holis si gracias pude solventar el problema lo hice en una nueva pagina guardar.php mediante botón guardar recojo los datos
Ahora quisiera guardar esos datos pero solo logro guardar el ultimo, no todos. Creo que el insert tiene que estar dentro de los for intente algo pero no me sale o usar un while. Ayudita plis
Por ejemplo:
si ingreso dos filas con tomate, papa, guardar como filas diferentes.
tabla factura
id_fact nombre cantidad precio
1 tomate 1 0.20
1 papa 2 0.60
este es mi código:

Código :

<?php 
if($_POST['guardar']) { 
 
if(isset($_POST["guardar"])){
    $btn=$_POST["guardar"];
   if($btn=="Guardar"){
      
   for($i=0;$i<count($_POST["fruit"]);$i++)
{
    echo $_POST["fruit"][$i];
   $cant=$_POST["cantidad"][$i];
}
   for($i=0;$i<count($_POST["cantidad"]);$i++)
{
    echo $_POST["cantidad"][$i];
   $descr=$_POST["fruit"][$i];
}
for($i=0;$i<count($_POST["precio"]);$i++)
{
    echo $_POST["precio"][$i];
   $vunit=$_POST["precio"][$i];   
}
   $sql="insert into det_factura values ('','','','$cant','$descr','$vunit','','','','')";
      $cs=mysql_query($sql,$cn);
      
      echo "<script> alert('Se inserto correctamente');</script>";      
      }
   }
} 
?>


Por Rouse

4 de clabLevel



 

chrome
Citar            
MensajeEscrito el 29 May 2014 05:03 am
bueno primero creo que necesitamos ordenar tu codigo un poco
reemplaza esto

Código :

tablaDatos.append("<tr><td><input type='text' name='fruit[]' value='"+Nombres+"' autofocus readonly style='background-color:#FFF' /></td><td><input type='text' name='cantidad[]' value='"+apellidos+"' autofocus readonly style='background-color:#FFF' aling='center' class='Campo' /></td><td><input type='text' name='precio[]' value='"+telefono+"' autofocus readonly style='background-color:#FFF' class='Campo' /></td><td><input type='text' name='valor[]' value='"+valor+"' autofocus readonly style='background-color:#FFF' class='Campo'/></td><td align='center'><input type='button' onclick='borrar(this,"+valor+","+iva+","+totales+","+descuento+")' value='ELIMINAR' /></td><td><input type='hidden' name='valor[]' value='"+descuento+"'/></td></tr>");

por esto
[code]
tablaDatos.append(
"<tr>"+
"<td>"+
"<input type='text' name='data["+FILAS+"][fruit]' value='"+Nombres+"' autofocus readonly style='background-color:#FFF' />"+
"</td>"+
"<td>"+
"<input type='text' name='data["+FILAS+"][cantidad]' value='"+apellidos+"' autofocus readonly style='background-color:#FFF' aling='center' class='Campo' />"+
"</td>"+
"<td>"+
"<input type='text' name='data["+FILAS+"][precio]' value='"+telefono+"' autofocus readonly style='background-color:#FFF' class='Campo' />"+
"</td>"+
"<td>"+
"<input type='text' name='data["+FILAS+"][valor]' value='"+valor+"' autofocus readonly style='background-color:#FFF' class='Campo'/>"+
"</td>"+
"<td align='center'>"+
"<input type='button' onclick='borrar(this,"+valor+","+iva+","+totales+","+descuento+")' value='ELIMINAR' />"+
"</td>"+
"<td>"+
"<input type='hidden' name='data["+FILAS+"][valor]' value='"+descuento+"'/>"+
"</td>"+
"</tr>");
FILAS++;
[code]
y en el php pones esto

Código PHP :

<?php 
//este if esta demas basta con el isset
//if($_POST['guardar']) { 
 
if(isset($_POST["guardar"])){
   $btn=$_POST["guardar"];
   if($btn=="Guardar"){
      //codigo optimizado
      $i = 0;//contamos las filas qu se insertan en MYSQL
      foreach($_POST['data'] as $row){
      //$row con tiene los el vector con datos como ,fruit,cantidad,precio,valor 
         $sql="insert into det_factura values ('','','','".$row["cantidad"]."','".$row["fruit"]."','".$row["precio"]."','','','','')";
         $cs=mysql_query($sql,$cn);
         $i++;
      }
      echo "<script> alert('Se inserto correctamente las $i filas');</script>";
      //esto rompe con la estructura de las matrizes o array
      /*
      for($i=0;$i<count($_POST["fruit"]);$i++)
      {
      echo $_POST["fruit"][$i];
      $cant=$_POST["cantidad"][$i];
      }
      for($i=0;$i<count($_POST["cantidad"]);$i++)
      {
      echo $_POST["cantidad"][$i];
      $descr=$_POST["fruit"][$i];
      }
      for($i=0;$i<count($_POST["precio"]);$i++)
      {
      echo $_POST["precio"][$i];
      $vunit=$_POST["precio"][$i];   
      }
      $sql="insert into det_factura values ('','','','$cant','$descr','$vunit','','','','')";
      $cs=mysql_query($sql,$cn);

      echo "<script> alert('Se inserto correctamente');</script>";      /**/
   }
}
//} 
?>

esto es meramente ilustrativo, por que hay que realizar muchas correcciones, si es para algo externo como internet, esto hara que haya serias vulnerabilidades al servidor

Por tuadmin

Claber

598 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 29 May 2014 05:05 am
bueno primero creo que necesitamos ordenar tu codigo un poco
reemplaza esto

Código :

tablaDatos.append("<tr><td><input type='text' name='fruit[]' value='"+Nombres+"' autofocus readonly style='background-color:#FFF' /></td><td><input type='text' name='cantidad[]' value='"+apellidos+"' autofocus readonly style='background-color:#FFF' aling='center' class='Campo' /></td><td><input type='text' name='precio[]' value='"+telefono+"' autofocus readonly style='background-color:#FFF' class='Campo' /></td><td><input type='text' name='valor[]' value='"+valor+"' autofocus readonly style='background-color:#FFF' class='Campo'/></td><td align='center'><input type='button' onclick='borrar(this,"+valor+","+iva+","+totales+","+descuento+")' value='ELIMINAR' /></td><td><input type='hidden' name='valor[]' value='"+descuento+"'/></td></tr>");

por esto

Código :

tablaDatos.append(
            "<tr>"+
               "<td>"+
                  "<input type='text' name='data["+FILAS+"][fruit]' value='"+Nombres+"' autofocus readonly style='background-color:#FFF' />"+
               "</td>"+
               "<td>"+
                  "<input type='text' name='data["+FILAS+"][cantidad]' value='"+apellidos+"' autofocus readonly style='background-color:#FFF' aling='center' class='Campo' />"+
               "</td>"+
               "<td>"+
                  "<input type='text' name='data["+FILAS+"][precio]' value='"+telefono+"' autofocus readonly style='background-color:#FFF' class='Campo' />"+
               "</td>"+
               "<td>"+
                  "<input type='text' name='data["+FILAS+"][valor]' value='"+valor+"' autofocus readonly style='background-color:#FFF' class='Campo'/>"+
               "</td>"+
               "<td align='center'>"+
                  "<input type='button' onclick='borrar(this,"+valor+","+iva+","+totales+","+descuento+")' value='ELIMINAR' />"+
               "</td>"+
               "<td>"+
                  "<input type='hidden' name='data["+FILAS+"][valor]' value='"+descuento+"'/>"+
               "</td>"+
            "</tr>");
            FILAS++;

y en el php pones esto

Código PHP :

<?php 
//este if esta demas basta con el isset
//if($_POST['guardar']) { 
 
if(isset($_POST["guardar"])){
   $btn=$_POST["guardar"];
   if($btn=="Guardar"){
      //codigo optimizado
      $i = 0;//contamos las filas qu se insertan en MYSQL
      foreach($_POST['data'] as $row){
      //$row con tiene los el vector con datos como ,fruit,cantidad,precio,valor 
         $sql="insert into det_factura values ('','','','".$row["cantidad"]."','".$row["fruit"]."','".$row["precio"]."','','','','')";
         $cs=mysql_query($sql,$cn);
         $i++;
      }
      echo "<script> alert('Se inserto correctamente las $i filas');</script>";
      //esto rompe con la estructura de las matrizes o array
      /*
      for($i=0;$i<count($_POST["fruit"]);$i++)
      {
      echo $_POST["fruit"][$i];
      $cant=$_POST["cantidad"][$i];
      }
      for($i=0;$i<count($_POST["cantidad"]);$i++)
      {
      echo $_POST["cantidad"][$i];
      $descr=$_POST["fruit"][$i];
      }
      for($i=0;$i<count($_POST["precio"]);$i++)
      {
      echo $_POST["precio"][$i];
      $vunit=$_POST["precio"][$i];   
      }
      $sql="insert into det_factura values ('','','','$cant','$descr','$vunit','','','','')";
      $cs=mysql_query($sql,$cn);

      echo "<script> alert('Se inserto correctamente');</script>";      /**/
   }
}
//} 
?>

esto es meramente ilustrativo, por que hay que realizar muchas correcciones, si es para algo externo como internet, esto hara que haya serias vulnerabilidades al servidor

Por tuadmin

Claber

598 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 29 May 2014 05:07 am
y agrega
donde esta tu archivo html

Código :

         var total = 0;
         var iva = 0;
         var totales = 0;
         var i = 0;

agrea ahi la variable FILAS

Código :

         var total = 0;
         var iva = 0;
         var totales = 0;
         var i = 0;
         var FILAS = 0;

Por tuadmin

Claber

598 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 29 May 2014 02:04 pm
holis ya realice los cambios que me dijiste pero ahora me sale esto a lo que doy clic en guardar en el archivo guardar.php



algo hice mal . ayudita plis :(

Por Rouse

4 de clabLevel



 

chrome
Citar            
MensajeEscrito el 29 May 2014 09:38 pm
jeje si, tienes que reemplazar tal como te lo dije, jejee lo ue hiciste fue poner los cambios ,dentro de la funcion que agrega el HTML

Por tuadmin

Claber

598 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 29 May 2014 09:40 pm
bueno para no complicarlo, solo reemplaza todo tu HTML por este otro

Código :

<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>Factura</title>

   <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
   <script type="text/javascript" src="jquery.js" charset="utf-8"></script>
   <script src="js/jquery-1.4.2.min.js"></script>
   <script type="text/javascript" src="main.js"></script>

   <script type="text/javascript">
      function borrar(obj,valor,iva,totales,descuento) {
         fila = obj.parentNode.parentNode;
         document.getElementById('tabla').removeChild(fila);

         total = total - valor;
         $("#txttotal").val(total);

         iva = total * 0.19;
         $("#txtiva").val(iva);
         
         totales=total + iva- descuento ;
         $("#txttotales").val(totales);

      }
   </script>

</head>

<body>
<form name='form1' id='form1' action='guardar.php' method='post'>

   <table width='90%' height='180' align='center' class='tabl' >

      <!--Ingreso de productos cantidad y valor -->

      <tr>
         <td>PRODUCTO</td>
         <td><input type='text' name='txtNombres' id='txtNombres' /></div></td>
         <td>CANTIDAD</td>
         <td><input type='text' name='txtApellidos' id='txtApellidos'/></td>
         <td>VALOR</td>
         <td><input type='text' name='txtTelefono' id='txtTelefono' /><input name="btnInsertar" id="btnInsertar" type="button" value="Insertar" class="" /></td>
      </tr>
   </table>

   <table width='90%' height='' align='center' bgcolor='#FFFFFF' class='tabl' id="tblDatos" >
      <tbody id="tabla">
      <tr>
         <td><strong>Producto</strong></td>
         <td><strong>Cantidad</strong></td>
         <td><strong>Precio</strong></td>
         <td><strong>Subtotal</strong></td>
         <td><strong>Eliminar</strong></td>
      </tr>

      <!--Insertar los datos en la tabla -->

      <script type="text/javascript" charset="utf-8">
         var total = 0;
         var iva = 0;
         var totales = 0;
         var i = 0;
         $(function() {
            $("#btnInsertar").click(addUsuario);

         });

         function addUsuario(){
            var Nombres=$('#txtNombres').val();
            var apellidos=$("#txtApellidos").val();
            var telefono=$("#txtTelefono").val();
            var descuento=$("#txtDescuento").val();
            var tablaDatos= $("#tblDatos");
            var valor=(apellidos*telefono)

            if(Nombres!="" || apellidos!="" || telefono!="" ){
             tablaDatos.append(
            "<tr>"+
               "<td>"+
                  "<input type='text' name='data["+FILAS+"][fruit]' value='"+Nombres+"' autofocus readonly style='background-color:#FFF' />"+
               "</td>"+
               "<td>"+
                  "<input type='text' name='data["+FILAS+"][cantidad]' value='"+apellidos+"' autofocus readonly style='background-color:#FFF' aling='center' class='Campo' />"+
               "</td>"+
               "<td>"+
                  "<input type='text' name='data["+FILAS+"][precio]' value='"+telefono+"' autofocus readonly style='background-color:#FFF' class='Campo' />"+
               "</td>"+
               "<td>"+
                  "<input type='text' name='data["+FILAS+"][valor]' value='"+valor+"' autofocus readonly style='background-color:#FFF' class='Campo'/>"+
               "</td>"+
               "<td align='center'>"+
                  "<input type='button' onclick='borrar(this,"+valor+","+iva+","+totales+","+descuento+")' value='ELIMINAR' />"+
               "</td>"+
               "<td>"+
                  "<input type='hidden' name='data["+FILAS+"][valor]' value='"+descuento+"'/>"+
               "</td>"+
            "</tr>");
            FILAS++;

               total = total + valor;
               iva = total * 0.19;

               totales=total + iva - descuento
               $("#txttotal").val(total);
               $("#txtiva").val(iva);
               $("#txtdescuento").val(descuento);
               $("#txttotales").val(totales);
               reset_campos();
            }
         }
         function reset_campos(){
            $("#txtNombres").val("");
            $("#txtApellidos").val("");
            $("#txtTelefono").val("");
         }

         $(".delete").live('click', function(event) {
            $(this).parent().parent().remove(tr);
         });
      </script>
      </tbody>
   </table>


</form>

</body>
</html> 

y luego comparas tu archivo anterior, los cambios que hiciste, y este que te lo puse recien y mira donde esta el error :-D

Por tuadmin

Claber

598 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 01 Jun 2014 03:54 pm
Ya lo compare y me funciono solo faltaba agregar FILAS=0;

Mil gracias me has salvado la vida.. jijijuuu se te agradece amigo... :) gracias x la ayuda

Por Rouse

4 de clabLevel



 

chrome

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.