Ayuda Ajax y PHP para realizar factura de tabla dinamica
Publicado por Ed Anciani (3 intervenciones) el 31/01/2014 07:40:22
Buenas programadores,
tengo el siguiente problema y espero su ayuda, gracias de antemano...
Como verán en el código esta todo bien no tengo ningún problema, explico: al ingresar la cedula, documento, o ID del cliente ej:20103223 inmediatamente jquery me busca el cliente, si no esta no arroja resultados y lo ingresamos manualmente, luego de tener el ID, nombre y telefono del cliente, se procede a buscar los productos a vender, estos se encuentran en los botones presentes, seria producto1 , producto 2, producto 3(los cuales al presionar llaman a la base de datos mediante ajax y php para ingresar el producto y el monto dinamicamente en unos inputs y queda disponible solo 1 para la cantidad de dicho producto a vender), y por ultimo producto4 (el cual arroja unos inputs vacios para ingresar manualmente la cantidad, la descripcion de la venta y el monto), perfecto, luego esta un boton de agregar el producto (+) el cual lo inserta dinamicamente(mediante un createElement()) en una tabla, la cantidad del producto, la descripcion y el monto, insertando cuantos productos quieras vender, al final hay un input text el cual muestra el total de la compra, Perfecto hasta aqui todo muy bien.
Mi problema es este que al querer enviar los datos COMPLETOS a la pagina addevent.php sinceramente no se como sacar todos los valores de la tabla es decir la cantidad la descripcion y el monto de cada uno, he intentado como pueden ver insertandole dinamicamente un id a cada <td>, pero si por ejemplo hay mas de un producto ej:
| 4 | camisas | 300|
| 2 | pantalones | 200|
quiero realizar una factura enviarla a la base de datos y luego si quiero en un futuro revisar mis ventas consultar a la base de datos y adquirir la factura con el ID, nombre, tlf, productos, cantidad y monto de cada uno, el total y la fecha.
no se si me explique, pero aqui esta el codigo.
espero su respuesta.
html
--------------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------------
Funciones.js acciones de la pagina
-------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------------
buscarproducto.php aqui consulta a la base de datos para buscar el producto a agregar.
------------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------------------
tengo el siguiente problema y espero su ayuda, gracias de antemano...
Como verán en el código esta todo bien no tengo ningún problema, explico: al ingresar la cedula, documento, o ID del cliente ej:20103223 inmediatamente jquery me busca el cliente, si no esta no arroja resultados y lo ingresamos manualmente, luego de tener el ID, nombre y telefono del cliente, se procede a buscar los productos a vender, estos se encuentran en los botones presentes, seria producto1 , producto 2, producto 3(los cuales al presionar llaman a la base de datos mediante ajax y php para ingresar el producto y el monto dinamicamente en unos inputs y queda disponible solo 1 para la cantidad de dicho producto a vender), y por ultimo producto4 (el cual arroja unos inputs vacios para ingresar manualmente la cantidad, la descripcion de la venta y el monto), perfecto, luego esta un boton de agregar el producto (+) el cual lo inserta dinamicamente(mediante un createElement()) en una tabla, la cantidad del producto, la descripcion y el monto, insertando cuantos productos quieras vender, al final hay un input text el cual muestra el total de la compra, Perfecto hasta aqui todo muy bien.
Mi problema es este que al querer enviar los datos COMPLETOS a la pagina addevent.php sinceramente no se como sacar todos los valores de la tabla es decir la cantidad la descripcion y el monto de cada uno, he intentado como pueden ver insertandole dinamicamente un id a cada <td>, pero si por ejemplo hay mas de un producto ej:
| 4 | camisas | 300|
| 2 | pantalones | 200|
quiero realizar una factura enviarla a la base de datos y luego si quiero en un futuro revisar mis ventas consultar a la base de datos y adquirir la factura con el ID, nombre, tlf, productos, cantidad y monto de cada uno, el total y la fecha.
no se si me explique, pero aqui esta el codigo.
espero su respuesta.
html
--------------------------------------------------------------------------------------------------------------------------------------------------
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!doctype html>
<html>
<head>
<title>Facturar</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="js/funciones.js"></script>
</head>
<body>
<div class="jumbotron">
<h2>Ingreso de cliente</h2>
<form class="form-signinven" method="post" name="recibo" id="recibo" action=addventa.php>
<input name="cedcliente" type="text" required class="form-control" id="cedcliente" placeholder="Cedula del cliente" autofocus autocomplete="off" size="30"/>
<input type="text" class="form-control" placeholder="Nombre del cliente" name="nomcliente" id="nomcliente" autocomplete="off" required/>
<input type="text" class="form-control" placeholder="Telefono del cliente" name="tlfcliente" id="tlfcliente" autocomplete="off" required/>
<h4>Ingresa productos</h4>
<input type="button" class="btn btn-sm btn-info" name="bb" id="bb" value="camisa" onClick="producto1();" >
<input type="button" class="btn btn-sm btn-info" name="bb" id="bb" value="pantalon" onClick="producto2();" >
<input type="button" class="btn btn-sm btn-info" name="bb" id="bb" value="zapato" onClick="producto3();" >
<input type="button" class="btn btn-sm btn-info" name="bb" id="bb" value="Otro" onClick="producto4();" >
</p>
<div class="agregar" id="datapro">
</div>
<p>
<input type="button" class="btn btn-group-sm btn-success" name="agrega" id="agrega" value="+" onClick="listado();">
</p>
<table class="tablalista" id="listado" width="100%" border="1">
<tr>
<th class="cant">Cant.</th>
<th class="prod">Descripcion</th>
<th class="precio">Monto</th>
<th class="eliminar">Est</th>
</tr>
</table>
<div id="ppp" class="total">Total: <input type="text" name="pago" id="pago" value="0">
</div>
<div id="hidden"></div>
<p> </p>
<input type="submit" class="btn btn-lg btn-success" id="vender" value="Confirmar"/>
</form>
<div id="aviso"></div>
</div>
<hr>
</div>
</div>
</div>
</html>
Funciones.js acciones de la pagina
-------------------------------------------------------------------------------------------------------------------------------------------
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
$(document).ready(function(){
var consulta;
//hacemos focus al campo de búsqueda
$("#cedcliente").focus();
//comprobamos si se pulsa una tecla
$("#cedcliente").keyup(function(e){
//obtenemos el texto introducido en el campo de búsqueda
consulta = $("#cedcliente").val();
//hace la búsqueda
$.ajax({
type: "POST",
url: "nomcliente.php",
data: "b="+consulta,
dataType: "html",
beforeSend: function(){
//imagen de carga
$("#nomcliente").val("Buscando.....");
},
error: function(){
alert("error petición ajax");
},
success: function(data){
$("#nomcliente").empty();
$("#nomcliente").val(data);
}});
$.ajax({
type: "POST",
url: "tlfcliente.php",
data: "c="+consulta,
dataType: "html",
beforeSend: function(){
//imagen de carga
$("#tlfcliente").val("Buscando.....");
},
error: function(){
alert("error petición ajax");
},
success: function(data){
$("#tlfcliente").empty();
$("#tlfcliente").val(data);
}});
});
});
//aqui estamos buscando los productos en la BD
function producto1(){
var d=1;try{ var ajax= new ActiveXObject("Msxml2.XMLHTTP"); }
catch(e){
try{ var ajax=new ActiveXObject("MicrosoftXMLHTTP"); }
catch(E){ var ajax=false; }
}if (!ajax && typeof XMLHttpRequest!='undefined'){
var ajax=new XMLHttpRequest();
}ajax.onreadystatechange=function(){
var zona=document.getElementById("datapro");
if (ajax.readyState==4){
if (ajax.status==200){
zona.innerHTML=ajax.responseText;
}}
}ajax.open("POST","buscaproducto.php",true);
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
ajax.send("codigo="+d);
}function producto2(){
var d=2;try{ var ajax= new ActiveXObject("Msxml2.XMLHTTP"); }
catch(e){
try{ var ajax=new ActiveXObject("MicrosoftXMLHTTP"); }
catch(E){ var ajax=false; }
}if (!ajax && typeof XMLHttpRequest!='undefined'){
var ajax=new XMLHttpRequest();
}ajax.onreadystatechange=function(){
var zona=document.getElementById("datapro");
if (ajax.readyState==4){
if (ajax.status==200){
zona.innerHTML=ajax.responseText;
}}
}ajax.open("POST","buscaproducto.php",true);
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
ajax.send("codigo="+d);
}function producto3(){
var d=3;try{ var ajax= new ActiveXObject("Msxml2.XMLHTTP"); }
catch(e){
try{ var ajax=new ActiveXObject("MicrosoftXMLHTTP"); }
catch(E){ var ajax=false; }
}if (!ajax && typeof XMLHttpRequest!='undefined'){
var ajax=new XMLHttpRequest();
}ajax.onreadystatechange=function(){
var zona=document.getElementById("datapro");
if (ajax.readyState==4){
if (ajax.status==200){
zona.innerHTML=ajax.responseText;
}}
}ajax.open("POST","buscaproducto.php",true);
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
ajax.send("codigo="+d);
}function producto4(){
//Este esta sin variable porque aqui se agregara un producto o una descripcion de venta que no este en la base de datos
try{ var ajax= new ActiveXObject("Msxml2.XMLHTTP"); }
catch(e){
try{ var ajax=new ActiveXObject("MicrosoftXMLHTTP"); }
catch(E){ var ajax=false; }
}if (!ajax && typeof XMLHttpRequest!='undefined'){
var ajax=new XMLHttpRequest();
}ajax.onreadystatechange=function(){
var zona=document.getElementById("datapro");
if (ajax.readyState==4){
if (ajax.status==200){
zona.innerHTML=ajax.responseText;
}}
}ajax.open("POST","otroproducto.php",true);
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
ajax.send();
}function actual(){
var n=new Date();
var f=document.getElementById("fecha");
f.value=n.getFullYear()+"-"+n.getMonth()+"-"+n.getDay();
}//agregando dinamicamente los productos en la tabla.
function listado(){
var c=document.getElementById("codigo");
var can=document.getElementById("cantidad");
var des=document.getElementById("descripcion");
var pre=document.getElementById("precio");
var x=parseInt(can.value);
var st=x*parseInt(pre.value);
var t=document.getElementById("listado");
var l=t.rows.length;
t.insertRow(l);
var c1=document.createElement("td");
a=des.value;
c1.setAttribute("id",a+"1");
c1.innerHTML=(can.value);
var c2=document.createElement("td");
b=des.value;
c2.setAttribute("id",b+"2");
c2.innerHTML=(des.value);
var c3=document.createElement("td");
c=des.value;
c3.setAttribute("id",c+"3");
c3.innerHTML=st;
var c4=document.createElement("td");
c4.innerHTML=("<td><input type='button' class=\"elimina\" id='eliminar'/></td>");
var f=0;t.rows[l].appendChild(c1);
t.rows[l].appendChild(c2);
t.rows[l].appendChild(c3);
t.rows[l].appendChild(c4);
var p=document.getElementById("pago");
var dinero=parseInt(p.value);
p.value=dinero+st;
$(".elimina").click(function(){
if (confirm("Desea eliminar Producto")){
$(this).parents("tr").fadeOut("normal", function(){
$(this).remove();
var p=document.getElementById("pago");
var dinero=parseInt(p.value);
p.value=dinero-st;
})
}});
}function vender(){
// intente mendiante un function llamado vender pero la verdad no tengo idea que variable colocar, me refiero a la tabla ya que no se cuantos productos vaya a vender a un cliente pueden ser 3 o 4 o 10 y cuales sean.
}buscarproducto.php aqui consulta a la base de datos para buscar el producto a agregar.
------------------------------------------------------------------------------------------------------------------------------------------
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<?php
$d=$_POST['codigo'];
$c=mysql_connect("localhost","root","");
mysql_select_db("vplanetdb");
$consulta="select * from productos where id=$d";
$r=mysql_query($consulta);
$l=mysql_num_rows($r);
if ($l>0){
$dato=mysql_fetch_row($r);
echo ("<table><tr><td>Cantidad</td><td>Descripcion</td><td>Precio</td></tr>");
echo ("<input type=\"hidden\" id=\"codigo\" value=\"$dato[0]\"");
echo ("<tr><td ><input type=\"number\" name=\"cantidad\" id=\"cantidad\" min=1 size=2 value=\"1\"></td>");
echo ("<td><input type=\"text\" name=\"descripcion\" id=\"descripcion\" value=\"$dato[1]\" DISABLED></td>");
echo ("<td><input type=\"text\" name=\"precio\" id=\"precio\" value=\"$dato[2]\" DISABLED></td>");
}else{echo("<h6 align=\"center\">Codigo de producto incorrecto <h6> ");
}mysql_close();
?>
Valora esta pregunta
0
