www.webdeveloper.com
Results 1 to 6 of 6

Thread: multiple radio buttons on form

  1. #1
    Join Date
    Nov 2004
    Location
    Canada
    Posts
    330

    Red face multiple radio buttons on form

    I'm beefing up a Quick Suirvey on one of my pages. Right now I have one radio-button selection, with two choices, an area for an optional comment, and that's all.

    Now I want to add another set of radio buttons, with four buttons to choose from.

    In my current version, I have one button checked as the default; in the new version, which I havne't fully tested yet (but the page validates with W3C - it's not up, though) - although I hve one button checked by default, it doesn't show as checked when I bring the page up. Ouch!

    [Adding notes with an edit - BLUSH! I see a code error! "<div id=radio1">" - a missing quote mark! I guess I didn't validate THIS version! The Validator would have caught that!]

    [Adding more notes: I corrected the missing quote, and the page validated (by file upload), but I still don't get the default check-mark in the radio button series #1. Don't know why not! I'm amending the code example now so the missing quote mark is included.]

    This is very crude, and I don't have a decent .CSS structure for it either, and will be inquiring about that.

    Meantime, can anybody tell me how i can fix this? (HTML snippet follows)

    Code:
    <div id="surveyquest">
    <h3 id="survey">Quick Survey</h3>
    
    <h4>Where are you from?</h4>
    <div id="radio1">
    <p>East</p>
    <p><input type="radio" name="radio" value="East" checked="checked" /></p>
    <p>West</p>
    <p><input type="radio" name="radio" value="West" /></p>
    <p>South</p>
    <p><input type="radio" name="radio" value="South" /></p>
    <p>North</p>
    <p><input type="radio" name="radio" value="North" /></p>
    </div>
    
    <h4>Do you have a dog?</h4>
    <div id="radio2">
    <p>Yes, I do.</p>
    <p><input type="radio" name="radio" value="Yes" checked="checked" /></p>
    <p>No, I don't.</p>
    <p><input type="radio" name="radio" value="No" /></p>
    </div>
    
    <h4>You may leave a comment if you like</h4>
    
    <p><textarea name="message" rows="4" cols="40">Comment here</textarea></p>
    
    <p><input type="submit" value="Reply to survey" /></p>
    <p><strong>or</strong></p>
    <p><input type="reset" value="Quit" /></p>
    </div>
    Probably those divs are extraneous; I stuck them in when I wondered if not having them prevented the checked radio button from being visibly checked when I brought the page up.

    Mon, 21 Nov 2005 09:16:19
    Last edited by CarolW; 11-21-2005 at 12:38 PM. Reason: additional info

  2. #2
    Join Date
    Nov 2002
    Location
    XYZZY - UK
    Posts
    1,760
    Change the name= for the second group.

    <input type="radio" name="group1" value="X" />
    <input type="radio" name="group1" value="Y" checked="checked" />
    <input type="radio" name="group1" value="Z" />



    <input type="radio" name="group2" value="X" />
    <input type="radio" name="group2" value="Y" />
    <input type="radio" name="group2" value="Z" checked="checked" />
    Last edited by Robert Wellock; 11-21-2005 at 12:43 PM.

  3. #3
    Join Date
    Nov 2004
    Location
    Canada
    Posts
    330

    How to find OPTGROUP? instructions? info?

    Quote Originally Posted by Robert Wellock
    Use the FORM and OPTGROUP elements.
    Hi Robert,

    Hey, thanks! maybe I should have included the entire code example - OPTGROUP, I'm not familiar with. Here's what surrounds the code example I gave before - well, I'd better include the entire form part.

    Code:
            <div class="feedput">
    <form method="post" action="/cgi-bin/mailit">
    
    <!-- Validator requires a div here -->
    <!-- and also closing of tags -->
                <div class="questions">
    
    <input type="hidden" name="login" value="cwhitney" />
    <!--  the following returns visitor to refreshed survey page -->
    <input type="hidden" name="reply" value="thanks11.htm" />
    
    <input type="hidden" name="date" id="date" value="<!--#echo var='DATE_LOCAL' -->" />
    
    <input type="hidden" name="date" value="date" />
    
    <input type="hidden" name="file" value="carolarkowl" />
    <input type="hidden" name="format" value="human" />
    <input type="hidden" name="fields" value="date message" />
    
    <!-- end questions div here; it seems no longer needed by Validator after this -->
                </div>
    
    <div id="surveyquest">
    <h3 id="survey">Quick Survey</h3>
    
    <h4>Where are you from?</h4>
    <div id="radio1">
    <p>East</p>
    <p><input type="radio" name="radio" value="East" checked="checked" /></p>
    <p>West</p>
    <p><input type="radio" name="radio" value="West" /></p>
    <p>South</p>
    <p><input type="radio" name="radio" value="South" /></p>
    <p>North</p>
    <p><input type="radio" name="radio" value="North" /></p>
    </div>
    
    <h4>Do you have a dog?</h4>
    <div id="radio2">
    <p>Yes, I have one or more.</p>
    <p><input type="radio" name="radio" value="Yes" checked="checked" /></p>
    <p>No, I don't.</p>
    <p><input type="radio" name="radio" value="No" /></p>
    </div>
    
    <h4>You may leave a comment if you like</h4>
    
    <p><textarea name="message" rows="4" cols="40">Comment here</textarea></p>
    
    <!-- Display portion with questions and buttons and boxes and bows -->
    
    <p><input type="submit" value="Reply to survey" /></p>
    <p><strong>or</strong></p>
    <p><input type="reset" value="Quit" /></p>
    </div>
    
    </form>
    <!-- close feedput div here -->
            </div>
    I gather OPTGROUP has something to do with having multiple radio-button parts in the form?

    Since the page validates on file upload (XHTML 1.0 Strict), I guess the page itself is all right; it's the radio-button or general form coding that's off.

    Thanks!

    Mon, 21 Nov 2005 09:51:18

  4. #4
    Join Date
    Nov 2002
    Location
    XYZZY - UK
    Posts
    1,760
    You must have seen my cached post which wasn't finished; I said check they have different name attrib or it will think name="radio" is just one long form.

  5. #5
    Join Date
    Nov 2004
    Location
    Canada
    Posts
    330

    Exclamation Oh! Oh! I think I get it!

    Quote Originally Posted by Robert Wellock
    Change the name= for the second group.

    <input type="radio" name="group1" value="X" />
    <input type="radio" name="group1" value="Y" checked="checked" />
    <input type="radio" name="group1" value="Z" />



    <input type="radio" name="group2" value="X" />
    <input type="radio" name="group2" value="Y" />
    <input type="radio" name="group2" value="Z" checked="checked" />
    Oh, Robert! What a great help! duih! I'll try it!

    And I'll report back!

    Then comes the .CSS, when I finish that part!

    Mon, 21 Nov 2005 10:42:51

  6. #6
    Join Date
    Nov 2004
    Location
    Canada
    Posts
    330

    Wink You're right, and it worked!

    Hi Robert,

    You didn't think I'd say you're wrong, right? [haha]

    Quote Originally Posted by Robert Wellock
    You must have seen my cached post which wasn't finished; I said check they have different name attrib or it will think name="radio" is just one long form.
    I did this, and your example really, really helped; thanks! The page validated with W3C by file upload, appeared fine in my test-folder (offlline without SSI), and the radio buttons were checked appropriately. Whew! Fabulous help; thanks!

    Now over to CSS to see if I can catch on how to make this even passably sensible and attractive and useful!

    Mon, 21 Nov 2005 11:10:39

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