如何在不提交表單的情況下在提交表單上添加下一個按鈕？

Question

我想爲最後一個問題添加下一個按鈕。 例如，我想用評論顯示前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> 

Answer 1

我做了一個非常簡單的例子：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），並且只需要一點工作就可以處理儘可能多的面板。