Javascript PHP e JS - Select enviar um valor para o PHP

assinante · 25 de agosto de 2020

Estou estudando sobre tradução de uma página web e para isso quero usar o JS e o PHP! Vamos ao meu projeto... Na minha página terá um select que quando selecionado o idioma, automaticamente, a página muda para o novo idioma. Meu código está funcionando, porém, não sei como enviar o valor do JS para o PHP! Não quero ficar mudando via $_GET pela url! Vou deixar meu código.

<?php
session_start(); 

// Verifica se há um $_GET com um novo indioma!
        if(!isset($_GET["lang"])){

// Verfica antes de definir um indioma padrão, se já há um definido! 

        if(!isset($_SESSION['traducao'])){
           $_SESSION['traducao'] = 'br';
        }

// Caso, tenha um $_GET, salva ele na $_SESSION['traducao']!

        }else{
          $_SESSION['traducao'] = $_GET["lang"];
        }

// Faz a tradução!

      if ($_SESSION['traducao'] == 'br') {

         $idioma = 'Mudar Idioma'; 
         $texto = 'teste';

      }elseif ($_SESSION['traducao'] == 'en') {

         $idioma = 'Change language';
         $texto = 'test';         

      }else{

          echo "error";
      
      }


?>   


<!DOCTYPE html>
<html lang="pt_br">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

    <title>Hello, world!</title>
  </head>
  <body class="container py-5">


  <select id="language" onChange="update()">
      <option value="pt">Português</option>
      <option value="en">English</option>
  </select>

    <script type="text/javascript">
      function update() {
        var select = document.getElementById('language');
        var option = select.options[select.selectedIndex];

        var valor  = option.value;
        console.log(valor);
      }

      update();
    </script>

</body>
</html>

adicionado 2 minutos depois

Como podem ver eu envio o valor das opções do select para o console! Porém, queria enviar para o PHP e tornar esse sistema funcional. Aguardo uma abençoada ajuda !

DiF · 25 de agosto de 2020

@assinante Nesse caso, você precisa usar o ajax.

Dá para fazer em javascript puro, mas é bem mais complicado... por isso eu recomendo usar o jQuery nesse quesito.

Algo desse tipo:

$(document).ready(function(){
    $("#language").change(function(){
        var selectedCountry = $(this).children("option:selected").val();
        
        $.ajax({
            url: "processaDados.php",
            method: "GET",
            dataType: "HTML",
            data: {"lang": selectCountry}
         }).done(function(retorno){
              $("body").html(retorno);
        });  
    });
});

Basicamente, toda vez que selecionar um option do select, ele vai fazer uma requisição assíncrona para o arquivo processaDados.php(com os códigos que você postou em php).

A função que faz isso é $.ajax() onde cada atributo ali respectivamente são:

a url do arquivo requisitado, o método de envio, o tipo de dado e o dado em si.

A função done() serve para executar alguma coisa quando terminar a requisição e tudo estiver OK.

No caso do exemplo ali eu simplesmente atribui o conteúdo da requisição no elemento body...

Aqui no fórum tem um tópico sobre tradução de páginas na qual eu ajudo um usuário. O método usado é com session e um arquivo php onde dentro desse arquivo contém todos os textos da página atribuido a variáveis. Desa forma você pode fazer múltiplas traduções com arquivos de idioma.

Leia este tópico para entender melhor o que acabei de dizer acima

assinante · 25 de agosto de 2020

@DiF Não consegui incorporar isso corretamente em meus codigo, poderia me demostrar? Eu tentei aqui porém deu em nada

DiF · 26 de agosto de 2020

@assinante Sugiro você ler o tópico que eu postei ali em cima. A partir do post #05.

Tem até imagens mostrando os arquivos de tradução.

Basicamente o sistema de tradução funciona com arquivos para cada idioma.

Ou seja, vai existir um br.php, usa.php.

Dentro desses arquivos, você vai usar criar um array vazio e depois preencher ele com os textos. por exemplo

br.php

<?php
   $conteudo = array();

   $conteudo['idioma'] = 'Mudar Idioma';
   $conteudo['texto'] = 'teste';

usa.php

<?php
   $conteudo = array();

   $conteudo['idioma'] = 'Change language';
   $conteudo['texto'] = 'test';

Como podes ver, ambos arquivos br.php e usa.php contém um array vazio e as variáveis iguais, o que muda é o idioma.

Estas variáveis, você vai colocar no seu site.. o conteúdo delas serão os textos do seu site. então antes de tudo, precisas fazer uma condição para testar qual idioma foi o selecionado.

Aqui está um exemplo de como você pode fazer esse teste:

Primeiro você testa se valor do GET está vazio. se estiver preenche com um valor.

Cria uma session para o idioma selecionado. isso ficará gravado no cookie.

Depois use um switch case para selecionar os arquivos responsáveis pelos textos de cada idioma.

Agora junta tudo isso, com a requisição assíncrona do ajax que eu postei no post #02, onde permite enviar um dado via GET ou POST sem mostrar parâmetros e eliminar o "atualizar" da página.

De qualquer forma, é melhor você ler aquele tópico que eu indiquei do inicio ao fim, que é justamente o que você quer fazer.