Displaying form results with jquery

Question

I got a form, with 4 questions (1 question has 4 radio buttons), each question is stored inside a div.

With jquery i first show the 1st div, when i press the next button i show the 2nd, and so on.

Heres the entire code for it:

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

This is what i want - when the last (4th) question loads, i want my next button to change into submit button. When i press the submit button it would show witch radio buttons were selected. Any suggestions on how can i do this?

Answer 1

Try something like this:

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.
        }
   });
});