让我的表单正确输出

我试图让我的表单输入显示在一个段落中，但是它只是短暂地出现然后消失。这是我的代码：让我的表单正确输出

<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; 
}

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

来源

2017-04-04 Brixsta

表单提交将导致页面回发/重装。尝试将表单本身作为参数传递给函数'onSubmit =“submitForm（this）”'，将参数添加到函数本身函数submitForm（e）{...}'中，通过将'e .preventDefault（）'在函数中。 – Santi

有没有办法阻止这种情况发生？比如在一篇教程中，我看到这个人在某处输入了“返回false”。 – Brixsta

或者我最好不要使用表单标签？ – Brixsta

这是您的解决方案。

问题是当你试图提交你从它实际上并没有阻止表单的默认行为。所以你必须停止你的表单的默认行为。为此，你必须返回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>

来源

2017-04-04 14:30:13 Rezwana

这样做以下：

<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

来源

2017-04-04 14:01:45 SaidbakR

这看起来更像是一个点差的游戏，而不是答案。你改变了什么？为什么它应该有所作为？ – Quentin

@Quentin请结帐答案更新。 – SaidbakR

让我的表单正确输出

回答

相关问题