如何在提交表单上添加下一个按钮而不提交表单?

时间:2014-07-16 18:43:39

标签: coldfusion

我想为最后一个问题添加下一个按钮。 例如,我想用评论显示前4个问题,但是我 想要有一个下一个按钮,它会显示问题#5'。

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

如何让这种情况发生,使用户看起来像是移动到另一个用户 页面,但它确实是同一页?

我还制作了一个完整形式的http://jsfiddle.net/3epja/

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

1 个答案:

答案 0 :(得分:3)

我做了一个非常简单的例子:http://jsfiddle.net/mf6Eg/

HTML:

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

CSS:

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

#panel2 {
    display: none;
}

JS:

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

这只使用javascript(jQuery),只需一点点工作就可以处理任意数量的面板。