Ayuda, Cotizador Javascript + PhP
Publicado por Diego (1 intervención) el 09/02/2017 17:50:23
Buenas tardes a todos, soy nuevo en el foro escribiendo pero soy un usuario que esta siguiendo la pagina hace un tiempo ya. Leyendo y probando me encamine a realizar un cotizador online sencillo para un proyecto personal pero me vi en el problema que luego de escribir el codigo javascript no sabia como empezar el PHP.
les muestro:
He de admitir que hasta este punto estuve basándome en ejemplos de esta pagina y otras y logre conseguir que tanto las animaciones como la estructura estén correctas. Mi idea es hacer una formula de multiplicación entre todos los valores para que resulten en el precio final.
Me gustaría que me puedan guiar para saber como empezar (no quiero que me pasen el código terminado!)
Desde ya muchas gracias por toda su informacion!
Saludos
les muestro:
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
<section class="calcos">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-calculator"></i></h3>
</div>
<div class="panel-body">
<form>
<div class="form-group form-inline">
<label>Medidas</label>
<input type="number" class="form-control" min="0" max="15" id="a" onchange="activar();" onfocus="activar();"> X <input type="number" class="form-control" min="0" max="15" id="b" onchange="activar();" onfocus="activar();"> cm.
</div>
<div class="form-group form-inline">
<label>Tipo de Material</label>
<select class="form-control" id="vinilo" onchange="activar();" onfocus="activar();">
<option value="blanco">PVC Blanco</option>
<option value="transparente">PVC Transparente</option>
</select>
</div>
<div class="form-group form-inline">
<label>Cantidad</label>
<input type="number" class="form-control" min="0" max="4000"id="cantidad" onchange="activar();" onfocus="activar();"> u.
</div>
<div class="form-group form-inline">
<label></label>
<input type="button" value="Calcular" class="btn btn-primary" onclick="calcular();" id="boton" style="display: inline-block;">
</div>
<div class="alert alert-info" role="alert" style="display:none; text-align: center;" id="info"></div>
<div class="alert alert-success" role="alert" style="display:none; text-align: center;" id="precio">
<b>TOTAL: <span id="precioTotal"></span></b>
<span id="precioUnitario"></span> c/u
</div>
<div class="alert alert-danger" role="alert" style="display:none" id="error"></div>
</form>
</div>
</div>
<script type="text/javascript">
var xhr;
function activar(){
var boton=document.getElementById("boton");
boton.style.display='inline-block';
var precio=document.getElementById("precio");
precio.style.display='none';
var error=document.getElementById("error");
error.style.display='none';
var info=document.getElementById("info");
info.style.display='none';
}function calcular(){
//vesualizamos la imagen de cargando en el navegador
var info=document.getElementById("info");
info.style.display='block';
info.innerHTML='<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i><span class="sr-only">Calculando...</span>';
//instanciamos el evento
xhr=new XMLHttpRequest; // Tomamos los datos llamando al Value de cada campo por medio del ID
var a=document.getElementById("a");
var b=document.getElementById("b");
var cantidad=document.getElementById("cantidad");
var vinilo=document.getElementById("vinilo");
// Pasamos las variables por GET para que las tome el archivo PHP
xhr.open("GET","calculo.php?a="+a.value+"&b="+b.value+"&cantidad="+cantidad.value+"&vinilo="+vinilo.value);
xhr.onreadystatechange=calback;
xhr.send(null);
}function calback(){
if(xhr.readyState==4){
if(xhr.status==200){
var resultado=JSON.parse(xhr.responseText);
var total=document.getElementById("precioTotal");
var unitario=document.getElementById("precioUnitario");
if(resultado.estado==true){
precio.style.display='block';
total.innerHTML=resultado.precioTotal;
unitario.innerHTML=resultado.precioUnitario;
info.style.display='none';
info.innerHTML=resultado.detalle;
error.style.display='none';
boton.style.display='none';
}else{
error.style.display='block';
error.innerHTML=resultado.error
precio.style.display='none';
info.style.display='none';
} } } }</script>
</section>
He de admitir que hasta este punto estuve basándome en ejemplos de esta pagina y otras y logre conseguir que tanto las animaciones como la estructura estén correctas. Mi idea es hacer una formula de multiplicación entre todos los valores para que resulten en el precio final.
Me gustaría que me puedan guiar para saber como empezar (no quiero que me pasen el código terminado!)
Desde ya muchas gracias por toda su informacion!
Saludos
Valora esta pregunta
0
