www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 17

Thread: Table Help

  1. #1
    Join Date
    Feb 2014
    Posts
    19

    Exclamation Table Help

    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>

  2. #2
    Join Date
    Feb 2014
    Location
    Canada
    Posts
    155
    You may need to use PHP depending what exactly you plan to do with this. For example, saving the results to a database would be better suited to PHP. Also, using PHP can prevent users from, "cheating" as they do not have access to view the answers, whereas they would if you used only JS, HTML and CSS. So what you need depends on what you want exactly. If you choose to use PHP, you'll need a web server (can run it from your computer for free).

  3. #3
    Join Date
    Feb 2014
    Posts
    19
    Quote Originally Posted by Error404 View Post
    You may need to use PHP depending what exactly you plan to do with this. For example, saving the results to a database would be better suited to PHP. Also, using PHP can prevent users from, "cheating" as they do not have access to view the answers, whereas they would if you used only JS, HTML and CSS. So what you need depends on what you want exactly. If you choose to use PHP, you'll need a web server (can run it from your computer for free).
    I don't need to store the data, And the answer are all text boxes so technically there aren't any "answers".
    Think of it as an online application.
    When they choose an option from the drop down box I want it to display specific questions only meant for that option.

  4. #4
    Join Date
    Feb 2014
    Location
    England
    Posts
    52
    Altering the questions on the fly would require javascript (jQuery would help with the heavy lifting).

    If you use jQuery you can use the following to hide sets of questions: https://api.jquery.com/hide/ Once the questions have been answered if you want to do anything with them then using PHP would be a good way to go.

    Good luck!

  5. #5
    Join Date
    Feb 2014
    Posts
    19
    Quote Originally Posted by EpicWebs View Post
    Altering the questions on the fly would require javascript (jQuery would help with the heavy lifting).

    If you use jQuery you can use the following to hide sets of questions: https://api.jquery.com/hide/ Once the questions have been answered if you want to do anything with them then using PHP would be a good way to go.

    Good luck!
    I guess I'll just explain everything.
    What I'm trying to make is a staff application form for a site that uses Zetaboards. I'm fairly sure Zeta doesn't support PHP so I can't use that.
    But I want the drop down box to have each staff ranking.
    When you pic one of the rankings I want specific questions to appear for that rank.
    So say somebody is applying for admin, I don't want them to see the default questions that are meant for a level 1 moderator application.

  6. #6
    Join Date
    Oct 2013
    Posts
    467
    So each option on the dropdown list links to a page with the questions pertinent that position/ranking. Why make it more difficult than it needs to be?

  7. #7
    Join Date
    Feb 2014
    Posts
    19
    Quote Originally Posted by Kevin2 View Post
    So each option on the dropdown list links to a page with the questions pertinent that position/ranking. Why make it more difficult than it needs to be?
    No, I only want a single page.
    http://i.imgur.com/PO5X3ZS.png << I want the questions there to change when you select an option.

  8. #8
    Join Date
    Feb 2014
    Posts
    19
    Here is a good example of what I want.
    But instead of a 2nd and 3rd drop down box that follows I would like simple text to change and a text box for the answer to the question(s) just like you would see in the Image in OP.

  9. #9
    Join Date
    Oct 2013
    Posts
    467
    Then make a DIV with the appropriate questions appear on select.

  10. #10
    Join Date
    Feb 2014
    Posts
    19
    Quote Originally Posted by Kevin2 View Post
    Then make a DIV with the appropriate questions appear on select.
    Care to explain and/or show an example?

  11. #11
    Join Date
    Oct 2013
    Posts
    467
    Try something like this:
    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Job Application Questions</title>
    <script>
    	function position(el){
    	switch(el.value){
    		case 'bigboss':
    			document.getElementById('peon').style.display = 'none';
    			document.getElementById('big_boss').style.display = 'block';
    			break;
    		case 'peon':
    			document.getElementById('big_boss').style.display = 'none';
    			document.getElementById('peon').style.display = 'block';
    			break;
    		default:
    			document.getElementById('big_boss').style.display = 'none';
    			document.getElementById('peon').style.display = 'none';
    			break;
    	}
    	}
    
    </script>
    </head>
    <body>
    <h1>Job Application</h1>
    <p>Choose the position for which you are applying:</p>
    <select onchange="position(this)">
    	<option value="">Choose one</option>
    	<option value="bigboss">Big Boss</option>
    	<option value="peon">Peon</option>
    </select>
    <div id="big_boss" style="display:none;">
    Questions for Big Boss application go here.
    </div>
    <div id="peon" style="display:none;">
    Questions for peons go here.
    </div>
    </body>
    </html>

  12. #12
    Join Date
    Oct 2013
    Posts
    467
    Another option:
    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Job Application Questions</title>
    <script>
    	function position(el){
    	switch(el.value){
    		case 'bigboss':
    			document.getElementById('form_spec').style.display = 'block';
    			document.getElementById('q1').innerHTML = 'Why do you think you should be the Big Boss instead of a peon?';
    			document.getElementById('q2').innerHTML = 'Why should peons respect you?';
    			break;
    		case 'peon':
    			document.getElementById('form_spec').style.display = 'block';
    			document.getElementById('q1').innerHTML = 'Why do you think you must be a peon instead of the Big Boss?';
    			document.getElementById('q2').innerHTML = 'What makes the Big Boss suck?';
    			break;
    		default:
    			document.getElementById('form_spec').style.display = 'none';
    			break;
    	}
    	}
    
    </script>
    </head>
    <body>
    <h1>Job Application</h1>
    <p>Choose the position for which you are applying:</p>
    <select onchange="position(this)">
    	<option value="">Choose one</option>
    	<option value="bigboss">Big Boss</option>
    	<option value="peon">Peon</option>
    </select>
    <table id="form_spec" style="display:none;">
            <tr>
                <th colspan="2" style="text-align:center; color:#FF0000;"><h2>Please fill out the fields below</h2></th>
            </tr>
            <tr>
            </tr>
            <tr>
            </tr>
            <tr>
                <td id="q1">Question 1</td>
                <td><textarea rows="10" style="width: 500px; height: 50px;"></textarea></td>
            </tr>
            <tr>
                <td id="q2">Question 2</td>
                <td><textarea rows="10" style="width: 500px; height: 50px;"></textarea></td>
            </tr>
        </table>
    </body>
    </html>
    Last edited by Kevin2; 03-01-2014 at 03:28 PM. Reason: got rid of HTML3.2 coding

  13. #13
    Join Date
    Feb 2014
    Posts
    19
    Quote Originally Posted by Kevin2 View Post
    Another option:
    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Job Application Questions</title>
    <script>
    	function position(el){
    	switch(el.value){
    		case 'bigboss':
    			document.getElementById('form_spec').style.display = 'block';
    			document.getElementById('q1').innerHTML = 'Why do you think you should be the Big Boss instead of a peon?';
    			document.getElementById('q2').innerHTML = 'Why should peons respect you?';
    			break;
    		case 'peon':
    			document.getElementById('form_spec').style.display = 'block';
    			document.getElementById('q1').innerHTML = 'Why do you think you must be a peon instead of the Big Boss?';
    			document.getElementById('q2').innerHTML = 'What makes the Big Boss suck?';
    			break;
    		default:
    			document.getElementById('form_spec').style.display = 'none';
    			break;
    	}
    	}
    
    </script>
    </head>
    <body>
    <h1>Job Application</h1>
    <p>Choose the position for which you are applying:</p>
    <select onchange="position(this)">
    	<option value="">Choose one</option>
    	<option value="bigboss">Big Boss</option>
    	<option value="peon">Peon</option>
    </select>
    <table id="form_spec" style="display:none;">
            <tr>
                <th colspan="2" style="text-align:center; color:#FF0000;"><h2>Please fill out the fields below</h2></th>
            </tr>
            <tr>
            </tr>
            <tr>
            </tr>
            <tr>
                <td id="q1">Question 1</td>
                <td><textarea rows="10" style="width: 500px; height: 50px;"></textarea></td>
            </tr>
            <tr>
                <td id="q2">Question 2</td>
                <td><textarea rows="10" style="width: 500px; height: 50px;"></textarea></td>
            </tr>
        </table>
    </body>
    </html>
    This one is exactly what I needed. Thanks so much!

  14. #14
    Join Date
    Feb 2014
    Posts
    19
    Quote Originally Posted by Kevin2 View Post
    Another option:
    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Job Application Questions</title>
    <script>
    	function position(el){
    	switch(el.value){
    		case 'bigboss':
    			document.getElementById('form_spec').style.display = 'block';
    			document.getElementById('q1').innerHTML = 'Why do you think you should be the Big Boss instead of a peon?';
    			document.getElementById('q2').innerHTML = 'Why should peons respect you?';
    			break;
    		case 'peon':
    			document.getElementById('form_spec').style.display = 'block';
    			document.getElementById('q1').innerHTML = 'Why do you think you must be a peon instead of the Big Boss?';
    			document.getElementById('q2').innerHTML = 'What makes the Big Boss suck?';
    			break;
    		default:
    			document.getElementById('form_spec').style.display = 'none';
    			break;
    	}
    	}
    
    </script>
    </head>
    <body>
    <h1>Job Application</h1>
    <p>Choose the position for which you are applying:</p>
    <select onchange="position(this)">
    	<option value="">Choose one</option>
    	<option value="bigboss">Big Boss</option>
    	<option value="peon">Peon</option>
    </select>
    <table id="form_spec" style="display:none;">
            <tr>
                <th colspan="2" style="text-align:center; color:#FF0000;"><h2>Please fill out the fields below</h2></th>
            </tr>
            <tr>
            </tr>
            <tr>
            </tr>
            <tr>
                <td id="q1">Question 1</td>
                <td><textarea rows="10" style="width: 500px; height: 50px;"></textarea></td>
            </tr>
            <tr>
                <td id="q2">Question 2</td>
                <td><textarea rows="10" style="width: 500px; height: 50px;"></textarea></td>
            </tr>
        </table>
    </body>
    </html>
    So I ran into a problem.
    I added this code to my previous code and now the submit button doesn't work...
    I'm needing to send this form to a specific section of the forums.
    I'm also wanting to keep that spoiler that shows the rules and guidelines for requesting a promotion.
    Here is the full code I'm trying to use:
    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Job Application Questions</title>
    <script>
    	function position(el){
    	switch(el.value){
    		case 'bigboss':
    			document.getElementById('form_spec').style.display = 'block';
    			document.getElementById('q1').innerHTML = 'Why do you think you should be the Big Boss instead of a peon?';
    			document.getElementById('q2').innerHTML = 'Why should peons respect you?';
    			break;
    		case 'peon':
    			document.getElementById('form_spec').style.display = 'block';
    			document.getElementById('q1').innerHTML = 'Why do you think you must be a peon instead of the Big Boss?';
    			document.getElementById('q2').innerHTML = 'What makes the Big Boss suck?';
    			break;
    		default:
    			document.getElementById('form_spec').style.display = 'none';
    			break;
    	}
    	}
    
    </script>
    </head>
    <body>
    <h1>Job Application</h1>
    <p>Choose the position for which you are applying:</p>
    <select onchange="position(this)">
    	<option value="">Choose one</option>
    	<option value="bigboss">Big Boss</option>
    	<option value="peon">Peon</option>
    </select>
    <table id="form_spec" style="display:none;">
            <tr>
                <th colspan="2" style="text-align:center; color:#FF0000;"><h2>Please fill out the fields below</h2></th>
            </tr>
            <tr>
            </tr>
            <tr>
            </tr>
            <tr>
                <td id="q1">Question 1</td>
                <td><textarea rows="10" style="width: 500px; height: 50px;"></textarea></td>
            </tr>
            <tr>
                <td id="q2">Question 2</td>
                <td><textarea rows="10" style="width: 500px; height: 50px;"></textarea></td>
            </tr>
        </table>
    <td colspan='2' id='send_form'><button type='submit'>Submit Request</button></td>
    </body>
    </html>
    
    </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>

  15. #15
    Join Date
    Oct 2013
    Posts
    467
    1) Anything after </html> will not get processed or displayed.
    2) You'll need to put <form action="the_name_of_your_processing_script" method="post"> ahead of the form and </form> after the submit button. Something like:
    HTML Code:
    <form action="the_name_of_your_processing_script" method="post">
    <table id="form_spec" style="display:none;">
            <tr>
                <th colspan="2" style="text-align:center; color:#FF0000;"><h2>Please fill out the fields below</h2></th>
            </tr>
            <tr>
            </tr>
            <tr>
            </tr>
            <tr>
                <td id="q1">Question 1</td>
                <td><textarea rows="10" style="width: 500px; height: 50px;"></textarea></td>
            </tr>
            <tr>
                <td id="q2">Question 2</td>
                <td><textarea rows="10" style="width: 500px; height: 50px;"></textarea></td>
            </tr>
    <tr><td colspan='2' id='send_form'><input type="submit" value="Submit Request"/></td></tr>
    </table>
    </form>
    Also note some other subtle changes to make your code valid. I think anyway...
    Last edited by Kevin2; 03-01-2014 at 04:13 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles