Tell me please. Made on the site two forms for the name and address. And submit button.

Question 1 . How to make so that when you click the name and surname saved on the same page?

Question 2 : Is it possible to ensure that all data on the page is cleared at a certain time?

  • If you are given an exhaustive answer, mark it as correct (a daw opposite the selected answer). - Nicolas Chabanovsky ♦

4 answers 4

Data can be saved on the page using JS, but they can be lost at any time, and only the person who added them will see them (because they are stored on the client side, the user's browser) to save and display the data you need , you need a server side.

Those. Client <=> HTML page <=> Server

It is necessary that when you click on a button, the data is sent to the server, after which it was processed and saved. Later you can do whatever you want with this data. But HTML does not achieve this.

    Well, here is a simple implementation on js, because I think that the author is not talking about the server.

    var message; function letsdoit() { var fname = document.getElementById('fname'); var lname = document.getElementById('lname'); message = document.getElementById('welcomemess'); var ticks = document.getElementById('ticks').value; message.innerHTML = "Привет, " + fname.value + " " + lname.value; setTimeout(ticktock, 1000*ticks); } function ticktock() { message.innerHTML=''; } 
     <div id="welcomemess"></div> <input id="fname" placeholder="Имя"> <input id="lname" placeholder="Фамилия"> <input id="ticks" placeholder="Секунд до скрытия"> <button onclick="letsdoit()">Отправить</button>

    But in general, yes, of course a server

    UPD: Added data cleansing after a specified number of seconds

      You can store the completed data in the visitor's browser. Of course, they will be visible only to him. Other visitors to the page will deal each with their data. Otherwise, you need a shared server.

      The example uses localStorage and saves the completed data, even if the browser is closed. SO does not work in the sandbox, here is a working copy on jsFiddle .

       var people = [] ,saved = localStorage.getItem("people") ,in_name = document.getElementById('in-name') ,in_addr = document.getElementById('in-addr') ; if( saved) { people = JSON.parse(saved); render(); } document.getElementById('btn-save').addEventListener( 'click', function(){ people.push({ name: in_name.value, addr: in_addr.value }); localStorage.setItem("people", JSON.stringify( people)); render(); } ); function render() { var div = document.getElementById('out'), i, html = '', p; for( i=0; i<people.length; i++) { p = people[i]; html += '<dt>'+p.name+'</dt><dd>'+p.addr+'</dd>'; } div.innerHTML = html; } 
       <link href="https://yastatic.net/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <input id="in-name" type="text" name="name" placeholder="Ваше имя"> <input id="in-addr" type="text" name="addr" placeholder="Адрес"> <button id="btn-save">Сохранить</button> <dl id="out"></dl>

        You can save in session or cookies, for example. When a button is clicked, a request is sent to the handler script. Take them data from the required fields, for example, like this:

         if(isset($_POST['name']) && !empty($_POST['name'])) { $_SESSION['input_name'] = $_POST['name']; }

        And when loading the page:

         $name = ""; if(!empty($_SESSION['input_name'])) { $name = $_SESSION['input_name']; }

        Only the site is no longer in html, but in php. You can, of course, use the jquery-cookie library, save the data in the cookie with its help and also, when generating the page, check the presence of field contents in them, but using jquery means.