在不重新加载页面的情况下在同一页面上显示用户输入的Web表单

Question

我正在尝试设计一个包含用于数据提交的Web表单的Web应用程序。此表单应允许用户在最终“SUBMIT”将其全部推送到数据库之前添加多个数据组件。为了做到这一点，我希望用户在输入数据时看到累积进度。

例如，可能的（非常基本的）用户流程如下图所示。

我不能为我的生活弄清楚如何做到这一点。我在考虑某种Javascript（或者可能是JQuery）附加到div中显示的变量（类似于几十个问题like this one），但我无法弄清楚如何给出改变适当的范围。

如果没有页面重新加载，如何才能实现此功能？我知道我可以通过GET或POST完成它，但这需要在每次点击时刷新，这会大大减慢过程。

Answer 1

您每次都可以将文本附加到变量，然后更新显示 - 如果您需要更多控制权。

但是，原始解决方案是将文本附加到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 = '';
});

要匹配的HTML：

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

Answer 2

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>