让我的表单正确输出
问题描述:
我试图让我的表单输入显示在一个段落中,但是它只是短暂地出现然后消失。这是我的代码:让我的表单正确输出
<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;
}
也许它立即消失的原因与形式本身有关?但我不完全确定。有什么想法吗?
答
这是您的解决方案。
问题是当你试图提交你从它实际上并没有阻止表单的默认行为。所以你必须停止你的表单的默认行为。为此,你必须返回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>
答
这样做以下:
<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
表单提交将导致页面回发/重装。尝试将表单本身作为参数传递给函数'onSubmit =“submitForm(this)”',将参数添加到函数本身函数submitForm(e){...}'中,通过将'e .preventDefault()'在函数中。 – Santi
有没有办法阻止这种情况发生?比如在一篇教程中,我看到这个人在某处输入了“返回false”。 – Brixsta
或者我最好不要使用表单标签? – Brixsta