gpt4 book ai didi

javascript - 在 HTML 中隐藏/显示表单会产生异常结果

转载 作者:太空宇宙 更新时间:2023-11-03 23:49:37 24 4
gpt4 key购买 nike

我已经尝试了一段时间(一段时间 = 一整天)来弄清楚为什么我的表单会出现这个奇怪的问题。我有一个客户想要一个在本地运行的独立 HTML 页面,该页面将显示一个带有几个文本框和一个按钮的表单。输入信息并单击该按钮后,第二个表单应显示新的文本框。表单不能重定向到另一个网站或文件。这一切都必须在该 (HTML) 文件中。

我认为使用 jQuery 最容易做到这一点,但加载整个库只是为了隐藏一种形式是非常愚蠢的。所以我查看了其他选项并决定使用纯 Javascript。

问题是当我第一次点击“下一步”时,第一个表格消失了,但一秒钟后又出现了,就像发送了某种请求一样。波纹管是我目前拥有的代码。我尝试制作一个 JSFiddle,但每次访问它时浏览器都会阻塞。

Javascript:

function hideAll() {
document.getElementById('first').style.display = 'block';
document.getElementById('second').style.display = 'none';
showFirstForm();
}

function showFirstForm() {
if (document.getElementById('second').style.display == 'block') {
document.getElementById('first').style.display = 'block';
document.getElementById('second').style.display = 'none';
}
}

function showSecondForm() {
if (document.getElementById('first').style.display == 'block')
{
document.getElementById('second').style.display = 'block';
document.getElementById('first').style.display = 'none';
}
}

HTML:

<body class="if5" onload="hideAll()"> // I'm loading hideAll() on refresh to hide second form
....
<!-- FORM 2 -->
<form id="first" action="#" class='tx_anmelden' method="post" autocomplete="off" >

<filedset>
<label for="name"> Your name </label>
<input name="name" value="MyName" /></input>
<button onClick="showFirstForm()">Next</button>
</filedset>
</form>


<!-- FORM 1 -->
<form id="second" class='tx_anmelden'>

<fieldset>
<label for="name"> Your name </label>
<input name="name" value="MyNaffffffme" /></input>
<button onClick="showSecondForm()">Next</button>
</fieldset>
</form>
....

引用:

最佳答案

除了您已切换表单 ID 之外,<button>默认类型为 submit .因此,当您单击按钮时,它会将表单发布到 # .所以更正您的表单 ID,然后将您的按钮代码类型更改为 button :

<button type="button" onClick="showSecondForm()">Next</button>

这里有一些文档:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

这是一个使用更正代码的工作 jsfiddle:http://jsfiddle.net/789SP/

关于javascript - 在 HTML 中隐藏/显示表单会产生异常结果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20508023/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com