Atualizado em 17 de Maio de 2013

Passar Variável PHP para Javascript

Salva galera,

Dentro de uma página de internet algo que não podemos nunca deixar de lado e o bom e velho Javascript, seja para validar informações do lado do cliente ou até mesmo para criar efeitos em imagens e outras tantas aplicações que podemos desenvolver com ele. Como o javascript e algo indispensável se torna quase impossível não haver uma relação entre o javascript com o PHP.

Por este motivo neste post vamos ver como passar variáveis PHP para Javascript. Tenho certeza que esta dica será muito valiosa para muitos.

Em nosso exemplo vamos similar um alert do javascript com um texto vindo de uma variável do PHP. Vamos ao exemplo.

<?php
$msg = 'Seja bem-vindo ao site!';
?>
<html>
 <head>
  <title>
Passar Variável PHP para Javascript</title>
 </head>
 <body>

  <script
type="text/javascript">
   var mensagem = "<?php echo $msg;?>";
   alert(mensagem);
  </script>

 </body>
</html>


No exemplo acima usamos uma variável do javascript para receber o valor vindo do PHP, podíamos usar diretamente, porém neste exemplo já podemos observa dois aspectos importantes (variável do Javascript e interação do javascript com php).

É isso ai galera, #ficadica.


"Esta dica te ajudou de alguma forma?" Então ajude outras pessoas compartilhando este conteúdo com seus amigos! =)


Até a próxima.

Tags:  JavaScript | PHP

Comentários

Sua foto do perfil

Paulo Cesar

Estou tentando montar um gráfico tipo pizza com dados trazidos pelo PHP, mas esta dando erro, será que poderias me ajudar? Segue os arquivos abaixo.

Arquivo getdata.php

Muito obrigado pela ajuda

12 de Outubro de 2015 - 01:20

Sua foto do perfil

Mauricio Programador

Olá Paulo,

O sistema de comentários aqui do Blog não permite códigos inteiros de paginas então ele bloqueou o código que você mandou.

Mande só o erro ou a dúvida para que eu possa lhe ajudar.

Abraço.

19 de Outubro de 2015 - 15:47

Sua foto do perfil

adailton

ola mauricio tudo bom cara, eu tenho um probleminha simples de resolver sera que vc pode me dar uma forcinha ai cara e sobre uma variavel php que nao esta passando pro js ve se vc comprende segue o codigo:

<?php
$q = intval($_GET['q']);

$con = mysqli_connect('localhost','peter','abc123','my_db');
if (!$con) {
die('Could not connect: ' . mysqli_error($con));
}

mysqli_select_db($con,"banco_dados");
$sql="SELECT * FROM usuario WHERE id = '".$q."'";
$result = mysqli_query($con,$sql);

echo "<table>
<tr>
<th>nome</th>
<th>snome</th>
<th>idade</th>
<th>cidade</th>
<th>estado</th>
</tr>";
while($row = mysqli_fetch_array($result)) {
echo "<tr>";
echo "<td>" . $row['nome'] . "</td>";
echo "<td>" . $row['snome'] . "</td>";
echo "<td>" . $row['idade'] . "</td>";
echo "<td>" . $row['cidade'] . "</td>";
echo "<td>" . $row['estado'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysqli_close($con);

$teste = $row['nome'];

?>
?<script type="text/javascript">
???var mensagem = "<?php echo "<td>" . $row['nome'] . "</td>";?>";
???alert(mensagem);
??</script>

veja nas ultimas 8 linhas me retorna um alert mais sem dados nas variveis so retorna isso <td> </td>
é que preciso trabalharcom esses dados em um js entende.

vc sabe como posso passar esses vlores para o js?

24 de Abril de 2015 - 22:41

Sua foto do perfil

Mauricio Programador

Olá Adailton,

O que acontece ali e que o $row é um array e você não esta informando a posição do mesmo que você quer seja exibida.

Tente assim:

var mensagem = "<?php echo "<td>" . $row[0]['nome'] . "</td>";?>";

Abraço.

28 de Abril de 2015 - 10:12

Sua foto do perfil

adailton

caro mauricio sera que posso usar esse sistema em um ajax por exemplo tenho um banco de dados e tenho um php que faz um insert no banco de dados a cada 5 minutos pra gravar posicao x e y de uma variavel.

exemplo, um cadastro em php e um login em php e uma pagina que pega o login nome e posicao x e y do jogador e atualiza uma imagem com as posicoes.

isso e um jogo mutiplayer que tenho com html5 js. e queria saber se tem como rodar html5 dentro de um arquivo php.

07 de Abril de 2015 - 15:05

Sua foto do perfil

Mauricio Programador

Olá Adailton,

você pode sim fazer o insert via Ajax.

Independe da versão do HTML o PHP irá funcionar perfeitamente.

abraço.

08 de Abril de 2015 - 09:31

Sua foto do perfil

adailton

Queria saber se esse código esta em um JS ou em um php.

E se posso pegar esses códigos e usar em um JS puro.


Exemplo;
Var mensagem = "<?php echo $msg; ?;>";
Var a = mensagem;

Pra poder usar em outra a função JS.

05 de Abril de 2015 - 20:56

Sua foto do perfil

Mauricio Programador

Ola Adailton,

Este código esta sendo executado em um arquivos PHP.

Códigos em PHP foram criados para ser executados em arquivos com extensão .php.

Por isso o bom seria não usar o código PHP dentro de um arquivo JS, o bom seria rever esta necessidade.

abraço.

06 de Abril de 2015 - 09:39

Sua foto do perfil

Edson Linhares

Mauricio, tenho uma situação parecida, mas não está funcionando:

A linha: echo 'document.write("'.$row['idfilial'].','.$row['sigla'].'<br>");';
funciona certinho,

mas a linha: echo "x.options[i]=new Option(".$row['idfilial'].",".$row['sigla'].");";
Não funciona...


Banco de dados mysql:
DROP TABLE IF EXISTS `filial`;
/*!40101 SET @saved_cs_client = @@character_set_client */;
/*!40101 SET character_set_client = utf8 */;
CREATE TABLE `filial` (
`idfilial` int(11) NOT NULL,
`sigla` char(4) DEFAULT NULL,
PRIMARY KEY (`idfilial`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
/*!40101 SET character_set_client = @saved_cs_client */;

--
-- Dumping data for table `filial`
--

LOCK TABLES `filial` WRITE;
/*!40000 ALTER TABLE `filial` DISABLE KEYS */;
INSERT INTO `filial` VALUES (1,'MTZ'),(2,'SAO'),(3,'BEL'),(4,'MAO'),(5,'PVH'),(6,'MAB'),(7,'MCP'),(8,'BVB'),(9,'RBR'),(10,'GMI'),(11,'JPR'),(12,'VLH'),(13,'CWB'),(14,'CPQ'),(15,'BNU'),(16,'CCL'),(17,'STM');
/*!40000 ALTER TABLE `filial` ENABLE KEYS */;
UNLOCK TABLES;


Pagina, arquivo teste.php

<?php

// connect to the database
$mysqli = new mysqli("localhost", "admin", "1234", "db_filial");

/* check connection */
if (mysqli_connect_errno()) {
printf("Connect failed: %s\n", mysqli_connect_error());
exit();
}

//Dados de Filiais
$sql = "SELECT * FROM filial WHERE sigla <> 'MTZ' ORDER BY sigla ASC";
// execute the query
if (! $ret = $mysqli->query($sql))
{
printf("Error: %s\n", $mysqli->error);
return;
}

// close connection
$mysqli->close();
?>

<form name="myform">
<select name="Filial" id="Filial">
<option value='N' selected >Selecione a Filial</option>
</select>
</form>

<br>

<?php
echo '<script type="text/javascript">';
echo 'var x = document.getElementById("Filial");';
echo 'var i = 0;';

while($row = $ret->fetch_array()) {
echo 'i++;';

echo "x.options[i]=new Option(".$row['idfilial'].",".$row['sigla'].");";
//echo 'x.options[i]=new Option(i,i);';

//echo 'document.write("'.$row['idfilial'].','.$row['sigla'].'<br>");';
}
echo '</script>';
?>

24 de Novembro de 2014 - 09:56

Sua foto do perfil

Mauricio Programador

Olá Edson,

Da algum erro? Esta linha faz o que? Coloque mais detalhes do que você quer fazer.

abraço.

25 de Novembro de 2014 - 08:49

Sua foto do perfil

Renato

Amigo eu executo o código e a mensagem que aparece é: <?php echo $msg;?>, ao invés de aparecer o conteudo: Seja bem-vindo ao site"
Me ajude, por favor. Utilizo php 5.5.12 do Wamp Server

23 de Outubro de 2014 - 14:33

Sua foto do perfil

Mauricio Programador

Olá Renato,

Estranho, o seu arquivo esta rodando direto no localhost? o mesmo ta com extensão .php?

Aguardo.

Abraço.

24 de Outubro de 2014 - 09:13

Sua foto do perfil

Willians

Este post me ajudou muito, obrigado e que Deus o abençoe.

25 de Setembro de 2014 - 13:04

Sua foto do perfil

Victor Freitas

Olá Mauricio, tenho uma dúvida, como eu resgato uma variável php dentro de um arquivo .js? Vlw

24 de Setembro de 2014 - 14:08

Sua foto do perfil

Mauricio Programador

Olá Victor,

O padrão do PHP e ser executado dentro de arquivos .php, porém diz ai o que você quer fazer, pode ser que tenha outra maneira mais "correta" de se fazer.

Abraço.

25 de Setembro de 2014 - 09:46

Sua foto do perfil

Leonardo

Mauricio estou usando esse mesmo método só que para chamar uma função do php estou usando um setInterval(function(){var Teste = "<?php MudaImagem(); ?>");}, 3000); só que quando abro a página ele trava e não carrega. Tem ideia do que possa ser?

22 de Agosto de 2014 - 16:59

Sua foto do perfil

Mauricio Programador

Olá Leonardo,

não sei qual a sua intenção, porém se quiser chamar uma função do PHP depois de um intervalo de tempo, basta usar sleep.

Veja este post: Atrasar Execução do Código PHP

Se não for isso posta ai.

Abraço.

23 de Agosto de 2014 - 11:45

Sua foto do perfil

Alex

Bom Dia
Mauricio sabes dizer porque a comparação abaixo não funciona?
Mesmo sendo 'true' ele não imprime.
<?
print "<SCRIPT type=text/javascript>\n";
print "decisao = confirm('Tem certeza que deseja fechar?');</SCRIPT>\n";

$decisao = "<SCRIPT>document.write(decisao);</script>\n";

if($decisao == 'true'){echo 'decisao_1 =>'.$decisao;}
?>

Obrigado pela ajuda

17 de Julho de 2014 - 09:53

Sua foto do perfil

Mauricio Programador

Olá Alex,

na verdade este tipo de comparação não irá funcionar porque o PHP e interpretado no servidor, ja o JavaScript no navegador, isso significa que o valor da variável $decisao nunca terá o valor que foi passado pelo javascript.

Mas pelo que eu entendi que você quer fazer e pegar a resposta e fazer uma ação, faz isso direto no javascript, veja o exemplo:

decisao = confirm("Tem certeza que deseja fechar?");
if (decisao){
return true;
}else {
return false;
}

Abraço.

17 de Julho de 2014 - 10:25

Sua foto do perfil

Ricardo

Tenho uma página .PHP e outra .js..
A .js manda um Ajax para direcionar ao .PHP:

Ajax.simpleLoad(CONF_PATH + "busca.php",'salva_busca', "POST", Ajax.encodePostParameters(p), false, Configuracao.refreshAcesso);

Na página busca.php eu tenho:
$valor = 5;
print "<input type='hidden' id='valor' name='valor' value='5'>;";

Depois que sai da PHP, volta para js, mas não consigo resgarar o valor que estava na PHP para JS.
Alguma solução?

24 de Junho de 2014 - 11:43

Sua foto do perfil

Mauricio Programador

Olá Ricardo,

Você terá que usar o método de retorno, e isso vai depender de qual biblioteca você esta usando. Mas se seria algo do tipo:

ajax.responseText;

Abraço.

25 de Junho de 2014 - 12:27

Sua foto do perfil

Ederson

A unica forma que consegui fazer a variável PHP ser lida no javascript foi, com o uso do alert por exemplo:

alert(" '.$var.' ");

Ou seja: Aspas duplas, aspas simples, ponto antes da variável e o fechamento em espelho.

24 de Maio de 2014 - 21:23

Sua foto do perfil

Mauricio Programador

Olá Ederson,

ele funciona desta forma também:

alert("<?php echo $msg;?>");

Porém o conteúdo da variável do PHP já tem que estar definido antes de carregar o Javascript.

Abraço.

26 de Maio de 2014 - 10:47

Sua foto do perfil

Leandro Santos

Estou com uma dúvida parecida, mas no meu caso eu quero passar um valor de uma variável no php para uma variável usada em uma função JQuery. A diferença é que minha página está em um arquivo .php e a função em um arquivo .js.

A função é a seguinte:
<script type="text/javascript">
$(function(){
var meta = 95;
$( "#txtRealizado1" ).blur(function() {
if(parseFloat($('#txtRealizado1').val()) >= meta){
$('#lblIndSiiso1').text('Cumprido');
}else{$('#lblIndSiiso1').text('Descumprido');}
});

$( "#txtRealizado2" ).blur(function() {
if(parseFloat($('#txtRealizado2').val()) >= meta){
$('#lblIndSiiso2').text('Cumprido');
}else{$('#lblIndSiiso2').text('Descumprido');}
});
alert(meta);

});
</script>

o valor atribuído estaticamente à variável "meta" deve vir de um campo da página em php.
Desde já agradeço,

23 de Maio de 2014 - 13:10

Sua foto do perfil

Mauricio Programador

Olá Leandro,

por ele estar em um arquivo diferente não tem importância, e nos seu caso você nem precisa usar o PHP, usando so javascript você pode pegar o valor do campo e atribuir na variável.

Para pegar o valor de um campo com javascript use:

document.getElementById("NOME DO CAMPOS").value

Abraço.

23 de Maio de 2014 - 14:27

Sua foto do perfil

Leandro Santos

Boa tarde, Maurício.

Segui a sua dica, porém quando dou um "alert" na variável, retorna que ela está indefinida e a função deixou de funcionar.

26 de Maio de 2014 - 10:56

Sua foto do perfil

Mauricio Programador

Verifique se tem algum valor dentro do campos, e se você esta criando a variável de forma correta.

Abraço.

26 de Maio de 2014 - 10:57

Sua foto do perfil

Maurício

Olá xará!
Tenho uma duvida que está me deixando muito preocupado e gostaria de saber se você poderia me ajudar.
Como recupero essas informações em um código PHP:

<script type="text/javascript">
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;

function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var brasília = new google.maps.LatLng(-14.925, -56.833);
var myOptions = {
zoom: 4,
mapTypeId: google.maps.MapTypeId.HYBRID,
center: brasília
}

map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
directionsDisplay.setMap(map);
}

function calcRoute() {
var start = document.getElementById("start").value;
var end = document.getElementById("end").value;
var waypts = [];

var checkboxArray = document.getElementById("waypoints");
for (var i = 0; i < checkboxArray.length; i++) {
if (checkboxArray.options[i].selected == true) {
waypts.push({
location:checkboxArray[i].value,
stopover:false});
}
}

var request = {
origin: start,
destination: end,
waypoints: waypts,
optimizeWaypoints: true,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};

directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
var route = response.routes[0];
var summaryPanel = document.getElementById("directions_panel");
summaryPanel.innerHTML = "";

// Para cada rota, exibir informações resumidas.
for (var i = 0; i < route.legs.length; i++) {
var routeSegment = i + 1;
summaryPanel.innerHTML += "<b>Rota: </b><br /> Partindo de</br> ";
summaryPanel.innerHTML += route.legs[i].start_address + "</br> Com destino à </br>";
summaryPanel.innerHTML += route.legs[i].end_address + "<br />";
var variavelParaPHP = summaryPanel.innerHTML += route.legs[0].distance.text + "<br /><br />";
//Variavel criada para reuperar no PHP
}
}
});
}
</script>

23 de Novembro de 2013 - 22:42

Sua foto do perfil

Mauricio Programador

Olá xará,

desculpe pela demora hehehehe.

Já tem um post aqui no blog sobre isso como passar variável do javascript para o PHP, dai fica bem fácil adaptar.

espero que ajude qualquer coisa post aí.


abraço.

25 de Novembro de 2013 - 15:31

Sua foto do perfil

Bruno Santos

Mauricio, como posso fazer o inverso, passar o valor de uma variavel em javascript para uma página PHP, tem alguma forma assim simples de se fazer?

25 de Outubro de 2013 - 01:48

Sua foto do perfil

Mauricio Programador

Olá Bruno,
é possível sim, ficaria desta forma:

<script type="text/javascript">
 var variaveljs = 'Mauricio Programador';
</script>

<?php
 $variavelphp = "<script>document.write(variaveljs)</script>";
 echo $variavelphp;
?>

É um ótimo post esta sua dúvida, vou criar para ficar documentado.

Obrigado pelo comentário, espero ter ajudado grande abraço.

25 de Outubro de 2013 - 09:53

Sua foto do perfil

Junior Bezerra

E se fosse para abrir uma janela modal jquery com uma pergunta e se sim emitir a variável sim em php e se for não apenas fechar a janela.

06 de Outubro de 2013 - 22:09

Sua foto do perfil

Mauricio Programador

Olá Junior,

não entendi muito a sua pergunta. Pelo que entendi você quer abrir uma janela com jquery e pegar os dados com PHP.
Se for isso vai depender de como você esta usando o jquery, se puro ou com algum plugin.

Geralmente com os Plugins eles oferecem funções que você informa os dados que quer passar como parâmetro. Ex.: $.post('janela.php',{nome: 'Mauricio'}.

Abraço.

07 de Outubro de 2013 - 09:43

Sua foto do perfil

Thales Cardarelli Zanetti

Muito bom... Voce sabe me dizer por exemplo como que uma variavel em php recebe um valor do usuario ??
Ex: Qual a sua idade ?? (o usuario tem que digitar o valor e esse valor ser salvo na variavel criada)
Muito obrigado pela ajuda... Abrss

05 de Outubro de 2013 - 11:34

Sua foto do perfil

Mauricio Programador

Olá Thales,

o PHP usa basicamente dois métodos para receber dados do usuário um é o $_GET e o outro é o $_POST.

Você deve criar um formulário em HTML onde o usuário irá digitar a idade é a partir dai é só enviar para uma página do PHP que irá pegar estes dados é atribuir este valor digitado a uma variável.

Ex.:

$idade = $_POST['campo_formulario'];

Espero ter ajudando, grande Abraço.

06 de Outubro de 2013 - 12:58

Sua foto do perfil

Thales Cardarelli Zanetti

Muito obrigado pelo esclarecimento, Mauricio... Sou novo no Php e em programação. Vou testar o formulario aqui agora.. Obrigado mesmo e um bom dia...

07 de Outubro de 2013 - 11:11

Sua foto do perfil

Mauricio Programador

Claro, amigo precisando estamos aqui hehehehehe.

grande abraço.

07 de Outubro de 2013 - 11:12

Sua foto do perfil

Jardel

CARA,JÁ TAVA QUASE ENDOIDANDO,VALEU!!!

03 de Outubro de 2013 - 14:52

NEWSLETTER

Receba dicas de programação
em seu e-mail

TWITTER

Acompanhe tudo o que rola
com Mauricio Programador

NEWSLETTER