Coldfusion 如何在不提交表单的情况下在提交表单上添加“下一步”按钮？

我想为最后一个问题添加“下一步”按钮。 例如，我想用注释显示前4个问题，但我 想有一个显示“问题5”的下一步按钮吗

现在，当我提交表单时，它会将值插入表中。 我想做的是在用户点击问题5后提交表单 在那一页我会有一个提交按钮

我如何才能让这一切发生，让用户觉得他们移动到了一个不同的位置 但它真的是同一页吗

我还做了一个完整的表格

<cfloop index="i" from="1" to="5">
                 <cfset question = GetEmployeeCSEDepts["csedept_question" & i][GetEmployeeCSEDepts.CurrentRow]>
                   <cfif question neq "">

                       <tr>
                        <cfif i is 1><td>Leadership <br/>
                        <span class="description">Proactive instead of reactive, a good communicator, respectful, organized, consistent, resourceful, open-minded, sets good example</span>
                        </td></cfif>
                        <cfif i is 2><td>Integrity<br/>
                        <span class="description">Professional, ethical, honest, loyal, sincere, trusted, fair, doing the right thing, genuine</span>
                        </td></cfif>
                        <cfif i is 3><td>Service<br/>
                        <span class="description">Solution oriented, supportive,honest, loyal, trusted, listened to what is needed, took ownership, responsive, created win-win outcome.</span>
                        </td></cfif>
                        <cfif i is 4><td>Teamwork<br/>
                        <span class="description">Cooperative and or/supportive of others, reliable/dependable, willing to pitch in and help, partners well with others to achieve a task, shares and contributes expertise.</span>
                        </td></cfif>
                        <cfif i is 5><td>Overall</td></cfif>


                         <td valign="top">    <div align="center">  <input type="radio" name="sltRating#i#" value="5"></div><br></td>
                            <td valign="top"><div align="center">       <input type="radio" name="sltRating#i#" value="4.5"></div><br></td>
                            <td valign="top"><div align="center">       <input type="radio" name="sltRating#i#" value="4"></div><br></td>
                            <td valign="top">   <div align="center">    <input type="radio" name="sltRating#i#" value="3"></div><br></td>




                     </tr>
                  </cfif>
                </cfloop>

领导力

积极主动而不是被动，善于沟通，尊重他人，有组织，始终如一，足智多谋，思想开放，树立良好榜样
完整性

专业、道德、诚实、忠诚、真诚、可信、公平、做正确的事、真诚
服务

以解决方案为导向，支持他人，诚实，忠诚，值得信赖，倾听所需，采取主动，反应迅速，创造双赢结果。
团队合作

与他人合作和/或支持，可靠/可靠，愿意参与和帮助，与他人合作完成任务，分享和贡献专业知识。
总体上

我举了一个非常简单的例子：

HTML:

JS:

---

这只使用javascript（jQuery），只需稍加努力，它就可以处理任意多个面板

您必须以某种方式使用javascript来动态添加字段。有很多方法可以做到这一点。我不想“添加”字段，我只想在用户点击下一个按钮时显示最后一个“问题5”。您可以使用CSS隐藏表单的部分，或者使用一个选项卡式界面，比如i jQueryUI，让“提交”按钮检查您正在执行的“步骤”，并处理显示/隐藏需要执行的操作，或者提交表单。对于显示/隐藏网页的部分，它“仍然以某种方式使用javascript完成”。其他人提到了jQuery。这只是一个javascript库。在我从中获得的脚本之上，这应该可以正常工作，因为现在它不工作，你在哪个版本的浏览器上测试它？我尝试了所有的方法，大部分是Firefox我已经找到了答案，我不知道我把javascript放在了什么地方

<form action="" method="post">
    <div id="panel1">
        <p>First set of questions goes here</p>
        <button type="button" id="btnNext">Next &gt;</button>
    </div>
    <div id="panel2">
        <p>Second set of questions goes here</p>
        <button type="submit">Submit Form</button>
    </div>
</form>

#panel1, #panel2 {
    border: 1px solid black;
    width: 300px;
    height: 200px;
}

#panel2 {
    display: none;
}

$('#btnNext').click(function() {
    $('#panel1').hide();
    $('#panel2').show();
});