Dynamic forms

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! :)

---

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.

---

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

---

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.