Web form that displays user input on same page without page reload

Question

I am trying to design a web app that includes a web form for data submission. This form should allow the user to add multiple data components before a final "SUBMIT" pushes it all to a database. In order to do this well, I want the user to see the cumulative progress as he/she inputs data.

For example, a possible (very basic) user flow is in the image below.

I cannot for the life of me figure out how to do this. I was thinking some sort of Javascript (or perhaps JQuery) that appends to a variable that is displayed in a div (kind of like in the dozens of questions like this one), but I can't figure out how to give that variable the proper scope.

How would one go about making this functionality without a page reload? I know I could do it simply with a GET or POST, but that requires a refresh on every click which dramatically slows down the process.

You can made the final submit with serialize of data in jquery ajax. — Ananta Prasad, Jun 17 '16 at 19:06
a simple way would be to just use jquery and add the text of the input on click of the button. https://jsfiddle.net/ts1v5vse/ — Liquidchrome, Jun 17 '16 at 19:16
Look up "AJAX" if you want to submit data to the server without a page reload. — Mike Cluck, Jun 17 '16 at 19:52

score 1 · Answer 1 · answered Jun 17 '16 at 19:13

You can certainly append the text to a variable each time, and then update the display - if you need more control.

However, a primitive solution would be to just append the text to the DOM.

document.getElementById('addBtn').addEventListener('click', function() {
  // Get the input's content
  var input = document.getElementById('textInput');
  var text = input.value;

  //Create a div with the new content  
  var newDiv = document.createElement("div"); 
  var newContent = document.createTextNode(text); 
  newDiv.appendChild(newContent);

  // Add the input's content to the display
  var display = document.getElementById('display');
  display.appendChild(newDiv);

  // Clear the input
  input.value = '';
});

And the HTML to match:

<input id="textInput" type="text" />
<button id="addBtn">Add text</button>
<div id="display"></div>

score 0 · Answer 2 · answered Jun 17 '16 at 19:16

var button = document.getElementById("addText"),
    input = document.getElementById("input"),
    output = document.getElementById("output");

button.onclick = function() {
  output.insertAdjacentHTML('beforeend', '<div>' + input.value + "</div>");
  input.value = '';
};

<input type="text" id="input" />
<button id="addText">Add Text</button>
<div id="output"></div>

Web form that displays user input on same page without page reload

2 Answers2