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

Question

I have a form in HTML and I want to display the form text input data on the same page but before pressing the submit button. Mean, When Users put the data in the form it must display below the form on same page. It's mean that I want to show all data before submitting the form.

I know this code will not work as i want

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

Answer 1

This is how I would do it by directly manipulating the 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>

There are also javascript libraries like VueJS and ReactJS that can help you do this more easily and efficiently.

This is an example of something like what you would want to do in VueJS: https://v2.vuejs.org/v2/examples/index.html

Answer 2

I've prepared an example of general functioning, I hope you like it. It may not be exactly what you want, but if it is, please tell me.

 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>