HTML pages: fill in form and make this data appear on a second page both HTML, but how?

Question

HTML pages: fill in form and make this data appear on a second page both HTML, but how?

Asked 7 years, 2 months ago

Viewed 2,654 times

0

What I have to do seems simple, but I’m not getting it.

I need to fill out a form and when clicking the save button it should show another page with this same data that I registered on the previous page. I do this only with HTML and Javascript?

I’m using the GET method.

Below follow codes

<html>

<head>
  <title>Exercício 01 - Exibição de Formulário</title>
</head>

<body>
  <div>
    <h1>*** Formulário de Cadastro ***</h1>
    <hr />
  </div>

  <p><i><h3>Todos os campos com * são de preenchimento obrigatório!</h3></i></p>

  <form action="exe01 - informacoes Cadastrais.html" method="GET" onsubmit="javascript: return salvarDados()">
    <label><b>Nome:</b></label>
    <input type="text" name="txtNome" value="" /> *
    <br /> <br />

    <label><b>Sobrenome:</b></label>
    <input type="text" name="txtSobrenome" value="" /> *
    <br /><br />

    <label><b>CPF:</b></label>
    <input type="text" name="txtCpf" value="" /> *
    <br /> <br />

    <label><b>Telefone:</b></label>
    <input type="text" name="txtTelefone" value="" /> *
    <br /> <br />

    <label><b>E-mail:</b></label>
    <input type="text" name="txtEmail" value=""> *
    <br /> <br />

    <input type="submit" value="Salvar" />
  </form>

  <!-- CÓDIGO JAVASCRIPT -->
  <script>
    function salvarDados() {
      var nome = document.getElementById("txtNome").value;
      var sobrenome = document.getElementById("txtSobrenome").value;
      var cpf = document.getElementById("txtCpf").value;
      var telefone = document.getElementById("txtTelefone").value;
      var email = document.getElementById("txtEmail").value;

      var dados = "Nome: " + nome + "Sobrenome: " + sobrenome +
        "CPF: " + cpf + "Telefone: " + telefone + "E-mail: " + email;

      return true;
    }
  </script>
</body>

</html>

I believe you have to use PHP

– Italo Rodrigo

2017/08/26 at 18:55
opa, right. I’ll try tbm, vlw

– user89080

2017/08/27 at 02:12

1 answer

Browser other questions tagged javascript html front-end

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

by Lauro Moraes • **3,871** points · Answer 1 · 2017-08-26T19:07:37+00:00

You can use localStorage or sessionStorage of the API Web Storage

For this just filter your form by saving the data "required" and store in JSON on the "next" page just check if the entry exists and retrieve it.

example: (page 1)

<!-- HTML Fragment -->
<form id="first-form" accept-charset="utf-8">
    <input id="first-name" type="text" required>
    <input id="last-name" type="text" required>
    <input id="cpf" type="text" required>
    <input id="tel" type="tel" required>
    <input id="mail" type="email" required>
    <input type="submit" value="save">
</form>

<script>
    // get form
    var form = document.getElementById('first-form')
    if ( !!form ) {
        // event
        form.addEventListener('submit', function(evt){
            // get entires
            let object = {}
            object.name = document.getElementById('first-name').val;
            object.lastname = document.getElementById('last-name').val;
            object.cpf = document.getElementById('cpf').val;
            object.tel = document.getElementById('tel').val;
            object.mail = document.getElementById('mail').val
            // save to storage (local or session)
            localStorage.setItem('YOUR_ID_FOR_THIS_FORM', JSON.stringify(object));
        }, false);
    }
</script>

After saving you can redirect, warn that it has been completed, etc...

On a "new" (other) page you should check if the entry exists and if it exists will recover the data.

example: (page 2)

<!-- HTML Fragment -->
<script>
    // check
    if ( localStorage.getItem('YOUR_ID_FOR_THIS_FORM') ) {
        // parse (transforme a string para um objeto javascript)
        let object = JSON.parse(localStorage.getItem('YOUR_ID_FOR_THIS_FORM'));
        // use...
    }
</script>

Press this point you can use all entries saved in the object... it is worth recalling the need to create your own validation so that the content saved on the first page is not null or different from the purpose.