如何在不提交表单的情况下，在同一页面上显示表单数据？

Question

我有一个HTML格式的表单，我想在同一页面上显示表单的文本输入数据，但在按下提交按钮之前，也就是说，当用户在表单中输入数据时，它必须显示在同一页面的表单下方。

我知道这段代码不会像我想要的那样工作。

var strText = document.getElementById("textone");
document.write(strText.value);
var strText1 = document.getElementById("textTWO");
document.write(strText1.value);
}

Answer 1

这就是我直接操作DOM的方法。

const input = document.getElementById('textInput');
const textElement = document.getElementById('displayText');

function updateValue(e) {
  textElement.textContent = e.target.value;
}
input.addEventListener('input', updateValue);

<input type="text" id="textInput">
<p>value from input:</p>
<div id="displayText"></div>

也有一些javascript库，比如 VueJS 和 架构 可以帮助你更容易、更有效地完成这个任务。

这是一个类似于你想在VueJS中做的事情的例子。https:/vuejs.orgv2examplesindex.html

Answer 2

我准备了一个一般功能的例子，希望你喜欢。可能不是你想要的，但如果是，请告诉我。

const myForm = document.getElementById("myForm");

const nameInput = document.getElementById("nameInput");
const emailInput = document.getElementById("emailInput");

const nameOutput = document.getElementById("nameOutput");
const emailOutput = document.getElementById("emailOutput");

let nameSpan = document.getElementById("name");
let emailSpan = document.getElementById("email");

myForm.addEventListener("submit", e => {
  e.preventDefault();
  alert(`NAME: ${nameInput.value}, EMAİL : ${emailInput.value}`)

  // select name , mail 
  nameSpan.innerText = nameInput.value;
  emailSpan.innerText = emailInput.value;

  // clear ınputs 
  nameInput.value = "";
  emailInput.value = ""
})

showData();

function showData() {
  nameInput.addEventListener("keyup", e => {
    nameOutput.value = e.target.value;
  })
  emailInput.addEventListener("keyup", e => {
    emailOutput.value = e.target.value;
  })
}

<form id="myForm">
  <input type="text" id="nameInput" placeholder="your name">
  <input type="text" id="emailInput" placeholder="your email">
  <button type="submit" id="getInputValue"> Get Input Value </button>
</form>

<div id="values" style="margin-top: 100px;">
  <input type="text" placeholder="NAME" id="nameOutput">
  <input type="text" placeholder="EMAİL" id="emailOutput">
</div>


<div>
  <p>Your name : <span id="name"></span></p>
  <p>Your email : <span id="email"></span></p>
</div>