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

Question

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

Navigation

#1 by (1 votes)

0

Good afternoon.

If you can, I need some help. What I have to do seems simple, but I'm not getting it.

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

I'm using GET method. Below are codes ... javascript is inserted at the end of the HTML.

HTML AND JAVASCRIPT CODES

Exercise 01 - Form Display

<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>

javascript html front-end

asked by anonymous 26.08.2017 / 20:08

1 answer

How to create an exception in htaccess for locking folders Lateral Menu making call with Angular!

score 1 · Answer 1

You can use the localStorage or sessionStorage API Web Storage

To do this, simply filter your form by saving the "required" data 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, notify you that it has been completed, etc ...

In a "new" (other) page you should check if the entry exists and if there is a retrieval of 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>

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