/    Sign up×
Community /Pin to ProfileBookmark

Radio Button Function with ID instead of NAME?

I have 3 of the 4 following script functions working. (See below)

The ‘getSBox(ids)’, getRBtn(nameinfo)’ and ‘getCBox(ids)’ all work
to return the value of the option selected within the element.

For consistency I want to create a ‘getRBtn(ids)’.
My attempt, commented out in the script, is called ‘getRBtnID(ids)’.
I am trying to determine the options array values from the id.

Does anyone have a suggestion(s) how I might do this in the test script below?

Thanks for any ideas. ?

[code=php]
<html>
<head>
<title>Selections Test</title>
<script type=”text/javascript”>

function getSBox(ids) {
var sel = document.getElementById(ids); // alert(sel+’nvalue:’+str);
var fnd = -1;
for (var i=0; i<sel.options.length; i++) { if (sel.selectedIndex == i) { fnd = i; } }
// return fnd; // return selected index of selection
// comment out next 3 lines if selectIndex used in line above
var str = “”;
if (fnd != -1) { str = sel.options[fnd].value; }
return str;
}

function getRBtn(nameinfo) {
var sel = document.getElementsByName(nameinfo); // alert(nameinfo+’n’+sel);
var fnd = -1;
var str = ”;
for (var i=0; i<sel.length; i++) {
if (sel[i].checked == true) { str = sel[i].value; fnd = i; }
}
// return fnd; // return option index of selection
// comment out next line if option index used in line above
return str;
}

/*
// This is the function that does not work correctly yet
function getRBtnID(ids) { // TEST FUNCTION FOR CONSISTENCY
var selobj = document.getElementByID(ids); // alert(ids+’n’+selobj);

// next line is questionable
var sel = selobj.document.getElementsByName(?????);

var fnd = -1;
var str = ”;
for (var i=0; i<sel.length; i++) {
if (sel[i].checked == true) { str = sel[i].value; fnd = i; }
}
// return fnd; // return option index of selection
// comment out next line if option index used in line above
return str;
}
*/

function getCBox(ids) {
var sel = document.getElementById(ids);
var fnd = false;
var str = ”;
if (sel.checked == true) { str = sel.value; fnd = true; } // alert(sel+’nvalue:’+str);
// return fnd; // return boolean status of checkbox
// comment out next line if checkbox boolean status used in line above
return str;
}

</script>
</head>
<body>
<h1>Selection Tests</h1>
<select id=”SBox”>
<option value=”>blank</option>
<option value=”Zero”>0</option>
<option value=”One”>1</option>
<option value=”Two”>2</option>
<option value=”Three”>3</option>
<option value=”Four”>4</option>
</select>
<button onClick=”document.getElementById(‘SBoxPick’).value=getSBox(‘SBox’);”>Report</button>
Result <input id=”SBoxPick” value=”” />

<p />
<input type=”radio” name=”RBtn” id=”RBox” value=”Five” />5
<input type=”radio” name=”RBtn” id=”RBox” value=”Six” />6
<input type=”radio” name=”RBtn” id=”RBox” value=”Seven” />7
<button onClick=”document.getElementById(‘RBoxPick’).value=getRBtn(‘RBtn’);”>Report</button>
Result <input id=”RBoxPick” value=” />

<p />
<input id=”CBox1″ type=”checkbox” value=”Eight” />8
<button onClick=”document.getElementById(‘CBox1Pick’).value=getCBox(‘CBox1′);”>Report</button>
Result <input id=”CBox1Pick” value=’false’ />
<br />
<input id=”CBox2″ type=”checkbox” value=”Nine” checked />9
<button onClick=”document.getElementById(‘CBox2Pick’).value=getCBox(‘CBox2′);”>Report</button>
Result <input id=”CBox2Pick” value=’true’ />
<br />
<input id=”CBox3″ type=”checkbox” value=”Ten” />10
<button onClick=”document.getElementById(‘CBox3Pick’).value=getCBox(‘CBox3′);”>Report</button>
Result <input id=”CBox3Pick” value=’false’ />

<p />
<script type=”text/javascript”>
var Msg = new Array();
Msg[0] = ”;
Msg[1] = “Element 1”;
Msg[2] = “Element 2”;
Msg[3] = “Element 3”;
Msg[4] = “Element 4”;
Msg[5] = “Element 5″;
document.write(‘<input type=”radio” id=”RadioButtons” name=”RButtons” value=”0″‘);
document.write(‘ onClick=”document.getElementById(‘RadioBtnPick’).value=Msg[getRBtn(‘RButtons’)]” />blank’);
document.write(‘<input type=”radio” id=”RadioButtons” name=”RButtons” value=”1″‘);
document.write(‘ onClick=”document.getElementById(‘RadioBtnPick’).value=Msg[getRBtn(‘RButtons’)]” />One’);
document.write(‘<input type=”radio” id=”RadioButtons” name=”RButtons” value=”2″‘);
document.write(‘ onClick=”document.getElementById(‘RadioBtnPick’).value=Msg[getRBtn(‘RButtons’)]” />Two’);
document.write(‘<input type=”radio” id=”RadioButtons” name=”RButtons” value=”3″‘);
document.write(‘ onClick=”document.getElementById(‘RadioBtnPick’).value=Msg[getRBtn(‘RButtons’)]” />Three’);
document.write(‘<input type=”radio” id=”RadioButtons” name=”RButtons” value=”4″‘);
document.write(‘ onClick=”document.getElementById(‘RadioBtnPick’).value=Msg[getRBtn(‘RButtons’)]” />Four’);
document.write(‘<input type=”radio” id=”RadioButtons” name=”RButtons” value=”5″‘);
document.write(‘ onClick=”document.getElementById(‘RadioBtnPick’).value=Msg[getRBtn(‘RButtons’)]” />Five’);
</script>
Report Result <input id=”RadioBtnPick” value=” size=”20″ />

</body>
</html>
[/code]

to post a comment
JavaScript

6 Comments(s)

Copy linkTweet thisAlerts:
@FangJun 13.2007 — An ID must be unique to the document, change you script accordingly.
Copy linkTweet thisAlerts:
@JMRKERauthorJun 13.2007 — Thanks 'Fang'. My 'copy/paste' finger got out of control.

I corrected it below.

But getting back to my original question:

Can I reference ONE unique ID of a radio button object and get ALL the associated NAME options associated with the named radio group?

That is what my 'consistency' question is about. Just wanted to know if it was feasible, and that is what the commented-out portion if the script addresses.

Thanks for your interest and attention.

[code=php]
<html>
<head>
<title>Selections Test</title>
<script type="text/javascript">

function getSBox(ids) {
var sel = document.getElementById(ids); // alert(sel+'nvalue:'+str);
var fnd = -1;
for (var i=0; i<sel.options.length; i++) { if (sel.selectedIndex == i) { fnd = i; } }
// return fnd; // return selected index of selection
// comment out next 3 lines if selectIndex used in line above

var str = "";
if (fnd != -1) { str = sel.options[fnd].value; }
return str;
}

function getRBtn(nameinfo) {
var sel = document.getElementsByName(nameinfo); // alert(nameinfo+'n'+sel);
var fnd = -1;
var str = '';
for (var i=0; i<sel.length; i++) {
if (sel[i].checked == true) { str = sel[i].value; fnd = i; }
}
// return fnd; // return option index of selection
// comment out next line if option index used in line above

return str;
}

/*
// This is the function that does not work correctly yet
function getRBtnID(ids) { // TEST FUNCTION FOR CONSISTENCY
var selobj = document.getElementByID(ids); // alert(ids+'n'+selobj);

// next line is questionable
var sel = selobj.document.getElementsByName(?????);

var fnd = -1;
var str = '';
for (var i=0; i<sel.length; i++) {
if (sel[i].checked == true) { str = sel[i].value; fnd = i; }
}
// return fnd; // return option index of selection
// comment out next line if option index used in line above

return str;
}
*/

function getCBox(ids) {
var sel = document.getElementById(ids);
var fnd = false;
var str = '';
if (sel.checked == true) { str = sel.value; fnd = true; } // alert(sel+'nvalue:'+str);
// return fnd; // return boolean status of checkbox
// comment out next line if checkbox boolean status used in line above

return str;
}

</script>
</head>
<body>
<h1>Selection Tests</h1>
<select id="SBox">
<option value=''>blank</option>
<option value="Zero">0</option>
<option value="One">1</option>
<option value="Two">2</option>
<option value="Three">3</option>
<option value="Four">4</option>
</select>
<button onClick="document.getElementById('SBoxPick').value=getSBox('SBox');">Report</button>
Result <input id="SBoxPick" value="" />

<p />
<input type="radio" name="RBtn" id="RBox5" value="Five" />5
<input type="radio" name="RBtn" id="RBox6" value="Six" />6
<input type="radio" name="RBtn" id="RBox7" value="Seven" />7
<button onClick="document.getElementById('RBoxPick').value=getRBtn('RBtn');">Report</button>
Result <input id="RBoxPick" value='' />

<p />
<input id="CBox1" type="checkbox" value="Eight" />8
<button onClick="document.getElementById('CBox1Pick').value=getCBox('CBox1');">Report</button>
Result <input id="CBox1Pick" value='false' />
<br />
<input id="CBox2" type="checkbox" value="Nine" checked />9
<button onClick="document.getElementById('CBox2Pick').value=getCBox('CBox2');">Report</button>
Result <input id="CBox2Pick" value='true' />
<br />
<input id="CBox3" type="checkbox" value="Ten" />10
<button onClick="document.getElementById('CBox3Pick').value=getCBox('CBox3');">Report</button>
Result <input id="CBox3Pick" value='false' />

<p />
<script type="text/javascript">
var Msg = new Array();
Msg[0] = '';
Msg[1] = "Element 1";
Msg[2] = "Element 2";
Msg[3] = "Element 3";
Msg[4] = "Element 4";
Msg[5] = "Element 5";
document.write('<input type="radio" id="RadioButtonA" name="RButtons" value="0"');
document.write(' onClick="document.getElementById('RadioBtnPick').value=Msg[getRBtn('RButtons')]" />blank');
document.write('<input type="radio" id="RadioButtonB" name="RButtons" value="1"');
document.write(' onClick="document.getElementById('RadioBtnPick').value=Msg[getRBtn('RButtons')]" />One');
document.write('<input type="radio" id="RadioButtonC" name="RButtons" value="2"');
document.write(' onClick="document.getElementById('RadioBtnPick').value=Msg[getRBtn('RButtons')]" />Two');
document.write('<input type="radio" id="RadioButtonD" name="RButtons" value="3"');
document.write(' onClick="document.getElementById('RadioBtnPick').value=Msg[getRBtn('RButtons')]" />Three');
document.write('<input type="radio" id="RadioButtonE" name="RButtons" value="4"');
document.write(' onClick="document.getElementById('RadioBtnPick').value=Msg[getRBtn('RButtons')]" />Four');
document.write('<input type="radio" id="RadioButtonF" name="RButtons" value="5"');
document.write(' onClick="document.getElementById('RadioBtnPick').value=Msg[getRBtn('RButtons')]" />Five');
</script>
Report Result <input id="RadioBtnPick" value='' size="20" />

</body>
</html>
[/code]
Copy linkTweet thisAlerts:
@toicontienJun 13.2007 — Try this out:
function getRelatedInputs(id) {
var obj = document.getElementById(id);
return obj.form.elements[obj.name];
}
Copy linkTweet thisAlerts:
@JMRKERauthorJun 13.2007 — Thanks 'toicontien', but still not quite there yet.

I modified this:
[code=php]
// This is the function that does not work correctly yet
function getRBtnID(ids) { // TEST FUNCTION FOR CONSISTENCY
var selobj = document.getElementById(ids);

// next line is collects information about options
var sel = selobj.form.elements[selobj.name];
alert(ids+'nIDobj'+selobj+'nNAMEobj'+sel);

var fnd = -1;
var str = '';
for (var i=0; i<sel.length; i++) {
if (sel[i].checked == true) { str = sel[i].value; fnd = i; }
}
// return fnd; // return option index of selection
// comment out next line if option index used in line above

return str;
}
[/code]

And added this within the body just before the end:
[code=php]

<hr>
<h3>Radio Select with ID</h3>
<p />
<input type="radio" name="RBtnID" id="RBoxID5" value="5" />Five
<input type="radio" name="RBtnID" id="RBoxID6" value="6" />Six
<input type="radio" name="RBtnID" id="RBoxID7" value="7" />Seven
<button onClick="document.getElementById('RBoxIDPick').value=getRBtnID('RBoxID5');">Report</button>
Result <input id="RBoxIDPick" value='' />
[/code]


Now I only get one error that states:

'selobj.form has no properties'

and never gets tot he alert message I used for testing.

Did I do something wrong with your suggestion?

Am I required to give the <form> a name?

Thanks for your thoughts.

Perhaps I can just not get 'there' from 'here' and am barking up the wrong tree! :o

The function works fine if I pass a 'name' argument.


I'm trying to create the new function because I usually use the ID and forget to pass the NAME argument when working with the radiobutton element.
Copy linkTweet thisAlerts:
@FangJun 13.2007 — &lt;script type="text/javascript"&gt;
// This is the function that does not work correctly yet
function getRBtnID(ids) { // TEST FUNCTION FOR CONSISTENCY
var obj = document.getElementById(ids);

// next line is collects information about options
var sel = document.getElementsByName(obj.name);

var fnd = -1;
var str = '';
for (var i=0; i&lt;sel.length; i++) {
if (sel[i].checked == true) { str = sel[i].value; fnd = i; }
}
// return fnd; // return option index of selection
// comment out next line if option index used in line above <br/>
return str;
}
&lt;/script&gt;
Copy linkTweet thisAlerts:
@JMRKERauthorJun 13.2007 — Beautiful.


That did it ... thanks to you both.

Now I can use the 3 (or optionally 4) functions with only the typing errors to account for instead

of remembering whether I used an ID or a NAME to do the status checks. Note that the functions can be modified to return the indexed value of the selections for the select boxes and radio buttons, if anyone would choose to use that rather than rely on the value parameters.

I know I still need to use the NAME in the radio tags, but I'm a lot more consistent with use of the ID in all the other tags.

I may not be able to solve the world's problems, but you guys just solved some of mine.

Thanks to you both for putting a step function into my learning curve.
×

Success!

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

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 4.29,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...