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

Answer 2

这是您的解决方案。

问题在于，当您尝试提交时，实际上并未阻止表单的默认行为。所以你必须停止表单的默认行为。为此，您必须在函数中返回false;

以下是演示链接enter link description here

<form action="#" method="POST" name="myForm" onsubmit="return yourFunctionName();">

    First Name:<input type="text" name="firstName" /><br />

    Last Name:<input type="text" name="lastName" /><br />

    <input type="submit" name="submit" value="Submit">

</form>

<div id="result"></div>

<script>
    function yourFunctionName()
    {           
        var firstName = document.forms["myForm"]["firstName"].value;
        var lastName = document.forms["myForm"]["lastName"].value;

        document.getElementById('result').innerHTML = "Your first name is <b>" + firstName + "</b> and your last name is <b>" + lastName + "</b>";

        return false;

    }
</script>

让我的表单正确输出

2 个答案: