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

Hide/Show form in HTML produce unusual result

本文关键字：异常 结果 表单 显示 HTML 隐藏      更新时间：2024-06-21

我已经尝试了一段时间（一整天）来弄清楚为什么我的表单出现了这个奇怪的问题。我有一个客户希望在本地运行一个独立的HTML页面，它可以显示一个带有两个文本框和一个按钮的表单。输入信息并单击该按钮后，第二个表单将显示新的文本框。表单无法重定向到其他网站或文件。所有内容都必须在（HTML）文件中。

我发现用jQuery最容易做到这一点，但加载整个库只是为了隐藏一个表单是非常愚蠢的。所以我考虑了其他选项，并决定使用纯Javascript。

问题是，当我第一次点击"下一步"时，第一张表格消失了，但第二次点击后，就像发送了某种请求一样。Bellow是我目前拥有的代码。我试着制作一个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>
   ....

参考：

  • getElementByID

除了切换表单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/

首先，表单中任何没有类型属性或类型属性为submit的按钮默认情况下都会在单击时提交表单。

其次，看起来您正在尝试实现某种向导。如果这是真的，你不希望每个部分都是它自己的形式，因为最后你会想把所有这些数据发送到服务器，如果是两种形式，服务器就无法工作。

整个东西需要在一个表格中，里面有可以显示/隐藏的部分。要在分区之间导航，您需要使用

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

做巫师总是让人头疼。一旦您开始处理验证，您需要找出哪个步骤中有错误，并显示该部分，或者如果用户使用后退按钮，他们可能希望表单返回到第一步。您可能需要搜索提供某些锅炉板功能的第三方解决方案。这些可能有助于

不过，这应该会让你有一个良好的开端。

编辑

不要从头开始尝试。使用此

<!-- FORM 2 -->
<form id="first" action="#" class='tx_anmelden' method="post" autocomplete="off" >
<fieldset> **fieldset was misspelled as "filedset"**
<label for="name"> Your name </label>
<input name="name" value="MyName"></input> **your input had /> at it's end, which is unfortunately wrong**
<button onClick="showFirstForm()">Next</button>
</fieldset> **fieldset was misspelled as "filedset"**
</form>

<!-- FORM 1 -->
<form id="second" class='tx_anmelden'>
<fieldset>
<label for="name"> Your name </label>
<input name="name" value="MyNaffffffme"></input> **your input again had /> at it's end, which is unfortunately wrong**
<button onClick="showSecondForm()">Next</button>
</fieldset>
</form>

相关文章：