Okay, so I know a fair amount about HTML Table coding, I know about attributes and even CSS Styling.
But I'm looking for a way to make a Table have options that change the following questions.
I'm thinking this might require Javascripting but I'm not 100% sure.
Pretty much I have this:
http://i.imgur.com/PO5X3ZS.png
What I have in mind is adding a drop down box with options and when You choose 1 option it will change the questions that will follow your option choice.
I want the questions to change when you choose a specific option.
So say you choose Cheeseburger, the questions following would involve cheeseburgers.
Say you choose Soup, the questions following would involve soup, not cheeseburgers.
For example:
Option 1 has these questions, how to code? and Can I haz cheeseburger?
Option 2 would have these questions instead, How to use a broom? and How to code?
Option 3 would have these questions, What can I do to make this happen? and What would I need to learn?
So on and so on.
But I'm not sure how to do this...
Here is the code used to make the table in the above image
HTML Code:
<form id='generic_form'>
    <div class='category'>
        <table class='cat_head'>
            <tr>
                <td><h2 style='text-align:center'>Staff Application</h2></td>
            </tr>
        </table>
    </div>
    <table id='form_spec'>
        <tr>
            <th colspan='2'><center><h2><font color="FF0000">Please fill out the fields below</font></h2></center></th>
        </tr>
        <tr>
        </tr>
        <tr>
        </tr>
        <tr>
            <td>Question 1</td>
            <td><textarea rows="10" style="width: 500px; height: 50px;"></textarea></td>
        </tr>
        <tr>
            <td>Question 2</td>
            <td><textarea rows="10" style="width: 500px; height: 50px;"></textarea></td>
        </tr>
        <tr>
            <td>Question 3</td>
            <td><textarea rows="10" style="width: 500px; height: 50px;"></textarea></td>
        </tr>
        <tr>
            <td>Question 4</td>
            <td><textarea rows="10" style="width: 500px; height: 50px;"></textarea></td>
        </tr>
        <tr>
            <td>Question 5</td>
            <td><textarea rows="10" style="width: 500px; height: 50px;"></textarea></td>
        </tr>
        <tr>
            <td>Can Add More If Needed</td>
            <td><textarea rows="10" style="width: 500px; height: 50px;"></textarea></td>
        </tr>
        <tr>
            <td colspan='2' id='send_form'><button type='submit'>Submit Request</button></td>
        </tr>
    </table>
</form>
<style type='text/css'>
    /* <![CDATA[ */
    #form_spec tr td:first-child {
        font-weight: bold;
        color: #5CC3FE;
        width: 30%;
    }
    #form_spec input, #form_spec textarea {
        width: 500px;
    }
/* ]]> */
</style>
<script type='text/javascript'>
var form_script = {
    form_id: $('#generic_form'),
    status_id: $('#send_form'),
    specific_id: $('#form_spec'),
    enable_guests: false,
    pm: {
        enabled: false,
        user: "NONE",
        title: "Staff Application From {{user_name}}",
        content: "{{form}}"
    },
    topic: {
        enabled: true,
        forum_id: 4027352, // 1 id only
        title: "Staff Application From {{user_name}}",
        description: "",
        content: "{{form}}"
    },
    statuses: {
        not_logged_in: "You must be registered and signed in to use this feature.", // Used if enable_guests: false
        first: "Compiling contents...",
        second: "Delivering request...",
        done: "Your Application Has Been Sent!"
    },
    submission_formatting: {
        separator: ' ',
        before_all: '',
        after_all: '',
        before_question: '[color=#5CC3FE][b]',
        after_question: '[/b][/color][b][/b]',
        before_response: '',
        after_response: ''
    },
    possible_elements: 'input, textarea, select' // For the second column of table; .val() must work on it
};
</script>
<script type='text/javascript' src='http://z3.ifrm.com/313/104/0/p366373/form_script.js'></script>
<script type="text/javascript">
function showSpoiler(obj)
    {
    var inner = obj.parentNode.getElementsByTagName("div")[0];
    if (inner.style.display == "none")
        inner.style.display = "";
    else
        inner.style.display = "none";
    }
    </script>
<div class="category">
<table class="cat_head">
<tr><td><h2>View Requirements</h2></td></tr></table>
<div class="spoiler">
<button type="button" onclick="showSpoiler(this);" value="Submit">Show/Hide Rules</button>
    <div class="inner" style="display:none;">
<table><font face="Verdana, Verdana" size="2" color="#717171">
<tr><td><p>  <font color="#ff0000"><b>Rule/Requirement 1</b></font></p></td></tr>
<tr><td><p>  <font color="#ff0000"><b>Rule/Requirement 2</b></font></p></td></tr>
<tr><td><p>  <font color="#ff0000"><b>Rule/Requirement 3</b></font></p></td></tr>
<tr><td><p>  <font color="#ff0000"><b>Rule/Requirement 4</b></font></p></td></tr>
<tr><td><p>  <font color="#ff0000"><b>Rule/Requirement 5</b></font></p></td></tr>
<tr><td><p>  <font color="#ff0000"><b>Can Add More If Needed</b></font></p></td></tr>
</table>
</div></div></div>