Pass values from one form to another

Asked

Viewed 651 times

1

I started learning code recently and created these two forms in HTML, in which I need to take the values that were filled in the first form, and pass them to the second.

How can I do that?

1st Form:

<html>
 <form>
  <head>
   <body>
    <table> 
    <tr>
     <td>
     <label>Quantidade de dados a serem replicados(MB):</label>
     </td>
     <td>
     <input type="text" name="qnt" id="qnt" />
     </td>
    </tr>
    </table>
   </body>
  </head>
 </form>
</html>

2nd Form:

<html>
 <form>
  <head>
   <body>
    <table>
    <tr align="center">  
     <td align="left" style="width: 46%">Quantidade de dados a serem replicados(MB):</td>
     <td align="right" style="width: 22%" id="qnt"></td>    
    </tr>
    </table> 
   </body>
  </head>
 </form>
</html>
html form

  • What would be the application? Using javascript, or a server-side language? Depending on the application one can do otherwise...

  • I have to do in javascript, but I’m learning to act, I don’t have much knowledge.

1 answer

1

To do this you will need to use a little Javascript! With it you can use the sessionStorage (a feature of HTML5) to help you in this task. Remember that it can still generate a certain problem with brownser ancient:

On the first page you will add the following code:

HTML: 

<input type="text" name="qnt" id="qnt" />
<input type="button" value="Salvar" id="btn" />

Note: I added a button to help get the value, the more can be used keyup input text. And you can also use the window.location to redirect you after clicking save =]

Javascript:

(function() {

    var btnElement = document.getElementById('btn');
    var qtdElement = document.getElementById('qnt');

    btnElement.addEventListener('click', function(){
        sessionStorage.setItem('qtdMb', qtdElement.value);
    });

})();

On the second page you will use the following code:

HTML (check your HTML posted above, it is tagged html lines up to a form):

<table>
    <tr align="center">
        <td align="left" style="width: 46%" id="exibir">Quantidade de dados a serem replicados(MB):</td>
        <td align="right" style="width: 22%" id="qnt"></td>
    </tr>
</table>

Javascript:

(function() {
    var element = document.getElementById('exibir');
    var value = sessionStorage.getItem('qtdMb');
    element.innerHTML = element.innerHTML + value;        
})();

To see working, just access this jsfiddle1 add the value, and in sequence open this jsfiddle2 and see its result. Note: in jsfiddle I used the localStorage for the session not sure between the pages, but the concept is the same the difference is that one gurda in the session and the other in the brownser. Another way to do this is also by sending your information via URL but it’s a little more work and I’ve answered on this question :)

Browser other questions tagged html form

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