Values from one form to another

Asked

Viewed 560 times

1

In the index.html will have a pre-form with name, email, city and UF.

I will need to take this data and play for another form that will be in another html file.

I have a certain notion in jQuery, but I wonder if I will have to use ajax or sessionStorage or something else.

javascript jquery html ajax form
  • 1

    This won’t be possible if you want to take the digital data in the form1.html form and want to go to formula2.html and that data is there. For this, you will need to use a backend language and a database, such as PHP and Mysql.

  • Oloco sera?? I already researched about but I thought it was nice to post here and see if I could find a help...I’ll research more

  • If you were on the same page you could manage with jQuery, but as you will leave form 1 and go to 2, then you will have to use something to store the data and display on another page. The best way would be a backend language with database. An output maybe for you, may be the use of cookies, but I don’t think a good one.

  • yes the use of coockie, why I will not use this data to the point of creating a database, the user will fill in the data and click register, will open another page with a larger and more complete form and will already be filled with the data of the previous form, I will no longer use this data, so I prefer them to be deleted with the cache... I am studying about localStorage to recover data on another page

2 answers

2

You can try that

1st Form : form.html

<body>
    <form action="formB.html" method="get">
      Name: <input type="text" name="nome">
      <input id="submit_button" type="submit" value="PAGINA B &raquo;">
    </form>
</body>

2nd Form : formB.html

<body>
    <form action="processar.php" method="post">
      Nome: <input type="text" name="nome">
      Idade: <input type="text" name="idade">
      <input type="submit" value="SALVAR DADOS">
    </form>
   <script type="text/javascript">
       var query = window.location.search.substring(1);
       var Field=query.split("=");
       document.getElementById("nome").value = Field[1];
   </script>
</body>

Then you can use a regular expression to remove + of expression.

Another option would perhaps be the functionalities of HTML5, as localStorage or sessionStorage which is less permanent:

Part 1 : A.html

<form action="B.html" onsubmit="return validar(this)" method="post">
Nome: <input type="text" name="fnome">
<input type="submit" value="PAGINA B &raquo;">
</form>

<script>
function validar(form){
    if(typeof(Storage) !== 'undefined'){
        if(form["fnome"].value != ""){
            sessionStorage.setItem('nome', form["fnome"].value);
            return true;
        } else {
            alert('Preencha o campo');
        }
    } else {
        alert('O navegador nao suporta storage');
    }
    return false;
}
</script>

Part 2 : B.html

<form action="validar.php" method="post">
Name: <input type="text" name="fnome">
Idade: <input type="text" name="fidade">
<input type="submit" value="Salvar">
</form>

<script>
if(typeof(Storage) !== 'undefined'){
    var form = document.querySelector("form");
    if(sessionStorage.getItem('nome')){
        form["fnome"].value = sessionStorage.getItem('nome');
        form.addEventListener('submit', function(ev){
            ev.preventDefault();
            if(form["fnome"].value != "" && form["fidade"].value > 0){
                alert('Dados digitados:\n\nNome: ' + form["fnome"].value + "\nIdade: " + form["fidade"].value + "\n\nA enviar para servidor...");
                sessionStorage.clear();
                this.submit();
            } else {
                alert("Preencha os campos em branco");
            }
            return false;
        });
    } else {
        form["fnome"].value = "sem nome";
    }
} else {
    alert('O navegador nao suporta storage');
}
</script>

You can also see the first example in Soen.

0


I already solved the problem, and used localStorage

$('.link-enviar').on('click', function(e){
  var nome1 = $('#nome1').val();
  var email1 = $('#email1').val();
  var cidade1 = $('#cidade1').val();
  var uf1 = $('#uf1').val();

  localStorage.setItem('nome',nome1);
  localStorage.setItem('email',email1);
  localStorage.setItem('cidade',cidade1);
  localStorage.setItem('uf',uf1);
});

$(function(){
  var nome = localStorage.getItem('nome');
  var email = localStorage.getItem('email');
  var cidade = localStorage.getItem('cidade');
  var uf = localStorage.getItem('uf');
  $('#empresa').val(nome);
  $('#email').val(email);
  $('#cidade').val(cidade);
  $('#uf').val(uf);
})'

This way I made a click event, where we take the values of the Formularios, playing to the localStorage.

Right after I made an anonymous function that runs along with the page, placing the values of the localStorage in the forms. Gave straight, thanks to those who wanted to help.

Browser other questions tagged javascript jquery html ajax form

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