How to pass data from one input to another with html and javascript?

Question

How to pass data from one input to another with html and javascript?

Navigation

#1 by (2 votes)
#2 by (0 votes)
#3 by (0 votes)

0

I have a problem with this, I researched a lot and I could not solve my problem. I hope you can help me!

I have a page (in html) with a form. I would like the value placed on the input of the first form, when clicking Submit, to be placed in the input value of the second form automatically.

This is the first code on the first page. I got this code from a question here in the gringa overflow.

    <html>
<head>

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

</body>
</html>

The second page would be this:

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

It works, but the problem is that I would like the value of the first input to be placed in the same form, on the second page, I just can not fit the codes.

To be able to put id="write" in here, in order to happen what I'm trying to do.

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

Thank you guys, I know this is a very cool community, even without signing up, I've already found an answer to all my questions with you!

javascript html jquery input

asked by anonymous 21.09.2016 / 16:27

3 answers

0

You have not mentioned which server-side language you are using to process this data (or maybe you do not even have one to quote). So the solution I would give for this would be using localStorage .

You save the value on the current page and then capture the next.

#pagina_1.html

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

#pagina_2.html

var valor = localStorage.getItem('serialNumber')

$('#write > p').val('O valor é igual a :' + valor);

21.09.2016 / 17:02

0

You can do this using just JavaScript and 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><scriptsrc="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><scriptsrc="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>

21.09.2016 / 19:19

How to select all the columns in the database C # ComboBox and SQL

score 2 · Accepted Answer

If you wanted to do this in PHP it's pretty simple!

It would look like this:

Page1.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>

Page2.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>

It's important to remember that PHP is SERVER-SIDE, so you need a local server there to run !! If you do not handle this, send me the comments I give you a force!