Calcular preço de frete com JQuery
Eae galera, eu fiquei alguns minutos pra arrumar um nome pra esse tópico e ainda assim ficou meio confuso, me desculpem.
Eu estou tentando desenvolver um sisteminha de calcular frete.
Em um formulário php o usuário escolhe cidade e estado (origem/destino), assim que o usuário clica em procurar o sistema busca as transportadoras que atendem aquelas cidades e estados, e junto com as transportadoras aparece um mapa.
Agora começa meu probleminha, bom... assim que o usuário clica em "Traçar Rota" eu pego a distância de cidade para cidade, envio por $.post(), pego a distância e atualizo as divs "preco" (são criadas dinamicamente, dependendo de quantas transportadoras atendem aquela rota), fiz isso só pra teste mesmo.
No banco de dados de cada transportadora tem um campo "precoMetro", que é quanto uma transportadora cobra por metro. Agora eu queria saber um jeito de ao invés de colocar a distância, eu colocar o preço mesmo, fazer os cálculos.
Pessoal se for uma coisa muito simples eu peço desculpa, não entendo muito de javascript/jquery/ajax.
Vou postar algumas imagens pra vocês entenderem melhor, e meu código também
Aqui é meu código completo:
<?php
session_start();
include("include/connect.php");
?><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/css.css">
<title>Administrativo</title>
<style type="text/css">
<style>label.inputStart,label.inputEnd,.revRoute{ background-image:url(images/sprite.png); background-repeat:no-repeat; }
#mapa { width:680px; height: 300px; }
input.text {font-size:12px;margin-bottom:5px;outline:medium none;padding:5px;text-indent:5px;width:300px;}
.revRoute{margin:18px 5px 0 0;width:18px;height:18px;float: left;border:0;background-position:0 -32px; cursor :pointer ;}
label{float:left;display:block;width:16px;height:16px; margin:5px 5px 0 0;}
.inputStart{background-position:0 0;}
.inputEnd{background-position:0 -16px;}
.left{float:left; clear:both; margin-top: 20px;}
</style>
<script src="script/jquery.js" type="text/javascript"></script>
<script src="script/jquery.validate.js" type="text/javascript"></script>
<script src="script/metadata.js" type="text/javascript"></script>
<script src="script/maskedinput-1.3.js" type="text/javascript"></script>
<script src="script/validacpf.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("select[name=estadoOrigem]").change(function(){
$("select[name=cidadeOrigem]").html('<option value="0">Carregando...</option>');
$.post("cidades.php",
{estado:$(this).val()},
function(valor){
$("select[name=cidadeOrigem]").html(valor);
}
)
})
})
</script>
<script type="text/javascript">
$(document).ready(function(){
$("select[name=estadoDestino]").change(function(){
$("select[name=cidadeDestino]").html('<option value="0">Carregando...</option>');
$.post("cidades.php",
{estado:$(this).val()},
function(valor){
$("select[name=cidadeDestino]").html(valor);
}
)
})
})
</script>
</head>
<body onload="initialize();">
<?php//Iniciando a sessão
if($_SESSION['logado'] == 1){
$sql = "SELECT * FROM usuario WHERE cod_user = ".$_SESSION['id_user'];
$rs = mysql_query($sql);
if(mysql_num_rows($rs)) {
$user = mysql_fetch_array($rs);
echo'
<div id="geral">';
include ("include/topo.php");
include ("include/menu.php");
echo'
<div id="conteudo">
<div id="conteudo_int">
<div style="border: 1px solid; margin-right: 10px; margin-top: 10px; width: 680px; float: right;">
<table border="0" width="100%">
<tr>';
if($_SERVER['REQUEST_METHOD']=="POST") {
$cidorigem = $_POST['cidadeOrigem'];
$ciddestino = $_POST['cidadeDestino'];
$estorigem = $_POST['estadoOrigem'];
$estdestino = $_POST['estadoDestino'];
$sql = "SELECT t2.cod_transp,
t2.nome
FROM (SELECT t1.cod_transp,
t1.nome
FROM transportadora t1
INNER JOIN mrh_transportadora mt1
ON mt1.cod_transp = t1.cod_transp
INNER JOIN mrh_cidade mc1
ON mc1.cod_mrh = mt1.cod_mrh
WHERE mc1.cod_cid = $cidorigem) t2
INNER JOIN mrh_transportadora mt2
ON mt2.cod_transp = t2.cod_transp
INNER JOIN mrh_cidade mc2
ON mc2.cod_mrh = mt2.cod_mrh
WHERE mc2.cod_cid = $ciddestino";
$sqlco = "SELECT * FROM cidade WHERE cod_cid=".$cidorigem;
$sqlcd = "SELECT * FROM cidade WHERE cod_cid=".$ciddestino;
$sqleo = "SELECT * FROM estado WHERE cod_estado=".$estorigem;
$sqled = "SELECT * FROM estado WHERE cod_estado=".$estdestino;
$resulto = mysql_query($sqlco);
$origem = mysql_fetch_array($resulto);
$corigem = $origem['nome'];
$resultd = mysql_query($sqlcd);
$destino = mysql_fetch_array($resultd);
$cdestino = $destino['nome'];
$resulteo = mysql_query($sqleo);
$esorigem = mysql_fetch_array($resulteo);
$eorigem = $esorigem['nome'];
$resulted = mysql_query($sqled);
$esdestino = mysql_fetch_array($resulted);
$edestino = $esdestino['nome'];
$result = mysql_query($sql);
echo '<h2 align="center">Transportadoras X Cidade</h2>';
for ( $i = 0 ; $i < mysql_num_rows($result); $i++ ) {
$nome = mysql_result($result, $i, 'nome');
$cod = mysql_result($result, $i, 'cod_transp');
//echo $i;
//echo $cod;
//echo "\n\n";
echo'<div style="border: 1px solid #000000; float:left; margin-left: 15px; margin-top: 5px;">
<div><img src="img/scania.jpg" width="130" height="88" /></div>
<div>Codigo: '.$cod.' </div>
<div>Preço: <div id="preco'.$cod.'" style="float:right; width: 60px; padding-right:10px; "></div> </div>
<div style="clear:both"><a target="blank" href="verrest.php?cod='.$cod.'">Ver Restrições</a></div>
</div>';
}
echo'
<div class="left">
<form id="formulario" name="formulario" onsubmit="calcRoute(); return false;" >
<label for="inputStart" class="inputStart" ></label>
<input type="text" readonly="readonly" class="text" value="'.htmlentities($corigem).','.htmlentities($eorigem).'"id="inputStart" />
<br />
<label for="inputEnd" class="inputEnd"></label> <input type="text" readonly="readonly" class="text" value="'.htmlentities($cdestino).','.htmlentities($edestino).'"id="inputEnd" />
<input type="submit" id="tracar" name="tracar" value="Traçar Rota" />
<input type="text" id="distancia" name="distancia" />';
for ( $i = 0 ; $i < mysql_num_rows($result); $i++ ) {
$cod = mysql_result($result, $i, 'cod_transp');
echo '<input type="hidden" id="preco'.$cod.'" name="preco'.$cod.'" value="'.$cod.'" />';
}
echo '
</form>
</div>
<div id="mapa" name="mapa" class="mapa">
</div>
<div id="directionsPanel">
</div>
<hr />
<br /><br />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var route = false;
var map;
var marker;
var geocoder;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
geocoder = new google.maps.Geocoder();
var myLatlng = new google.maps.LatLng(-23.5489433, -46.6388182);
var myOptions = {
zoom: 17,
center: myLatlng,
mapTypeControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("mapa"), myOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("directionsPanel"));
}
function calcRoute() {
if (marker) marker.setMap(null);
route = true;
var start = document.getElementById("inputStart").value;
var end = document.getElementById("inputEnd").value;
var request = {
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
var distancia;
var rota = response.routes[0];
var etapa = rota.legs[0];
distancia = etapa.distance.value;
document.getElementById("distancia").value = distancia;
//alert ("Aproximadamente => " + Math.round(distancia / 1000) + " km.");
}
//Irá esconder a div do formulario que é o formularioEmail, com efeito em slow.
var distancia = $("#distancia").val();';
for ( $i = 0 ; $i < mysql_num_rows($result); $i++ )
{
echo 'var preco'.$cod.' = $("#distancia'.$cod.'").val();';
}
echo '
//Enviando as variáveis com os valores para a página envia_formulario.php e criando uma nova função para pegar o retorno da página envia_formulario.php
$.post("calcula.php", { distancia:distancia, ';for( $i = 0 ; $i < mysql_num_rows($result); $i++ ){echo 'preco'.$cod.':preco'.$cod.',';}echo '}, function(get_retorno) {
//Depois que foi completado o cadastro e tem a mensagem de retorno, esconde a div carregando_form que tem a barra de carregamento.
';
for ( $i = 0 ; $i < mysql_num_rows($result); $i++ )
{
$cod = mysql_result($result, $i, 'cod_transp');
$nome = mysql_result($result, $i, 'nome');
echo '$("#preco'.$cod.'").show("slow").text(get_retorno);'
;
echo "\n";
}
echo '
});
});
}
function revRoute(){
var divStart = document.getElementById("inputStart");
var divEnd = document.getElementById("inputEnd");
var start = divStart.value;
var end = divEnd.value;
divStart.value = end;
divEnd.value = start
if( route == true){
calcRoute();
}
}
</script>
</div>
';
}
echo'
</tr>
</table>
</div>
<form name="filtro" action="orcamento.php" method="post" >
<div style="float: left; border: 1px solid; height: 150px; clear: left; margin-top: 10px; margin-left:10px;"><center>Origem</center><br>
<div>
<select name="estadoOrigem" id="estado">
<option align="center" value="0">Escolha o Estado</option>';
//Consulta com a tabela
//Selecione tudo de nomedatabela em ordem crescente pelo nome
$consulta=mysql_query("SELECT *FROM estado order by nome ASC");
//Fazendo o looping para exibição de todos registros que contiverem em nomedatabela
while ($dados = mysql_fetch_array($consulta)) {
echo("<option value='".$dados['cod_estado']."'>".htmlentities($
dados['nome'])."</option>");
}
echo '
</select>
</div>
<div style="margin-top: 10px;">
<select name="cidadeOrigem" id="cidadeOrigem">
<option value="0">Escolha a cidade</option>
</select>
</div>
</div>
<div style="float: left; border: 1px solid; clear: left; margin-top: 30px; height: 150px; margin-left:10px;"><center>Destino</center><br>
<div>
<select name="estadoDestino" id="estado">
<option value="0">Escolha o Estado</option>';
//Consulta com a tabela
//Selecione tudo de nomedatabela em ordem crescente pelo nome
$consulta=mysql_query("SELECT *FROM estado order by nome ASC");
//Fazendo o looping para exibição de todos registros que contiverem em nomedatabela
while ($dados = mysql_fetch_array($consulta)) {
echo("<option value='".$dados['cod_estado']."'>".htmlentities($
dados['nome'])."</option>");
}
echo '
</select>
</div>
<div style="margin-top: 10px;">
<select name="cidadeDestino" id="cidadeDestino">
<option value="0">Escolha a cidade</option>
</select>
</div>
</div>
<input style="clear: left; float:left; margin-left: 45px; margin-top: 10px;" type="submit" value="Procurar" id="procurar" name="procurar" >
</form>
';
echo '
</div>
</div>
</div>';
include ("include/rodape.php");
echo'
</div>
</body>
</html>';
}}else {
echo "Você não está logado!";
}
?>Aqui é o formulário onde eu chamo a função, eu tento criar um for pra criar alguns inputs hiddens dinamicamente pra enviar por post, mas meu teste deu errado:
<div class="left">
<form id="formulario" name="formulario" onsubmit="calcRoute(); return false;" >
<label for="inputStart" class="inputStart" ></label>
<input type="text" readonly="readonly" class="text" value="'.htmlentities($corigem).','.htmlentities($eorigem).'" <br />
<label for="inputEnd" class="inputEnd"></label> <input type="text" readonly="readonly" class="text" value="'.htmlentities($cdestino).','.htmlentities($edestino).'" <input type="submit" id="tracar" name="tracar" value="Traçar Rota" />
<input type="text" id="distancia" name="distancia" />';
for ( $i = 0 ; $i < mysql_num_rows($result); $i++ ) {
$cod = mysql_result($result, $i, 'cod_transp');
echo '<input type="hidden" id="preco'.$cod.'" name="preco'.$cod.'" value="'.$cod.'" />';
}
echo '
</form>
</div>Aqui é minha função:
function calcRoute() {
if (marker) marker.setMap(null);
route = true;
var start = document.getElementById("inputStart").value;
var end = document.getElementById("inputEnd").value;
var request = {
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
var distancia;
var rota = response.routes[0];
var etapa = rota.legs[0];
distancia = etapa.distance.value;
document.getElementById("distancia").value = distancia;
}
var distancia = $("#distancia").val();';
for ( $i = 0 ; $i < mysql_num_rows($result); $i++ )
{
echo 'var preco'.$cod.' = $("#distancia'.$cod.'").val();';
}
echo '
$.post("calcula.php", { distancia:distancia, ';for( $i = 0 ; $i < mysql_num_rows($result); $i++ ){echo 'preco'.$cod.':preco'.$cod.',';}echo '}, function(get_retorno) {';
for ( $i = 0 ; $i < mysql_num_rows($result); $i++ )
{
$cod = mysql_result($result, $i, 'cod_transp');
$nome = mysql_result($result, $i, 'nome');
echo '$("#preco'.$cod.'").show("slow").text(get_retorno);'
;
echo "\n";
}
echo '
});
});Desculpem se ficou grande, é que eu quis explicar bem detalhado.
Discussão (3)
Carregando comentários...