/    Sign up×
Community /Pin to ProfileBookmark

Can’t assign radio button selection to variable. Why?

Copy linkTweet thisAlerts:
Feb 20.2012

The form link to below performs a bit of basic calculation, adding up a total based on selections from drop-down menus.

That portion of the form works fine. But I also need to multiply the total based on a selected value from three radio buttons.

I thought I could find a simple script online to assign the selected radio value to a variable, then multiply the total from the drop down menus by that variable.

But for some reason, something in the code is preventing me from getting the radio button value and assigning it to a variable. I’m a total noob to JS and I just can’t determine the problem.

Can a more experienced coder take a look?

Your help is really appreciated.

[URL=”http://getanythingsponsored.com/newform.html”]main form [/URL]

[URL=”http://getanythingsponsored.com/wiz.js”]Javascript[/URL]

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@007JulienFeb 20.2012 — This example show how to make a loop with the common name (here browser, or dep in your case) of radio buttons...
[CODE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript">
function displayResult(){
var i=document.frm.browser.length-1;
while (-1<i && !document.frm.browser[i].checked) i--;
if (document.frm.browser[i].checked) document.getElementById('result').value=document.frm.browser[i].value;
}
</script>
</head>
<body>
<p>Select your favorite browser:</p>
<form name="frm">
<input type="radio" name="browser" onclick="displayResult()" value="Internet Explorer">Internet Explorer<br />
<input type="radio" name="browser" onclick="displayResult()" value="Firefox">Firefox<br />
<input type="radio" name="browser" onclick="displayResult()" value="Opera">Opera<br />
<input type="radio" name="browser" onclick="displayResult()" value="Google Chrome">Google Chrome<br />
<input type="radio" name="browser" onclick="displayResult()" value="Safari">Safari<br /><br />
Your favorite browser is: <input type="text" id="result" />
</form>
</body>
</html>[/CODE]Nb : Your value (1, 50, 25) are not homogeneous (100, 50, 25 or 1, 0.5, 0,25) would be better.
Copy linkTweet thisAlerts:
@pbaseauthorFeb 20.2012 — Thanks, Julien.

One thing I noticed is that you've used an onClick handler in the html for the radio buttons. I didn't have that in my script. Here's the code I was using to try to assign the radio value to a variable:


[CODE]function process(){

var radio = "";

for (i = 0; i < 3; i++){
if (document.form_20443524032.dep[i].checked == true){
radio = document.form_20443524032.dep[i].value; }
}
}[/CODE]


Should I have onclick="process()" in my html?
Copy linkTweet thisAlerts:
@007JulienFeb 20.2012 — No, the onclick event is not useful. It was only an example, I take it in w3cScholls.com.

Your code would be better with a document.form_20443524032.dep.length instead of the 3 (for further modifications) an only one access to the DOM (Sorry, I am reading an article about best practices).
[CODE]function process(){
var fradioValue = 0, cradioCol=document.form_20443524032.dep;
for (var i = 0,l=cradioCol.length; i < l; i++){
if (cradioCol[i].checked == true){
fradioValue = parseFloat(cradioCol[i].value);}
}
}
// work with the fradioValue
}[/CODE]A while loop would be perhaps nor shorter...
Copy linkTweet thisAlerts:
@pbaseauthorFeb 21.2012 — Well, I'm unfortunately still getting the same error when adding the new code, that fradioValue is undefined.

I'm open to any other suggestions.
Copy linkTweet thisAlerts:
@007JulienFeb 21.2012 — The local variable fradioValue is only define in the function process(). If you want use it in a global scope, you have to write

[CODE]
[COLOR="Red"]var fradioValue;[/COLOR]
function process(){
var cradioCol=document.form_20443524032.dep;
[COLOR="Red"]fradioValue = 0; // without var [/COLOR]
for (var i = 0,l=cradioCol.length; i < l; i++){
if (cradioCol[i].checked == true){
[COLOR="Red"]fradioValue[/COLOR] = parseFloat(cradioCol[i].value);}
}
}
[COLOR="Blue"]// work with the fradioValue[/COLOR]
}
[COLOR="Red"]// Now work too with fradioValue after a call to process[/COLOR]
[/CODE]
×

Success!

Help @pbase 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 5.19,
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: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

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