Question

Here’s my HTML when the questionnaire starts:

<form id="questionnaire">
  Question 1: Do you like dogs?<br>
  <input type="radio" name="answer" value="yes">Yes<br>
  <input type-"radio" name="answer" value="no">No<br>
  <input type="submit" value="Next Question" />
</form>

Here’s my Javascript so far:

$(document).ready(function(){

    var q2 = 
      'Question 2: Do you like cats?
       <input type="radio" name="answer" value="yes">Yes<br>
       <input type-"radio" name="answer" value="no">No<br>
       <input type="submit" value="Next Question" />'

      $('#questionnaire').submit(function(){
        $('#questionnaire').html(q2); // This puts the Question 2 HTML into the form
        return false;
      });


    var q3 = 
      'Question 3: Do you like bunnies?
       <input type="radio" name="answer" value="yes">Yes<br>
       <input type-"radio" name="answer" value="no">No<br>
       <input type="submit" value="Next Question" />'
});

What kind of function do I write so that after Question 2 loads, clicking the “Next Question” button leads to Question 3?

Answer 1

Fiddle

Javascript:

    var questions = ['Question 1: Do you like dogs?<br><input type="radio" name="answer" value="yes">Yes<br><input type-"radio" name="answer" value="no">No<br><input type="submit" value="Next Question" />', 'Question 2: Do you like cats?<input type="radio" name="answer" value="yes">Yes<br><input type-"radio" name="answer" value="no">No<br><input type="submit" value="Next Question" />','Question 3: Do you like bunnies?<input type="radio" name="answer" value="yes">Yes<br><input type-"radio" name="answer" value="no">No<br><input type="submit" value="Next Question" />'];

$('#questionnaire').html(questions[0]);
var currIdx = 0;

$(document).ready(function(){


      $('#questionnaire').submit(function(){
        currIdx++;
        $('#questionnaire').html(questions[currIdx]); // This puts the Question 2 HTML into the form
        return false;
      });

});​

HTML:

<form id="questionnaire">

</form>​