Best way to handle jQuery/HTML form with questions, sub questions, and forms?

Question

I have a very large form that's essentially a questionnaire.

It has 19 questions, some of which when answered Yes have 1-5 more questions dropdown.

The way I'm doing this now is using jQuery .change() and .hide()/.show().

If the answer to a question without a sub question is Yes, a dropdown with a date, textarea, and file input appears. If the answer to a question with a sub question or sub questions is Yes, 1-5 more questions appear that when answered Yes have a dropdown form with a date, textarea, and file input.

What's the best way to handle the markup, JS/jQuery, and ship the data to the backend?

As of now I'm doing something like this, and this ONLY accounts for the yes or no answer:

var answers = [];

for(var i = 1; i <= 42; i++) {
    var question = $('#q' + i + '');

    if(question.is(':checked'))
        var answer = 'Yes';
    else
        var answer = 'No';

    answers.push({
        'question': answer
    });
}

var content = {
    'answers': answers
};

$.ajax({
    url: '/questions',
    type: 'POST',
    data: content,
    success: function(result) {
        var result = JSON.stringify(result);
        console.log(result);
    }
});

I stop the loop at 42 because there are 42 questions. This gets complicated with the form and their respective class/id names and getting those values and sending the data.

What's the best way to do this to also send many date, text, and file input fields..?

score 0 · Answer 1 · answered Aug 06 '14 at 21:13

I think the best way to do this is with a plain old HTML form and a little bit of jQuery to help toggle what is visible/not visible.

Basically, a 'toggle-trigger' class is added to the elements that trigger other content areas. Each toggle-trigger needs to know what toggle area to show/hide, so a data-toggle-area is added to this as well.

An example:

<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $(".toggle-trigger").change(function(event) {
                $(".toggle-trigger").each(function(index, element) {
                    var $element = $(element);
                    var $toggleArea = $($element.data("toggle-area"));

                    if($element.is(":checked")) {
                        $toggleArea.show();
                    } else {
                        $toggleArea.hide();
                    }
                });
            });
        });
    </script>
</head>
<body>
    <form action="/questions" method="post">
        <div>
            This is question one.
            <label>Yes<input class="toggle-trigger" type="radio" name="q1" value="Yes" data-toggle-area="#q1-yes" /></label>
            <label>No<input class="toggle-trigger" type="radio" name="q1" value="No" data-toggle-area="#q1-no"/></label>

            <div id="q1-yes" style="display:none;">
                This is question one subquestion for YES.
                <input type="date" name="q1-date"/>
            </div>
            <div id="q1-no" style="display:none;">
                This is question one subquestion for NO.
                <input type="file" name="q1-file"/>
            </div>
        </div>
        <input type="submit" value="Submit" />
    </form>
</body>
</html>

I think if you are using jQuery to build and post the form, you're probably working too hard. Let the plain old html form do it's thing, and use jquery to just show/hide what parts of the form are accessible. — Hamilton Lucas, Aug 06 '14 at 21:16
How would this work? Every question is different. Would it look like this * 40ish? — user3817533, Aug 06 '14 at 21:28
Yeah, I would expect you to have multiple pairs of toggle triggers and toggle areas. — Hamilton Lucas, Aug 06 '14 at 21:29
It has to use AJAX because it's part of a wizard. Prior to answering these questions there's 3 other forms the user filled out. — user3817533, Aug 06 '14 at 21:30
And I assume the other 3 forms are already being submitted with jquery? Why not just post each one of those forms, have the server do its thing and move you on to the next step in the wizard? — Hamilton Lucas, Aug 06 '14 at 21:31
It uses a wizard from a theme. This must use jQuery to send the data or a week's worth of work is wasted. — user3817533, Aug 06 '14 at 21:32
Fair enough. To submit the form with jquery, I'd suggest looking at [this answer](http://stackoverflow.com/a/1200312/3915110). Serialize the form and ship it :) — Hamilton Lucas, Aug 06 '14 at 21:34

Best way to handle jQuery/HTML form with questions, sub questions, and forms?

1 Answers1