Question

我已经尝试了一段时间（一段时间=一整天）来弄清楚为什么我的表格有这个奇怪的问题。我有一个客户端想要一个本地运行的独立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>
   ....

参考：

getElementByID

Answer 1

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

Answer 2

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

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

整个事物需要采用一种形式，其中包含您显示/隐藏的部分。要在您要使用的部分之间导航

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

做巫师总是痛苦的屁股。一旦开始处理验证，您需要确定哪个步骤中有错误并显示该部分，或者如果用户使用后退按钮，他们可能希望表单返回到第一步。您可能希望搜索提供某些样板功能的第三方解决方案。 These might help

这应该让你有一个良好的开端。

修改

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

Answer 3

<!-- 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>

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

3 个答案: