javascript - 在 jQuery 中，我如何使用一个按钮从一个表单转到下一个表单（即，像问卷一样）

Question

这是问卷开始时我的 HTML：

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

到目前为止，这是我的 Javascript：

$(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" />'
});

我要编写什么样的函数，以便在问题 2 加载后，单击“下一个问题”按钮导致问题 3？

Answer 1

这是一种方法：http: //jsfiddle.net/zXM74/2/

var questions = {
    2: 'Question 2: Do you like cats?' +
       '<input type="radio" name="answer" value="yes">Yes<br>' +
       '<input type="radio" name="answer" value="no">No<br>',
    3: 'Question 3: Do you like bunnies?' +
       '<input type="radio" name="answer" value="yes">Yes<br>' +
       '<input type="radio" name="answer" value="no">No<br>'
    };

var current_question = 1;

$('#questionnaire').submit(function(){
    current_question++;
    $('#questionnaire #question').html(questions[current_question]);
    return false;
});​

您保留一个存储当前问题的变量，使用该变量索引对象或数组以获取要显示的正确问题，并在按下按钮时递增该变量。

还需要对您的 HTML 进行少量更改，以将实际问题包含在自己的 div 中，与提交按钮分开：

<form id="questionnaire">
  <div id="question">
      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>
  </div>
  <input type="submit" value="Next Question" />
</form>​

Answer 2

小提琴

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

Answer 3

我会把你所有的问题放在 HTML 中，分成不同的 DIV。每个 DIV 都应该有一个唯一的 id。只有第一个问题会显示，其余的会被隐藏。

您可以将下一个问题的 id 放入上一个问题的提交输入中，就像这样......

<input id="2" type="submit" value="Next Question" />

创建一个委托以捕获单击提交按钮、捕获 id、隐藏问题id-1、显示问题id。

Answer 4

<script>
    var mark = 0;
    var currIdx = -1;
    var result = "1/";


    var quest = [
        {
            ID: 1,
            question: "Who is CEO?",
            options: [
                {
                    optionID: 1,
                    optionText: "Bill Gate"
                },
                {
                    optionID: 2,
                    optionText: "Thomas"
                },
                {
                    optionID: 3,
                    optionText: "Lexthur"
                }
            ],
            ans: 3
        },
        {
            ID: 2,
            question: "Hardest language in programming",
            options: [
                {
                    optionID: 1,
                    optionText: "C++"
                },
                {
                    optionID: 2,
                    optionText: "Java"
                },
                {
                    optionID: 3,
                    optionText: "PHP"
                },
                {
                    optionID: 4,
                    optionText: "C#"
                }
            ],
            ans: 2
        },
        {
            ID: 3,
            question: "Who is Cutest in the world",
            options: [
                {
                    optionID: 1,
                    optionText: "Davika"
                },
                {
                    optionID: 2,
                    optionText: "TTHZ"
                },
                {
                    optionID: 3,
                    optionText: "Su Su"
                },
                {
                    optionID: 4,
                    optionText: "Aye Kaung"
                }
            ],
            ans: 2
        },
        {
            ID: 4,
            question: "What is the meaining of GG",
            options: [
                {
                    optionID: 1,
                    optionText: "Good Game!"
                },
                {
                    optionID: 2,
                    optionText: "Gammer Gain"
                },
                {
                    optionID: 3,
                    optionText: "Noob Gamer"
                },
                {
                    optionID: 4,
                    optionText: "Well played"
                }
            ],
            ans: 1
        },
    ]

    // $('#questionnaire').html(quest[0]);

    $(document).ready(function () {

        $('#submit').click(function () {
            currIdx++;
            $('#questionnaire').html(quest[currIdx].question);

            var optionhtml = "";

            for (var i = 0; i < quest[currIdx].options.length; i++) {
                optionhtml += "<input type='radio' name='option'" + quest[currIdx].options[i].optionID + "'/>" + quest[currIdx].options[i].optionText + "<br/>";
                $('.form-check').html(optionhtml);


            }

            return false;
        });

    });







</script>