我想为最后一个问题添加下一个按钮。 例如,我想用评论显示前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>
答案 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 ></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),只需一点点工作就可以处理任意数量的面板。