1

Galera eu to com um problemão, ja pesquisei bastante e não consegui resolver o meu problema. Eu espero que vocês consigam me ajudar!

Eu tenho uma página (em html) com uma form. Gostaria que o valor colocado no input da primeira form, ao clicar em Submit, fosse colocado no valor do input da segunda form automaticamente.

Esse é o primeiro código, da primeira página. Tirei esse código de uma pergunta aqui no overflow das gringa.

    <html>
<head>

<form action="display.html" method="GET">
    <input type="text" name="serialNumber" />
    <input type="submit" value="Submit" />
</form>

</body>
</html>

A segunda página seria essa:

    <html>
<head>
</head>
<body>
    <div id="write">
        <p>O valor é: </p>
    </div>
  
    
    <script>
// from display.html
document.getElementById("write").innerHTML = window.location.search; // you will have to parse
                                                                     // the query string to extract the
                                                                     // parameter you need
																	 
</script>
</body>
</html>

Ele funciona, mas o problema é que eu gostaria que o valor do primeir input fosse colocado dentro da mesma forma, na segunda página, só não consigo encaixar os códigos.

Para conseguir colocar o id="write" aqui dentro, pra acontecer o que eu estou tentando fazer.

 <input type="text" name="serialNumber" />

Muito obrigado galera, eu sei que essa é uma comunidade muito bacana, mesmo sem me inscrever, eu ja achei resposta para todas as minhas dúvidas com vocês!

8
  • 2
    O que você já tentou e qual erro aconteceu?
    – Ricardo
    Commented 21/09/2016 às 14:29
  • Eu não achei nada específico pra resolver o que eu preciso, php pra mim é muito confuso ainda, não consegui fazer funcionar! Commented 21/09/2016 às 14:38
  • Já tentou usar session? Commented 21/09/2016 às 14:53
  • Gente, eu editei a pergunta, agora eu acho que vai ficar mais compreensível minha dúvida. Commented 21/09/2016 às 14:58
  • @GabrielMattoso dê mais detalhes, por favor. Você usa alguma linguagem server-side (php, nodejs, C#) para processar esses dados? Você quer fazer somente no lado do cliente (navegador, com javascript e html)? Commented 21/09/2016 às 15:08

3 Respostas 3

2

Caso você queria fazer isso em PHP é bem simples!

Ficaria assim:

  • Pagina1.html

<!DOCTYPE html>
<html lang="pt">
<head>
	<meta charset="UTF-8">
	<title>Teste</title>
</head>
<body>
	<!-- Aqui você trocaria o nome do 'pagina2.php' para o nome da sua segunda pagina, porém ela precisa estar em .php, caso não esteja é so renomear! -->
	<form action="pagina2.php" method="post"> 
		<label for="nome"></label>
		<input type="text" placeholder="nome aqui" name="nome" id="nome">
		<input type="submit" value="Enviar">
	</form>
</body>
</html>

  • Pagina2.php

<?php 

$nome = $_POST['nome']; // Aqui estou pegando via POST da outra página e atribuindo o valor na variavel nome

?>

<!DOCTYPE html>
<html lang="pt">
<head>
	<meta charset="UTF-8">
	<title>Teste</title>
</head>
<body>
	<form action="pagina2.php" method="post">
		<label for="nome"></label>
		<!-- Dentro do value eu abri uma tag php para printar dentro do input o valor da variável nome -->
		<input type="text" placeholder="nome aqui" name="nome" id="nome" value="<?php echo $nome ?>">
		<label for="nome"></label>
		<input type="email" placeholder="email aqui" name="email" id="email">
		<input type="submit" value="Enviar">
	</form>
</body>
</html>

É importante lembrar que o PHP é SERVER-SIDE, então você precisa de um servidor local ai para rodar!! Caso não manje disso, manda ai nos comentários que eu te dou uma força!

11
  • 2
    O AP não informou PHP na pergunta. Commented 21/09/2016 às 15:31
  • @WallaceMaxters Ele editou a pergunta, mas tinha citado que tentou fazer em php, mas não conhecia muito. Vou deixar a resposta por alguns minutos, caso ele não se manifestar eu retiro! Commented 21/09/2016 às 15:34
  • Giovanni, se eu pegar esses dois códigos, criar os dois arquivos e colocar no servidor do meu site apenas pra testar, eles vão rodar?! Commented 21/09/2016 às 15:37
  • @GabrielMattoso Sim! Você só precisa salvar os arquivos com o mesmo nome. Commented 21/09/2016 às 15:39
  • Salvar os dois arquivos com o mesmo nome né?! Commented 21/09/2016 às 15:41
1

Você não citou qual é a linguagem server-side que você está usando para processar esses dados (ou talvez nem tenha uma para citar). Então a solução que eu daria para isso seria usando localStorage.

Você salva o valor na página atual e, em seguida, captura na próxima.

#pagina_1.html

$('[type=serialNumber]').keyup(function () {
     localStorage.setItem('serialNumber', this.value);
});

Em seguida:

#pagina_2.html

var valor = localStorage.getItem('serialNumber')

$('#write > p').val('O valor é igual a :' + valor);
3
  • Parece fazer mais sentido do que eu estava fazendo, mas desculpe minha ignorância, como isso ficaria no código, estou muito confuso. Commented 21/09/2016 às 15:13
  • Olha, eu editei. Eu respondi acreditando que você tenha um conhecimento sobre Javascript ou jQuery. Pelo menos o que ficou claro para mim, eu pude ajudar. Se tem mais algum detalhe, edite sua pergunta, para que nós possamos dar mais detalhes. Commented 21/09/2016 às 15:23
  • Wallace, muito obrigado. Eu realmente sou muito leigo em Javascript e jQuery. Agora ficou um pouco mais fácil para compreender, vou dar uma olhada com calma e se conseguir eu te aviso, muito obrigado! Commented 21/09/2016 às 15:30
0

Dá pra fazer isso usando apenas JavaScript e HTML:

script.js

function gohome(){
    window.location='form1.html';
}
function save(){
    window.localStorage.setItem('campo1', $('#campo1').val());
}
function load(){
    $('#campo2').val(window.localStorage.getItem('campo1'));
}
function erase(){
    window.localStorage.removeItem('campo1');
}

form1.html

<!DOCTYPE html>
<html>
    <head>
        <title>Form1</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
        <script src="script.js"></script>
    </head>
    <body onload="save()" onunload="save()">
        <form name="form1" id="form1" action="form2.html" method="post">
            <input id="campo1" name="campo1" value="ValorCampo1"><br>
            <br>
            <button type="submit" id="form1-submit">Confirmar</button>
        </form>
    </body>
</html>

form2.html

<!DOCTYPE html>
<html>
    <head>
        <title>Form2</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
        <script src="script.js"></script>
    </head>
    <body onload="load()" onunload="erase()">
        <form name="form2" id="form2" action="form1.html" method="get">
            <input id="campo2" name="campo2"><br>
            <br>
            <button type="button" id="form2-submit" onclick="gohome()">Confirmar</button>
        </form>        
    </body>
</html>

Você deve fazer log-in para responder a esta pergunta.

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