Pass values from one form to another

1

I started learning code a short time ago and created these two forms in HTML, in which I need to get the values that were filled in the first form, and pass them to the second one.

How can I do this?

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>
    
asked by anonymous 22.10.2015 / 00:11

1 answer

0

To do this you will have to use a little JavaScript! With it you can use sessionStorage (one HTML5 feature) to help you with this task. Note that this may still cause a problem with old brownser :

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've added a button to help get the value, plus the keyup of the input text can be used. And you can also use window.location to redirect you by 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 aligns to 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 it working, just visit this jsfiddle1 add the value, and then open that jsfiddle2 and see the result. Note: in jsfiddle I used localStorage because the session is not right between the pages, the more the concept is the same the difference is that one session gurde and the other one in the brownser. Another way of doing this is also sending your information via URL plus it is a bit more laborious and I already answered that question :)

    

22.10.2015 / 02:30