0

Galera eu preciso fazer com que quando o usuário clicar no botão "Enviar" automaticamente ele seja redirecionado para outra página com todos os dados digitados pelo usuário como: e-mail, senha, nome, etc(Utilizando método "get").

Acontece que eu tentei fazer e só conseguir redirecionar para a outra página, estando a mesma vazia.

Segue abaixo meu arquivo HTML:

<form action="dados.html" method="post">
		
		<input type="text" id="cNome" name="tNome" size="20" maxlength="20" placeholder="       Digite Seu Nome"/><br><br>
        
		<input type="email" id"cEmail" name="tEmail" size="30" maxlength="30" placeholder="       Digite Seu E-mail"/><br><br>
        
       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type="date" id="cData" name="tData"/><br><br><br>
        
        Filme:
        <select id="cFilmes">
        	<option >Transformers: O Último Cavaleiro</option>
            <option >Planeta dos Macacos: A Guerra</option>
            <option >Velozes e Furiosos 8</option>
            <option >Alien: Paradise Lost</option>
            <option >Carros 3</option>
            <option >Logan</option>
        </select><br><br><br><br><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		<input type="submit" value="Enviar"/>
		<input type="reset" value="Cancelar"/>

	</form>

Segue abaixo a página de redirecionamento:

<!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" />
<title>Dados</title>
<script type="text/javascript">

var nome, email, data, filme;

nome = document.getElementById("cNome").value;
email = document.getElementById("cEmail").value;
data = document.getElementById("cData").value;
filme = document.getElementById("cFilmes").value;

document.write("Obrigado, " +nome+ "\nSegue abaixo seus dados:\nE-mail: " +email+ "\nData de nascimento: \n" +data+ "Filme escolhido: " +filme)


</script>
</head>

<body>

</body>
</html>

Sou iniciante nessa área e já tentei ver diversos tutorial pelo youtube mas a maioria é utilizando HTML junto de PHP, JQUERY, JAVA, linguagens que não tenho o mínimo conhecimento, quero que seja apenas utilizando HTML e JS.Dei uma olhada em outras perguntas e já tem parecido mas quero pedir nessa se tiver uma forma mais simples estarem colocando ela pois como sou iniciante não entendi muito bem com as outras perguntas, porém se não tiver outra forma mais simples explicar o mais detalhado possível, ficarei muito agradecido.

4
  • Você quer trafegar informações de uma pagina a outra usando apenas javascript? 25/01/2017 às 3:35
  • Utilizando HTML e JS, não sei se é possível com apenas um dos dois. 25/01/2017 às 3:36
  • Na teoria não é o ideal, mas tem como fazer sim 25/01/2017 às 3:38
  • Como estou começando agora só vou aprender outras linguagens mais na frente,por favor me mostre esse método. 25/01/2017 às 3:39

1 Resposta 1

2

Após o redirecionamento, o conteúdo da página antiga é apagado. Você não pode mais acessar nenhum elemento via JavaScript. Por isso seu código não funciona.

Os valores enviados por meio de formulários utilizando os métodos POST, GET... são destinados a parte da aplicação que está rodando no lado servidor, por isso não ficam visíveis(diretamente) em outra página HTML.

Porem, após submeter o formulário(redirecionar), você poderá acessar a URL completa através do JavaScript. E dessa forma, obter os dados "fornecidos" via GET para a sua página estática.

Para fazer isso, você primeiramente deverá alterar o método do formulário para GET. Conforme código abaixo:

...
<form action="dados.html" method="get">
...

Na segunda página, você deverá obter e processar a URL, separando os valores. Na versão em inglês desse site, encontrei uma função implementada para este fim:

function getParameterByName(name, url) {
    if (!url) {
      url = window.location.href;
    }
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

Então o código da sua segunda página deve ficar assim:

    <!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" />
        <title>Dados</title>
        <script type="text/javascript">


   function getParameterByName(name, url) {
        if (!url) {
          url = window.location.href;
        }
        name = name.replace(/[\[\]]/g, "\\$&");
        var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
            results = regex.exec(url);
        if (!results) return null;
        if (!results[2]) return '';
        return decodeURIComponent(results[2].replace(/\+/g, " "));
    }



    var nome, email, data, filme;

    nome = getParameterByName("cNome");
    email =  getParameterByName("cEmail");
    data =  getParameterByName("cData");
    filme =  getParameterByName("cFilmes");

    document.write("Obrigado, " +nome+ "\nSegue abaixo seus dados:\nE-mail: " +email+ "\nData de nascimento: \n" +data+ "Filme escolhido: " +filme)


    </script>
    </head>

    <body>

    </body>
    </html>

Só mais uma observação. Essa solução é meio gambiarra, pois o que você quer fazer não é muito usual. Nem consigo imaginar o objetivo. Se é iniciante e está aprendendo a programar. Recomendo dar uma olhada nas linguagens server-side.

2
  • O motivo é simples, estou fazendo curso de informática para internet e o professor passou um trabalho para que o usuário possa escolher lugar da cadeira do cinema, ingresso entre outras coisas, e tive essa ideia para aparecer as informações ao usuário.No entanto essas linguagens server-side, é tipo java, php ? 25/01/2017 às 3:51
  • A função criada fica apenas solta dentro do script ou precisa ser adicionada em algum lugar como em "onClick" por exemplo? Pois coloquei ela como você falou e continua sem aparacer nada, aparecendo os dados na URL da página. 25/01/2017 às 3:56

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .