Dynamic forms

Question

I want to create a script that does the following:

When answering questions via a radio, drop-down, or checkbox, the script checks When selecting a radio button (or dropdown, or any form element except text and textarea) it checks if the given option will make the script to ask more questions.

Example:

A checkbox in front of 'Call me back', which when checked shows 2 more fields (a dropdown with all available countries, and a textfield for their phonenumber)

Another example:

(Let's say we're end-user IT support)

A dropdown menu where the user can select on what topic they want support (i.e. hardware, software). Then when the user selects a topic, it will show a additional field with more topics (ex: when user selects hardware, they get phone, computer, etc.), which on their turn shows extra fields for serial number, maybe OS'es and so forth

I think I'll be able to figure out how to do it in PHP and SQL, I just need a bit of a push in the right direction with HTML and jQuery:AJAX I hope I'm clear enough in what I want the script to do..

Thanks in advance! :)

score 3 · Accepted Answer · answered May 31 '11 at 13:56

Assuming some html structure like this:

<div id="question-1" class="top-question">
    What do you want?<br>
    <select>
        <option value='thing'>thing</option>
        <option value='item'>item</option>
    </select>
    <div id="question-1a" class="sub-question">
        How many of them?<br>
        <select>
            <option value='5'>five</option>
            <option value='10'>ten</option>
        </select>
    </div>
</div>

And using jQuery library (which makes life lots easier in cases like this) you can do this:

$('.sub-question').hide()
$('.top-question').bind('change',function(){
    $('.sub-question').show()
})

As demonstrated here: http://jsfiddle.net/xtUk6/

Ajax is not necessary here. The concept is that you have all the form fields there on the page, just visually removed. Then, each question has it's own unique id that can be identified when the form is posted back to the server and handled there in your case by php.

Using Ajax is possible, but unless you have millions of questions to select from according to some very complex set of input scenarios, it would cause delay whilst it is constantly fetching the next question from the server.

Could you demonstrate how (just in HTML-view) the AJAX markup would look like? — Sander, May 31 '11 at 14:09
I would add an abstraction layer by using jQuery (or another javascript library) that can handle all the cross-browser issues with AJAX, and simplify the code required to make the request and handle the response. Here is a simple example in jQuery: http://stackoverflow.com/questions/6188175/javascript-how-to-execute-a-simple-get-webrequest/6188321#6188321 — Billy Moon, May 31 '11 at 14:12
So, I have to give every div its own ID when attempting to load more questions into it? Is it true that we'll end up with a lot of nested divs? — Sander, May 31 '11 at 15:57

score 1 · Answer 2 · answered May 31 '11 at 13:48

1

You don't have to use ajax for this, what you could do is when the dropdown is changed, change the CSS property of the div containing the fields to non display:none;.

answered May 31 '11 at 13:48

James T

3,292
8
40
70

1

Since we want all the form to be dynamic expandable by a simple CMS we prefer to use ajax, since otherwise it would be over 100 questions eventually all put to hidden, otherwise I would have used it :) – Sander May 31 '11 at 14:03

score 0 · Answer 3 · answered May 31 '11 at 13:50

You can also do this with $().show() & $().hide() methods. You will need to put the css selector inside the $() parentheses for the items you want to show or hide. This is if you want to use jQuery instead of just using the display:none like suggested above.

Dynamic forms

Example:

Another example:

3 Answers3