[RESOLVED] select one option from multiple choices

@santaDec 03.2008

I have a form with a few radio button options and a drop down below.

[code=php] <input type=”radio” value=”1.00″ name=”amount”> <br> <input type=”radio” value=”5.00″ name=”amount”> <br> <input type=”radio” value=”10.00″ name=”amount”> <br> <input type=”radio” value=”20.00″ name=”amount”> <br> <select name=”amount”> <option>more options <option value=”50.00″>$50.00 <option value=”100.00″>$100.00 <option value=”200.00″>$200.00 <option value=”500.00″>$500.00 </select> [/code]

As you can see drop down is a continuation of the radio options list. I need to be able to submit only one value. I think I need a function to call every time I check a radio button or make a selection in a drop down to deselect all other options. JS is my weakest link. How do I do that without writing a convoluted logic for each option line?

to post a comment

JavaScript

11 Comments(s) _↴

@JMRKERDec 04.2008 — #I'm confused about why you have separate elements.

Why not just have all radio buttons or all select options only?

@santaauthorDec 04.2008 — #My drop-down will have a lot more options. I only want to show 3-4 first options as radio.

@JMRKERDec 04.2008 — #Fair enough ... try this:

[code=php]
 <html>
 <head>
 <title>Radio / Select Options</title>
 <script type="text/javascript">
 function getRBtnName(GrpName,flag) {
 var sel = document.getElementsByName(GrpName);
 var fnd = -1;
 var str = '';
 for (var i=0; i<sel.length; i++) {
 if (sel[i].checked == true) { str = sel[i].value;  fnd = i; }
 }
 if (flag == true) { return str; }  // return value of selection
 else { return fnd; }  // return option index of selection
 return str;
 } 
 
 function ReportSelection() {
 var str, elem;
 var choice = getRBtnName('amount',false);
 if (choice < 4) {
 if (choice < 0) { alert('Selection required'); return; }
 str = getRBtnName('amount',true);
 } else {
 elem = document.myForm.amountS;
 str = elem[elem.selectedIndex].value;
 } 
 alert('Choice: '+choice+' = '+str);
 }
 </script>
 </head>
 <body>
 <form name="myForm" onsubmit="return false">
 <input type="radio" value="1.00" name="amount">1.00<br>
 <input type="radio" value="5.00" name="amount">5.00<br>
 <input type="radio" value="10.00" name="amount">10.00<br>
 <input type="radio" value="20.00" name="amount">20.00<br>
 <input type="radio" value="" name="amount">Others
 <select name="amountS">
 <option value="50.00">$50.00</option>
 <option value="100.00">$100.00</option>
 <option value="200.00">$200.00</option>
 <option value="500.00">$500.00</option>
 </select> 
 <p>
 <button onclick="ReportSelection()">Selection Report</button>
 </form>
 </body>
 </html>
 [/code]

Selection Report Button is just for testing purposes

but you can change it to validation if it suits your needs

@santaauthorDec 04.2008 — #That works nicely, but I'd like to eliminate the Other radio option.

Is it possible to reset drop-down to the first, default option (<option>more options -- in my example code) when any of the radio buttons is selected and visa versa, deselect all radio options when any option (except <option>more options ) in drop-down is selected?

When I submit the form it must post with the same field name: amount, regardless whether it comes from radio or drop-down option.

@JMRKERDec 04.2008 — #That works nicely, but I'd like to eliminate the Other radio option.

Is it possible to reset drop-down to the first, default option (<option>more options -- in my example code) when any of the radio buttons is selected and visa versa, deselect all radio options when any option (except <option>more options ) in drop-down is selected?

When I submit the form it must post with the same field name: amount, regardless whether it comes from radio or drop-down option.[/QUOTE]

I'll look further into the first request. The use of the 'Other' radio button was to avoid just such a problem as you are describing. In the validation section you could check the status of the 'Other' radio button as a 'checked' value and determine if the radio button options or the select box options should be passed along to the server.

Concerning the field names, to use the current code, what I would do is this:

1. Add a 'hidden' field, like <input type="hidden" id="hAmount" name="AMOUNT" value="">

2. Assuming you have a validation section, transfer the contents of the radio button or select box values (depending on the 'Other' radio button checked status) to the 'hidden' field name during validation of the input. This would also allow you to check to make sure at least one selection has been made by the user without all the hassle of both radio button and select box evaluations.

3. This is the "KISS'" principle in operation. :rolleyes:

@santaauthorDec 04.2008 — #Great idea! JS confuses the heck out of me but I think the way to go here would be to write a function that will transfer any selected value into that hidden field and then submit it.

@JMRKERDec 04.2008 — #In the "ReportSelection()" function, replace the alert() command with this

<i>
 </i>document.getElementById('hAmount').value = str;

(Using code suggested in 2 earlier posts ? )

The call will probably be located in your validation code just prior to 'form' submission.

If still having problems, post the code you are using or a link to where script is located.

@santaauthorDec 05.2008 — #Well, here's my attempt to put it all together. Doesn't work yet:

[code=php]
 <html>
 <head>
 <title>Radio / Select Options</title>
 <script type="text/javascript">
 function getRBtnName(GrpName,flag) {
 var sel = document.getElementsByName(GrpName);
 var fnd = -1;
 var str = '';
 for (var i=0; i<sel.length; i++) {
 if (sel[i].checked == true) { str = sel[i].value;  fnd = i; }
 }
 if (flag == true) { return str; }  // return value of selection
 else { return fnd; }  // return option index of selection
 return str;
 }
 
 function amountSelection() {
 var str, elem;
 var choice = getRBtnName('amountR',false);
 
 if (choice < 4) {
 str = getRBtnName('amountR',true);
 document.myForm.amountS.selectedIndex = 0; // reset drop-down to blank option
 } else {
 elem = document.myForm.amountS;
 str = document.myForm.amountS.value;
 document.myForm.amountS.selectedIndex = ""; // uncheck radio
 }
 document.getElementById('amount').value = str;
 }
 </script>
 </head>
 <body>
 <form name="myForm" onsubmit="return false">
 <input type=text name="amount">
 <br>
 <input type="radio" value="1.00" name="amountR"  onclick="amountSelection()">1.00<br>
 <input type="radio" value="5.00" name="amountR"  onclick="amountSelection()">5.00<br>
 <input type="radio" value="10.00" name="amountR" onclick="amountSelection()">10.00<br>
 <input type="radio" value="20.00" name="amountR" onclick="amountSelection()">20.00<br>
 <br>
 <select name="amountS" onchange="amountSelection()">
 <option>select one
 <option value="50.00">$50.00</option>
 <option value="100.00">$100.00</option>
 <option value="200.00">$200.00</option>
 <option value="500.00">$500.00</option>
 </select>
 </form>
 </body>
 </html> 
 [/code]

@JMRKERDec 05.2008 — #See if this works (with some minor mods) for you now:

[code=php]
 <html>
 <head>
 <title>Radio / Select Options</title>
 <script type="text/javascript">
 function getRBtnName(GrpName,flag) {
 var sel = document.getElementsByName(GrpName);
 var fnd = -1;
 var str = '';
 for (var i=0; i<sel.length; i++) {
 if (sel[i].checked == true) { str = sel[i].value;  fnd = i; }
 }
 if (flag == true) { return str; }  // return value of selection
 else { return fnd; }  // return option index of selection
 return str;
 }
 
 function amountSelection(RbtnSbox) {
 var str, elem;
 if (RbtnSbox == 'R') {
 var choice = getRBtnName('amountR',false);
 if (choice != -1) {
 str = getRBtnName('amountR',true);
 document.myForm.amountS.selectedIndex = 0; // reset drop-down to blank option
 }
 } else {
 elem = document.myForm.amountS;
 str = document.myForm.amountS.value;
 document.myForm.amountR.selectedIndex = -1; // uncheck radio
 elem = document.myForm.amountR;
 for (var i=0; i<elem.length; i++) { elem[i].checked = false; }
 
 }
 document.getElementById('amount').value = str;
 }
 </script>
 </head>
 <body>
 <form name="myForm" onsubmit="return false">
 <input type=text name="amount" id="amount">
 <br>
 <input type="radio" value="1.00" name="amountR"  onclick="amountSelection('R')">1.00<br>
 <input type="radio" value="5.00" name="amountR"  onclick="amountSelection('R')">5.00<br>
 <input type="radio" value="10.00" name="amountR" onclick="amountSelection('R')">10.00<br>
 <input type="radio" value="20.00" name="amountR" onclick="amountSelection('R')">20.00<br>
 <br>
 <select name="amountS" onchange="amountSelection('S')">
 <option>select one
 <option value="50.00">$50.00</option>
 <option value="100.00">$100.00</option>
 <option value="200.00">$200.00</option>
 <option value="500.00">$500.00</option>
 </select>
 </form>
 </body>
 </html> 
 [/code]

@santaauthorDec 05.2008 — #This is EXACTLY what I had in mind! Works great. Thank you!

@JMRKERDec 05.2008 — #You're most welcome.

Glad I was able to help after I figured out what you wanted.

Good Luck!

?

Also in #JavaScript _↴

drop down list form Removing Slideshow elements form html file How works function chain in jQueyr?

Success!

Help @santa spread the word by sharing this article on Twitter...

Tweet This

[RESOLVED] select one option from multiple choices

11 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

[RESOLVED] select one option from multiple choices

11 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

11 Comments(s) _↴

Also in #JavaScript _↴