javascript - 让我的表单正确输出

Question

我试图让我的表单输入出现在一个段落中，但它会短暂出现然后消失。这是我的代码:

<form onSubmit = "submitForm()" name="myForm">
  First Name:<input type="text" name="firstName" /><br />
  Last Name:<input type="text" name="lastName" /><br />
  <input type="submit" value=" Submit " name="submit" />
  </form>

<p id="para">

</p>

function submitForm () {
  var firstName = document.forms["myForm"]["firstName"].value;
  var lastName = document.forms["myForm"]["lastName"].value;
  document.getElementById('para').innerHTML = "Your first name is " + firstName + " and your last name is " + lastName;
}

也许它立即消失的原因与表单本身有关？但我并不完全确定。有什么想法吗？

Answer 1

执行如下操作:

<form onSubmit = "return submitForm()" name="myForm">
  First Name:<input type="text" name="firstName" /><br />
  Last Name:<input type="text" name="lastName" /><br />
  <input type="submit" value=" Submit " name="submit" />
  </form>

<p id="para">

</p>
<script>
function submitForm () {
  var firstName = document.forms["myForm"]["firstName"].value;
  var lastName = document.forms["myForm"]["lastName"].value;
  document.getElementById('para').innerHTML = "Your first name is " + firstName + " and your last name is " + lastName;
  return false;
}
  </script>

换句话说，将 return 添加到事件中，即 onSubmit = "return SubmitForm()" 并使函数在以下位置返回 false结束了

消失是由于表单执行了提交，所以我们阻止它提交数据。结账this demo