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
<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: '[/color][/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>