SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Zealot kevinritt's Avatar
    Join Date
    Nov 2002
    Location
    Lynn, Massachusetts-United States
    Posts
    138
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    validate 4 different radio button groups

    Hi,
    I have a form that uses four different radio button groups for an order form. The customer can select ONE button from any of the four different groups. The groups are:
    <!-- partial section of form -->
    <input name="style" type="radio" value="">
    <input name="style2" type="radio" value="">
    <input name="style3" type="radio" value="">
    <input name="style4" type="radio" value="">

    My question is how do I validate the button selected by the user?

    Thanks, in advance.

  2. #2
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" 
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    <head>
    <title>untitled</title>
    <style type="text/css">
    
    #f1 { width: 40px; font-weight: 600; margin: 20px 0; }
    .button { width: 40px; font-size: 11px; margin-bottom: 2px; } 
    .style { background: silver; border: 1px black solid; }
    .style2 { background: pink; border: 1px black solid; }
    .style3 { background: tan; border: 1px black solid; }
    .style4 { background: gold; border: 1px black solid; }
    
    </style>
    <script type="text/javascript">
    
    function handleRadios()
    {
    	var rcoll = [], i = 0, input, inputs = document.getElementsByTagName('input');
    	while (input = inputs.item(i++))
    		if (input.name.match(/^style\d?/))
    		{
    			rcoll[rcoll.length] = input;
    			input.onclick = function()
    			{
    				var i = 0;
    				while (input = rcoll[i++])
    					input.checked = (this == input);
    				return true;
    			}
    		}
    
    	document.getElementById('f1').onsubmit = function() //form id here
    	{
    		var i = 0;
    		while (input = rcoll[i++])
    			if (input.checked)
    				return true;
    		alert('Please select a style from one of the "style" groups. Thank you.');
    		if (rcoll[0].focus)
    			rcoll[0].focus();
    		return false;
    	}
    }
    
    onload = handleRadios;
    
    </script>
    </head>
    <body>
    <form id="f1">
    <input class="style" type="radio" name="style" value="a" /> a
    <input class="style" type="radio" name="style" value="b" /> b
    <input class="style" type="radio" name="style" value="c" /> c
    <hr />
    <input class="style2" type="radio" name="style2" value="a" /> a
    <input class="style2" type="radio" name="style2" value="b" /> b
    <input class="style2" type="radio" name="style2" value="c" /> c
    <hr />
    <input class="style3" type="radio" name="style3" value="a" /> a
    <input class="style3" type="radio" name="style3" value="b" /> b
    <input class="style3" type="radio" name="style3" value="c" /> c
    <hr />
    <input class="style4" type="radio" name="style4" value="a" /> a
    <input class="style4" type="radio" name="style4" value="b" /> b
    <input class="style4" type="radio" name="style4" value="c" /> c
    <br /><hr /><br />
    <input class="button" type="reset" value="clear" onclick="return confirm('Clear all entries?')" /> 
    <input class="button" type="submit" value="next" />
    </form>
    </body>
    </html>
    
    Edit:

    7-23-04 / better approach!
    Last edited by adios; Jul 23, 2004 at 09:44.
    ::: certified wild guess :::

  3. #3
    SitePoint Zealot kevinritt's Avatar
    Join Date
    Nov 2002
    Location
    Lynn, Massachusetts-United States
    Posts
    138
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Adios.
    What I am doing is passing the data to another page. So when the user hits the submit button, they will get an "Alert" if he/she did not select a button.

  4. #4
    He's No Good To Me Dead silver trophybronze trophy stymiee's Avatar
    Join Date
    Feb 2003
    Location
    Slave I
    Posts
    23,423
    Mentioned
    2 Post(s)
    Tagged
    1 Thread(s)
    Adios, do me a favor? Explain this one line for me:

    Code:
    input.checked =  input.checked && (input.name == this.name);

  5. #5
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    One at a time. kevinritt - why not avoid prompting your users by making it impossible for them to input bad data in the first place? Just label the rules clearly ('select from one group only'). And validate at the server for JS-disabled folks.

    stymiee...

    Just checks to see if the name of the radio group currently being processed ("style", "style1", etc.) is the same as the name of the radio which called the handler and that it's also the very same one that was clicked. The parentheses are optional, just make it clearer that it's a Boolean erxpression, determining the value of that button's .checked property.
    ::: certified wild guess :::

  6. #6
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oops, kevinritt - I see what you meant. In a hurry but I'll get back to this, if someone else doesn't first. Sorry for the confusion.
    ::: certified wild guess :::

  7. #7
    SitePoint Zealot kevinritt's Avatar
    Join Date
    Nov 2002
    Location
    Lynn, Massachusetts-United States
    Posts
    138
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Adios,
    I appreciate your help. To answer your question, the customer has an option to pick a certain style label. Some labels come with 1,2,3, or 4 lines of text as an option. To help send the specific data(.gif format)I had to create(so I thought) 4 types of radio buttons. Here's the link: http://www.wevelabels.com/order1.php if what I said doesn't make sense.
    Thanks again for your help.

  8. #8
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Kevin...that should have been your first post ! (never hurts).

    Anyway, I'm out of here. Edited the above, hope it helps. I'll check back tomorrow.
    ::: certified wild guess :::

  9. #9
    SitePoint Zealot kevinritt's Avatar
    Join Date
    Nov 2002
    Location
    Lynn, Massachusetts-United States
    Posts
    138
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Adios,
    Sorry for the confusion-I'll learn.
    Your code worked fine. Thank you.


Bookmarks

Posting Permissions

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