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

Asked

Viewed 11,941 times

1

Guys I have a big problem, I’ve researched a lot and I couldn’t solve my problem. I hope you can help me!

I have a page (in html) with a form. I would like the value placed in 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 from the first page. I took 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 put in the same way, on the second page, I just can’t fit the codes.

To get the id="write" inside, to happen what I’m trying to do.

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

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

javascript jquery html input
  • 2

    What you’ve tried and what mistake happened?

  • I did not find anything specific to solve what I need, php for me is very confusing yet, I could not make it work!

  • Ever tried to use session?

  • Guys, I edited the question, now I think it will be more understandable my question.

  • @Gabrielmattoso give more details, please. Do you use any server-side language (php, nodejs, C#) to process this data? You want to do only on the client side (browser, with javascript and html)?

  • Only with Javascript and Html, the data will be processed in the second form with an autoresponder, I just want to pass the name of a superficial form to the other of the autoresponde, where la the person himself will complete the data and send.

  • Since it is a GET request, the parameter will be in the url. On its second page, extract the value of the parameter in the url, this question can help.

  • I’ll take a look at the question Renan, thanks man!!

Show 3 more comments

3 answers

2


If you wanted to do this in PHP it’s quite simple!

Would look like this:

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

  • 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 is important to remember that PHP is SERVER-SIDE, so you need a local server there to run!! In case you don’t know it, send in the comments that I give you a strength!

  • 2

    AP did not enter PHP in the question.

  • @Wallacemaxters He edited the question, but had quoted what he tried to do in php, but did not know much. I’ll leave the answer for a few minutes, in case he doesn’t manifest I withdraw!

  • Giovanni, if I take these two codes, create the two files and put them on the server of my site just to test, they will run?!

  • @Gabrielmattoso Yes! You just need to save the files with the same name.

  • Save the two files with the same name right?!

  • The first as any name, both the second and the page 2.php

  • Yes I understood, because there is the call in the code of the first right?! But Giovanni, it worked perfectly, I was even impressed with the simplicity! Besides working I understood the operation of the post, very cool even!

  • Gabriel, don’t forget to dial his response in case you’ve solved your problem

  • @Gabrielmattoso Exactly! PHP is pretty cool to catch the taste of the haha thing, but continues studying JS that is very high nowadays ;)

  • Thank you very much for your help! God bless.

  • How do I mark as solved? kkkkkk

Show 6 more comments

1

You haven’t mentioned which server-side language you’re using to process this data (or maybe you don’t even have one to cite). So the solution I would give to this would be to use localStorage.

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

#pagina_1.html

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

Next:

#pagina_2.html

var valor = localStorage.getItem('serialNumber')

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

  • It seems to make more sense of what I was doing, but excuse my ignorance, how that would look in the code, I’m very confused.

  • Look, I edited it. I responded by believing that you have a knowledge about Javascript or jQuery. At least what became clear to me, I could help. If you have any more details, please edit your question, so that we can give more details.

  • Wallace, thank you very much. I’m really very lay in Javascript and jQuery. Now it’s a little easier to understand, I’ll take a look at it calmly and if you can I warn you, thank you very much!

0

You can do this using Javascript and HTML only:

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>

Browser other questions tagged javascript jquery html input

You are not signed in. Login or sign up in order to post.