Multiple Radio Button values

Tpaul_10
Tpaul_10 used Ask the Experts™
on
Experts,

I have 6 radio button options or choices for the user with some other options (text box, dropdown etc) in my CF page and user can check or choose more than one radio button option. So, I would like to get the radio button option  value as comma delimited list in my action file, (like 1,2 OR 1,2,5,3 or 1,2,3,4,5,6 or may be just 1). How can I achive this? Please help me out.

<input type="radio" name="opt1" size="30"  value="1" onDblClick="uncheckOpenRadio();">Option 1
<input type="radio" name="opt2" size="30"  value="2" onDblClick="uncheckAssignRadio();">Option 2      
<input type="radio" name="opt3" size="30"  value="3" onDblClick="uncheckDeclineRadio();">Option 3<br>
<input type="radio" name="opt4" size="30"  value="4" onDblClick="uncheckPrdRadio();">Option 4
<input type="radio" name="opt5" size="30"  value="5" onDblClick="uncheckModeledRadio();">Option 5
<input type="radio" name="opt6" size="30"  value="6" onDblClick="uncheckQuoteRadio();">Option 6

Thanks in advance
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
View Solutions Only
_agx_
Most Valuable Expert 2015

Commented:
choose more than one radio button option.
Then I'm not sure why you're using radio buttons. radio buttons are designed to allow only one option to be checked. It probably works for you because you're using different "names" ie opt1, opt2, ... but that's confusing. It's not how radio buttons are designed to work.

I'd use checkboxes instead. Just give them all the same name. Then whatever values are checked will be passed as a csv list

<input type="checkbox" name="opt" ... >Option 1
<input type="checkbox" name="opt" ... >Option 2
<input type="checkbox" name="opt" ... >Option 4
....
Tpaul_10

Author

Commented:
I agree with you Agx, but the users wanted radio buttons since they have check boxes for a different option in the page.

That is the reason I have onDblClick="uncheckOpenRadio();" fucntion in my HITML.
Appreciate if you can tell me how can I get these values in a comma separated values.

Thanks for your suggestion

Commented:
agx is right. Use the right html entity. I'm only posting this so you can see how building a string using what you've asked for using js can be done - and just by using a couple of functions with an argument

afaik ondblClick won't work with radio buttons so you need to do something else to remove an item. I've shown you one way (as clunky as it is) NOte you also need to deal with leading & trailing commas.you also need to deal with removing commas in the middle of the string as well



<script type="text/javascript">
var mylist = ""
function check(obj)
{
if (mylist=='') //it's the first entry
{
mylist = mylist + check.arguments[0]      
}
else
{
mylist = mylist + ',' + check.arguments[0]      
}

alert(mylist)
}

function uncheck(obj)
{
mylist = mylist.replace(uncheck.arguments[0], '')
//handle commas at begin or end
if(mylist.substring(0,1)==','){mylist = mylist.substring(1)}
if (mylist.substring((mylist.length)-1,mylist.length)==','){mylist = mylist.slice(0, -1)}
mylist = mylist.replace(',,', ',')
alert(mylist)      
}

</script>

<input type="radio" name="opt1" size="30"  value="1"  onClick="check(1);">Option 1 <input type="radio" name="opt1" size="30"   onClick="uncheck(1);">remove 1
<input type="radio" name="opt2" size="30"  value="2"  onClick="check(2);">Option 2 <input type="radio" name="opt1" size="30"   onClick="uncheck(2);">remove 2    
<input type="radio" name="opt3" size="30"  value="3"  onClick="check(3);">Option 3 <input type="radio" name="opt1" size="30"   onClick="uncheck(2);">remove 3<br>
<input type="radio" name="opt4" size="30"  value="4"  onClick="check(4);">Option 4 <input type="radio" name="opt1" size="30"   onClick="uncheck(4);">remove 4
<input type="radio" name="opt5" size="30"  value="5"  onClick="check(5);">Option 5<input type="radio" name="opt1" size="30"   onClick="uncheck(5);">remove 5
<input type="radio" name="opt6" size="30"  value="6"  onClick="check(6);">Option 6 <input type="radio" name="opt1" size="30"   onClick="uncheck(6);">remove 6
JavaScript Best Practices

Save hours in development time and avoid common mistakes by learning the best practices to use for JavaScript.

Learn More!
_agx_
Most Valuable Expert 2015
Commented:
Well if you really must do it .. you'll need to use something like SidFishes described to create the string of values. Then store it in a separate, hidden field.  

Giving the buttons sequential "ID"'s is another option. But that's still the same as what Sid described.

( I couldn't remember if you're running CF8+. So that's why I didn't suggest binding. )

<script>
	function makeList() {
		var arr = new Array();
		var total = parseInt(""+ document.getElementById('numOfRadioButtons').value);
		for (var x = 1; x <=total; x++ ) {
			var elem = document.getElementById('opt'+ x);
			if (elem.checked) {
				arr.push(elem.value);	
			}
		}
		document.getElementById('selectedValues').value = arr.join(",");
	}
</script>
<form
<input type="checkbox" id="opt1" value="c">Option 1
<input type="checkbox" id="opt2" value="b">Option 2
<input type="checkbox" id="opt3" value="a">Option 3
<input type="checkbox" id="opt4" value="d">Option 4
<input type="checkbox" id="opt5" value="e">Option 5
<input type="checkbox" id="opt6" value="f">Option 4
<input type="hidden" name="numOfRadioButtons" value="6">
<input type="text" name="selectedValues" value="">
<input type="button" value="Get Selected Values" onClick="makeList()">
</form>

Open in new window

gdemaria

Commented:
> but the users wanted radio buttons since they have check boxes for a different option in the page

that's kind of funny...   it's like insisting that your mechanic put gasoline in with your windshield washer solution.

There are some things that users should not have a say over.

You could also try these alternatives.  

Perhaps style your checkboxes so they look different...
http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

Or you can use an image instead of a checkbox, the image could look like a radio button or an empty/full glass or a horse with/without a rider :) ....  but behind it is a checkbox...

http://homepage.ntlworld.com/vwphillips/ImageCheckBox/ImageCheckBox.htm
_agx_
Most Valuable Expert 2015

Commented:
There are some things that users should not have a say over

Amen. I was thinking the same thing .. but decided to let someone else fight the crazy user / bizzare corp culture battles today. lol
gdemaria

Commented:

Lol, we could have an entire thread about crazy user requests...  I remember a client demanding never to have to save their web application.  "I don't want to ever click a "Save" button, I want things to be saved for me automatically..."    This was before ajax come into the main stream...

_agx_
Most Valuable Expert 2015

Commented:
<ot>
Are you kidding? We could have an entire site devoted to "creative" user requests ;)

I don't want to ever click a "Save" button
Haha. Oh man ... I'm having crazy client flashbacks ... ;)
</ot>
SidFishes

Commented:
almost all of my work is done for internal projects so the only crazy requests are the ones i give myself. Planning meetings are a bit like the part in LOTR where Smeagol & Gollum are arguing with each other. :)

gd's styling idea is what I'd go with to give a different visual look without resorting to the silliness of the JS i provided ;)

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial