用jquery顯示錶單結果

Question

我得到了一個表單，有4個問題（1個問題有4個單選按鈕），每個問題存儲在一個div中。

隨着jQuery的第一次顯示第一個div，當我按下一個按鈕，我顯示第二，等等。

繼承人它的整個代碼：

<form style="position:absolute; margin-left:140px;" method="post"> 
     <div id="question1"> 
      Q1 
      <br/> 
      <input name="q1" type="radio" value="q1a1"> 
      A1 
      <br/>  
      <input name="q1" type="radio" value="q1a2"> 
      A2  
      <br/> 
      <input name="q1" type="radio" value="q1a3"> 
      A3 
      <br/> 
      <input name="q1" type="radio" value="q1a4"> 
      A4 
      <br/> 
     </div> 

     <div id="question2"> 
      Q2 
      <br/> 
      <input name="q2" type="radio" value="q2a1"> 
      A1 
      <br/>  
      <input name="q2" type="radio" value="q2a2"> 
      A2  
      <br/> 
      <input name="q2" type="radio" value="q2a3"> 
      A3 
      <br/> 
      <input name="q2" type="radio" value="q2a4"> 
      A4 
      <br/> 
     </div> 

     <div id="question3"> 
      Q3 
      <br/> 
      <input name="q3" type="radio" value="q3a1"> 
      A1 
      <br/>  
      <input name="q3" type="radio" value="q3a2"> 
      A2  
      <br/> 
      <input name="q3" type="radio" value="q3a3"> 
      A3 
      <br/> 
      <input name="q3" type="radio" value="q3a4"> 
      A4 
      <br/> 
     </div> 

     <div id="question4"> 
      Q4 
      <br/> 
      <input name="q4" type="radio" value="q4a1"> 
      A1 
      <br/>  
      <input name="q4" type="radio" value="q4a2"> 
      A2  
      <br/> 
      <input name="q4" type="radio" value="q4a3"> 
      A3 
      <br/> 
      <input name="q4" type="radio" value="q4a4"> 
      A4 
      <br/> 
     </div> 
     <br/><br/><br/><br/> 
     <input type="button" id="submit" name="Submit" /> 
    </form> 
<button id="next">Next question</button> 
<script> 
$('#submit').hide(); 
$('div[id^="question"]').hide().first().show(); 
    $("#next").click(function (e) { 
     event.preventDefault(); 
     $('div[id^="question"]:visible').hide().next().show(); 
    }); 
</script> 

這就是我想要的東西 - 當最後一個（第4）問題的負荷，我想我的next按鈕更改爲提交按鈕。當我按提交按鈕時，它會顯示女巫單選按鈕被選中。任何建議，我該如何做到這一點？

Answer 1

嘗試這樣：

var currentQuestion = 1; 
$(document).ready(function() { 
    $('.next').click(function(e) { 
     e.preventDefault(); 
     if(currentQuestion < 4) { 
      $('#question' + (currentQuestion).toString()).hide(); 
      $('#question' + (currentQuestion + 1).toString()).show(); 
      currentQuestion++; 
     } 
     else { // On question four, process the form 
      // Not sure what you want to do with the data, but 
      // you can parse them like this: 
      var selections = {}; 
      for(var i=1;i<=4;i++) { 
       selections[i] = $('input[name="q' + i.toString() + '"]:checked').val() 
      } 

      // Then you have a JS object with your questions and 
      // corresponding choices, so you can do what you want. 
     } 
    }); 
});