PHP - Ayuda, Cotizador Javascript + PhP

   
Vista:

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:

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
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Junior

Ayuda, Cotizador Javascript + PhP

Publicado por Junior (11 intervenciones) el 10/02/2017 05:23:02
Hola prueba con este, ahí está la lógica solo efectua lo que desees con los dos resultados

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?
//calculo.php
//inicio obteniendo los datos
$a = $_GET['a'];
$b = $_GET['b'];
$cantidad = $_GET['cantidad'];
$dat = $_GET['vinilo'];
//fin obteniendo datos
 
//formula de precioTotal
$p_total = $a*$b*$cantidad;
//formula de precioUnitario
$p_uni = $a*$b;
 
//convirtiendo a json
echo json_encode(array ("estado"=>true, "precioTotal"=>$p_total, "precioUnitario"=>$p_uni));
 
?>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar