Send form as variable in external javascript

Asked

Viewed 38 times

-1

I want to receive value from a Variable coming from a form, and that this variable appears in alert on another page.

My code is simple but not working.

First the Index code

<head>
<title>Formulário para gerar variável</title>

<script language="text/JavaScript" src="newtag.js"></script>

</head>
<body>
<form method="post" action="_log.html">
Digite seu nome:<br/>
<input type="text" name="texto" id="txt"/>
<input type="submit" value="Enviar" onclick="advice001()" />
</form>
</body>
</html>

Javascript code (separate code)

var texto = document.getElementById("txt"); 

function advice001(){
  alert("Seu texto",texto);
}

And finally, the result to be visible in the Alert bar

<html>
<head>
<script language="JavaScript" src="newtag.js"></script>


<title>Resultado</title>
</head>
<body>
<form>

<input type="button" value="Aperte aqui para ver seu nome" onclick="advice001()"/>
</form>
</body>
</html>

I count on your help! Thank you!

javascript

  • this line is "picking up" only the element, to grab the content use: var texto = document.getElementById("txt").value. Second, move this line inside the Function and before the alert, because you need to see the content when you click. To read another page, search for method "GET" and "query string"

  • Hello. Trying to Insert into Function, does not activate Alert and also var text = Document.getElementById("txt"). value is not receiving.

1 answer

0

You will need to store the value of input txt, the way you did it won’t work, because the javascripit is a Front-end language, the text variable and input do not exist in _log.html. But to accomplish this you can use The HTML web storage provides two objects to store data in the client:

  • window.localStorage - stores data without an expiration date
  • window.sessionStorage - stores data for a session (data is lost when the browser tab is closed)

Is used setItem(item, value) to name an item and getItem(item) to 'grab' the item. To remove the item is used removeItem(item) and to delete the entire Storage uses clear().

And to accomplish all this in one function, you would use:

To sessionStorage:

Javascript code (separate code) (newTag.js)

function advice001(){
    if (window.location.href.includes('index.html'){
  sessionStorage.setItem('nome', document.getElementById("txt").value) 
  alert(sessionStorage.getItem('nome'));
    } else if (window.location.href.includes('_log.html') {
        alert(sessionStorage.nome)
    }
}

and To localStorage:

Javascript code (separate code) (newTag.js)

function advice001(){

    if (window.location.href.includes('index.html'){
        localStorage.setItem('nome', document.getElementById("txt").value)
alert(localStorage.nome)
    } else if (window.location.href.includes('_log.html'){
    alert(localStorage.getItem('nome')); 
}

I hope I’ve helped

  • this is a solution but, since html has input in a form tag with action, it would make much more sense to "post" the code to the next page, without having to store the value. Moreover, with the example of sessionStorage if you run this code once and try to do it again it will only always display the first name that was stored

  • Sorry. Thank you but I don’t understand localStorage either. And the codes don’t generate an Alert, even if tested on the page itself

  • Look at the best method would be with Storage accompanied by window.location.href (I will edit my answer)

Browser other questions tagged javascript

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