0

4 つの質問 (1 つの質問には 4 つのラジオ ボタンがあります) を含むフォームを取得しました。各質問は div 内に保存されます。

jqueryを使用すると、最初に最初のdivが表示され、次のボタンを押すと2番目が表示されます。

そのためのコード全体を次に示します。

    <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ボタンが送信ボタンに変わります。送信ボタンを押すと、選択されたラジオボタンが表示されます。どうすればこれを行うことができますか？

4

1 に答える 1

2

次のようなことを試してください：

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.
        }
   });
});
于 2013-04-30T05:27:51.580 に答える