Javascript para PHP

Eder Cuer · 3 de julho de 2012

Eae galera, faz um bom tempo que não posto minhas dúvidas aqui

Eu estou com um problema que tentei muito resolver antes de vir aqui. É o seguinte, eu tenho um formulário onde o usuário coloca uma cidade origem e destino, quando clica pra enviar é mostrado um mapa onde ele traça a rota, eu até estou conseguindo dar um alert e mostrar o km de cidade para cidade, mas gostaria de jogar esse valor em uma variável php e colocar em uma div embaixo do mapa, e que a div aparecesse depois desse clique de "traçar rota".

Preciso jogar para uma variavel PHP pra depois usar em futuros cálculos de frete.

Vou postar meu codigo aqui, ele ta um pouco grande, por isso a tag SPOILER

<?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'<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>
<div><a target="blank" href="verrest.php?cod='.$cod.'">Ver Restrições</a></div>
</div>';

}

echo'

<input type="button" onclick="revRoute();" class="revRoute"/>
<div class="left">
<form onsubmit="calcRoute();return false;" >
<label for="inputStart" class="inputStart" ></label>
<input type="text" class="text" value="'.htmlentities($corigem).','.htmlentities($eorigem).'" id="inputStart" />
<br />
<label for="inputEnd" class="inputEnd"></label> <input type="text" class="text" value="'.htmlentities($cdestino).','.htmlentities($edestino).'" id="inputEnd" />
<input type="submit" value="Traçar Rota" />
</form>
</div>

<div id="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]; /* Primeira rota */
var etapa = rota.legs[0]; /* única etapa dessa rota */

distancia = etapa.distance.value;

alert ("Aproximadamente => " + Math.round(distancia / 1000) + " km.");

}
});
}

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">
</form>
</div>
</div>
</div>';
include ("include/rodape.php");
echo'
</div>

</body>
</html>';

}
}else {
echo "Você não está logado!";
}
?>

DiF · 3 de julho de 2012

Olá,

Eu já passei por esse tipo de problema quando fiz meu TCC.. veja se este link pode te ajudar: http://ahaprogramando.wordpress.com/2008/01/19/6/

Abraço

Eder Cuer · 4 de julho de 2012

Eae Dif, sempre me ajudando

Tentei fazer igual o artigo mas agora to enfrentando outro problema:

Notice: Undefined index: dados_enviar in C:\wamp\www\fretabrasilbeta\user\orcamento.php on line 187

Mesmo depois de clicar pra traçar a rota ele da o erro.

Eu coloquei a variavel dentro da div directionsPanel porque ela aparece depois que eu clico pra traçar a rota, mas mesmo antes de clicar aparece o erro.



echo'

	<input type="button" onclick="revRoute();" class="revRoute"/>
		<div class="left">
            <form onsubmit="calcRoute();return false;" >
                <label for="inputStart" class="inputStart" ></label> 
                <input type="text" class="text" value="'.htmlentities($corigem).','.htmlentities($eorigem).'" id="inputStart"  />
                <label for="inputEnd" class="inputEnd"></label> <input type="text" class="text" value="'.htmlentities($cdestino).','.htmlentities($edestino).'" id="inputEnd" />
                <input type="submit" value="Traçar Rota" />
                <input type="hidden" id="dados" name="dados_enviar" value="" />
            </form>  
		</div>

		<div id="mapa" class="mapa"></div>
		<div id="directionsPanel">';
			$dist = $_POST[ 'dados_enviar'];
		echo '</div> 
		<hr />


		<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 objetoDados = document.getElementById("dados");

							var rota = response.routes[0]; /* Primeira rota */
							var etapa = rota.legs[0]; /* única etapa dessa rota */

							distancia = etapa.distance.value;
							objetoDados.value = distancia;
							alert ("Aproximadamente => " + Math.round(distancia / 1000) + " km.");

						}
				 	});
				}

				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>';

Eder Cuer · 18 de julho de 2012

Esse realmente ta difícil, o erro persiste e eu não consigo solucionar.

Eu tentei de várias formas mas ele da um erro falando que a variável ta vazia.

Mog.Lucas · 18 de julho de 2012

Não entendi qual o problema nem o que você quer fazer, amigo..

Para passar alguma coisa do JS para o PHP é necessário fazer uma requisição, provavelmente você optaria por Ajax.

Após isso, é possível manipular o retorno do Ajax e jogar pra div que quiser (embora seja meio ***** jogar pro PHP e ele retornar o que acabou de receber.. ao menos que você utilize este valor para alguma coisa).

Sobre o erro, é simples, o próprio erro informa que a index não existe no $_POST.. ou seja, o PHP não está recebendo a variável do Javascript.

Experimente dar um var_dump no $_POST na linha anterior e você verá.

Pelo que vi você criou um input hidden pra passar o valor pro PHP mas não vi você dando o submit no form.. ele está sendo enviado? Não era melhor usar ajax? você realmente precisa do valor no PHP?