多步骤表单,下一步按钮将无法正常工作

时间:2015-10-19 16:07:38

标签: javascript html forms

“继续”到表单的下一步将无效。

  按钮的

onclick事件:

<button onclick="processPhase1()">Continue</button>

  

功能:

function processPhase1() {
    ("phase1").style.display = "none";
    ("phase2").style.display = "block";
}
  

示例表单(显示我的结构):

<form>
    <div id="phase1">
        <!-- Some Input field -->
        <!-- Some Input field -->
            <button onclick="processPhase1()">Next Step</button>
    </div>
    <div id="phase2">
        <!-- Some Input field -->
        <!-- Some Input field -->
    </div>
</form>  

当然,当我试图进入下一步时,第二阶段不显示,因为我有适合它的css。问题是,它不会进入下一步。

如果您想查看我的代码,请告诉我。

编辑:抱歉,不要提前提及。我正在使用

function _(x) {
                return document.getElementById(x);  
              }  

然后放置_(“phase1”)的前面,(“phase2”),但它仍然不起作用

我的部分代码:Click Here.

2 个答案:

答案 0 :(得分:0)

如果button位于表单内(基于您的代码未知),并且未指定按钮的type(如上所述),则默认为submit并且提交该表格。您的页面可能只是在表单提交上重新加载。

最简单的解决方法是在处理点击后return false;

<button onclick="processPhase1(); return false;">Next Step</button>

答案 1 :(得分:0)

你使用&#34; _&#34;作为getElementById的替身,似乎不必要地冒险与下划线库发生冲突(或至少是混淆),但确实有效:

&#13;
&#13;
function _(x) {
  return document.getElementById(x);
  }

function processPhase1() {
    _("phase1").style.display = "none";
    _("phase2").style.display = "block";
}
&#13;
<form>
    <div id="phase1">
      This is phase 1
            <button onclick="processPhase1()">Next Step</button>
    </div>
    <div id="phase2" style="display:none">
      This is phase 2
    </div>
</form>  
&#13;
&#13;
&#13;