Calcular preço de frete com JQuery

Eder Cuer · Julho 30, 2012

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");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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).'"
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>

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.

Rafael Fernandes_150844 · Julho 30, 2012

faz o calculo na página que tu joga a ação no $.post

por exemplo

se você colocou

$.post('actions.php')

nessa página tu faz


$preço = $precoMetro * $distancia;

e faz retornar o conteúdo no local aonde você quer

$.post('actions.php', {

cidadePartida : $('#iddocampo').val(),
cidadeChegada : $('#iddocampo').val()

}, function(retorno) {

$('#iddocampoquevairececeberopreço').html(retorno)

});

Eder Cuer · Julho 30, 2012

Eae Rafael, valeu por responder.

Então cara ai que ta o problema, porque no caso eu faria o calculo para todas as transportadoras, como eu jogaria o valor correto em cada uma delas?

Eder Cuer · Agosto 13, 2012

Tem como eu retornar o valor para uma variavel?

Entrar

Arquivado

Calcular preço de frete com JQuery

Recommended Posts

Eder Cuer 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Rafael Fernandes_150844 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Eder Cuer 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Eder Cuer 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

JAVA - Orientação para Invalidar Sessão

printf iniciante básico

JAVA - Ajuda em Paginação

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante