Web Analytics Made Easy -
StatCounter Populating questions for form in HTML - CodingForum

Announcement

Collapse
No announcement yet.

Populating questions for form in HTML

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Populating questions for form in HTML

    Hi guys,

    Thank you for reading this post and would kindly appreciate if someone can assist me with a form I am trying to create for work in HTML.

    I would like to populate questions when selecting a category from a drop down list. So for example, when selecting "mobile phone" from the drop down list questions relating to that such as "Model" "telephone number" etc would generate when this is selected.

    I have already created a drop down list using the following code -


    <html>
    <body>

    <form>

    <select name="Category">

    <option value="Mobile">Mobile</option>
    <option value="Laptop">Laptop</option>
    <option value="Headset">Headset</option>
    </select>

    </form>

    </body>
    </html>

    By the way I am a complete novice and just want questions to come up when selecting any of these categories.

    Thanks again

  • #2
    I would propose putting the questions into an object containing arrays of objects:
    Code:
    var questions = {
        Mobile: [
            {name: "question1", text:"Text of 1st question for Mobile"},
            {name: "question2", text: "Text of 2nd question for Mobile"},
            {name: "question3", text: "Text of 3rd question for Mobile"}
        ],
        Laptop: [
            {name: "question1", text:"Text of 1st question"},
            {name: "question2", text: "Text of 2nd question"},
            {name: "question3", text: "Text of 3rd question"}
        ],
        Headset: // and so on
    };
    Then create the input elements based on this structure. You will need the functions createElement and appendChild.
    And for-loops to scan the structure and build the elements:
    https://developer.mozilla.org/en-US/..._and_iteration

    Comment


    • #3
      Thanks so much Sempervivum although I can only use HTML with the application I am using and need a basic HTML code instead.

      Comment


      • #4
        Originally posted by KeenLearner View Post
        Thanks so much Sempervivum although I can only use HTML with the application I am using and need a basic HTML code instead.
        HTML CANNOT on its own accomplish what you are asking. There are tricks for APPROACHING what you are asking about using CSS, but really this is more a JavaScript type of thing given that if you are showing other form elements, the page is going to be gibberish on things like screen readers or other non-visual UA's.

        I mean, if you "can't" use JavaScript or a server side assist, instead of a SELECT use multiple <input type="radio"> with label tags, and use the CSS3 :checked attribute to show/hide related fieldsets.

        This is guessing WILDLY -- and is really as big a middle finger to accessibility as scripting would be, but...

        Code:
        <div id="radioSections">
        
        	<input type="radio" id="radioMobile" name="radioSections">
        	<label for="radioMobile">Mobile</label>
        
        	<input type="radio" id="radioLaptop" name="radioSections">
        	<label for="radioLaptop">Laptop</label>
        
        	<input type="radio" id="radioHeadset" name="radioSections">
        	<label for="radioHeadset">Headset</label>
        
        	<div id="sectionMobile" class="subSection">
        		<h2>Mobile</h2>
        		<p>Mobile content here</p>
        	<!-- #sectionMobile.radioSection --></div>
        
        	<div id="sectionLaptop" class="subSection">
        		<h2>Laptop</h2>
        		<p>Laptop content here</p>
        	<!-- #sectionLaptop --></div>
        
        	<div id="sectionHeadset" class="subSection">
        		<h2>Headset</h2>
        		<p>Headset content here</p>
        	<!-- #sectionHeadset --></div>
        	
        <!-- #radioSections --></div>
        With this as the stylesheet:
        Code:
        #radioSections input {
        	/* hide these by sliding them off screen. can't display none, breaks IE */
        	position:absolute;
        	left:-999em;
        }
        
        #radioSections label {
        	display:inline-block;
        	padding:0.25em 0.5em;
        }
        
        #radioSections input:checked + label {
        	/* highlight when selected */
        	background:#DEF;
        }
        
        .subSection {
        	display:none;
        }
        
        #radioMobile:checked ~ #sectionMobile,
        #radioLaptop:checked ~ #sectionLaptop,
        #radioHeadset:checked ~ #sectionHeadset {
        	display:block;
        }
        Untested, but should be sound in modern browsers. Just beware this is completely non-functional in IE8/earlier. Anchors with :target may also work, but one has to worry about losing focus meaning if those subsections contain form elements, it would be broken.

        Oh, and side note, if the value is the same as the contents of an <option>, you don't need to say the value="", it will default to it!
        Walk the dark path, sleep with angels, call the past for help.
        https://cutcodedown.com
        https://medium.com/@deathshadow

        Comment


        • #5
          Oh, and side note, if the value is the same as the contents of an <option>, you don't need to say the value="", it will default to it![/i][/QUOTE]

          and if we say, what will happen??? is it wrong??

          Comment


          • #6
            Thanks deathshadow, right I understand a little bit better now that HTML alone will not be enough. Although our company only has IE hence the reason why the code you put in did not work.

            Any other ideas?

            Comment


            • #7
              You might use PHP instead. Submit the form and pass the selected option to the server. Then prepare the questions in PHP. Do you have PHP available?

              Comment


              • #8
                I can only use share point. Will that work?

                Comment


                • #9
                  Originally posted by KeenLearner View Post
                  Although our company only has IE hence the reason why the code you put in did not work.
                  The code should work in IE11 and that's the only version of IE that is still supported now that Microsoft is phasing it out. IE10 and earlier were killed off last year and so are now full of security holes that can be exploited forever.
                  Stephen
                  Learn Modern JavaScript - http://javascriptexample.net/
                  Helping others to solve their computer problem at http://www.felgall.com/

                  Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

                  Comment


                  • #10
                    Originally posted by Thorbengilles View Post
                    and if we say, what will happen??? is it wrong??
                    Waste of bandwidth... apart from that, it won't send the whole page to "Norwegian blue" if that's what you're worried about.

                    I liken it to absolute URI's, DIV for nothing, presentational use of classes, and all the other code bloat people put into sites. On their own any one of them isn't a big deal, but if you slop out all of the unneccessary bits and broken methodologies and it's not long before you're using 60..200k of markup to do 6..15k's job. Going hand in hand with the 500..600k of CSS in a half dozen files doing 32k in one file's job and megabytes of scripting on sites that aren't doing anything that needs scripting.

                    See my MSM article for more:
                    Minimalist Semantic Markup, Where it's at... - CUTCODEDOWN

                    As well as section 2.3 to the end of my "What's wrong with YOUR website[/url] article:
                    Part 2, Markup - What's wrong with YOUR website? - CUTCODEDOWN

                    Then people complain when Google starts de-ranking their site because it's slow, or it's costing them too much to host, or they're facing accessibility fines...

                    In and of itself, an unnecessary/redundant attribute isn't going to kill you, but it's a bad habit that with other bad habits can bite you eventually. My rule is if you can leave something out and still be valid by the specification, leave it out.

                    Originally posted by KeenLearner View Post
                    Thanks deathshadow, right I understand a little bit better now that HTML alone will not be enough. Although our company only has IE hence the reason why the code you put in did not work.
                    Should work back to IE9... The "general sibling selector" of "~" was added in 8, and ":checked" was added in 9. If you're supporting older than 9, you're going to need to use jScript to do it.... and yes, "JScript", not "JavaScript" -- similar enough most don't know the difference, but NOT the same.

                    Just how old an IE do you have to support? ... Though if you say anything IE7/earlier, that might expain why you don't want JS as it may be blocked. If your in-house crapplets are forcing you to stay there since updating to IE8 or even Win Vista/Newer would break them, or or simply cost of hardware -- see medical clinics with zero budget where Win98 is still a reality, and hyperterminal into a ASA400 is SOP -- it's likely activeX is disabled entirely for security reasons, and that takes jScript with it.

                    Said situations being WAY more common than many "designers" or front-end coders want to admit, some can be outright assholes on the subject of still supporting legacy IE at all! Given the intent of HTML if you can't still at least support functionality to IE6, you're not doing your job right! Just don't bend over backwards making it look perfect or have all the bells and whistles.

                    Ever see a secure IE6? I have! It's called Windows CE running it from ROM.
                    Last edited by deathshadow; Sep 29, 2016, 05:02 AM.
                    Walk the dark path, sleep with angels, call the past for help.
                    https://cutcodedown.com
                    https://medium.com/@deathshadow

                    Comment


                    • #11
                      I tried the codes above but it did not work in MS Edge, can you recommend any reasons and how to fix it ?

                      Comment


                      • #12
                        Section Select Demo

                        IE9+, Edge, FF, Chrome, Safari, Vivaldi, ChrOpera, and even Opera Classic (12.18)? WORKS FINE! None selected at start, click on one and it shows. NOT rocket science.

                        As with all my examples, the directory:
                        Index of /for_others/KeenLearner/ - CutCodeDown

                        ... is unlocked for easy access to the gooey bits and pieces.
                        Walk the dark path, sleep with angels, call the past for help.
                        https://cutcodedown.com
                        https://medium.com/@deathshadow

                        Comment

                        Working...
                        X