471,338 Members | 1,275 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,338 software developers and data experts.

passing checked value of radio button to js function from form submit

The following (likely far from imperfect code), reports a value of NaN
in the j4 display. I suppose the problem is I am not really passing
the "checked" value of the radio button via .value ... without having
to get this value via html, is there any way I can passed the checked
value via html .. maybe with syntax like n4.checked.value or
something..

Many thanks.

<html>
<body>
WIDTH: <input type=text name=n1 value=5>
<br>
LENGTH:<input type=text id=n2 value=10>
<br>
EXTRA:<input type=text id=n3 value=20>
<br>
<br>
CHOOSE STYLE:
<br>

<input type="radio" checked name=n4 value=3>Green
<input type="radio" name=n4 value=5>Red
<input type="radio" name=n4 value=7>Blue

<br>
<br>
<input type=button value="Calulate Estimate"
onclick="mmm(n1.value,n2.value,n3.value,n4.value)" >
<br>
<br>
<br>
<br>
TOTAL COST:
<input type=text id=t value=0>
<script defer>
function mmm(x1,x2,x3,x4) {
var j1 = +x1;
var j2 = +x2;
var j3 = +x3;
var j4 = +x4;
alert(j4);
var d=document;
var el=d.getElementById("t");
el.value=Math.round(((j1*j2)+j3)*j4);
}
</script>

</body>
</html>
Jul 23 '05 #1
2 12206
> <html>
<body>
First of all: Please add a <form> tag here.
WIDTH: <input type=text name=n1 value=5>
<br>
LENGTH:<input type=text id=n2 value=10>
<br>
EXTRA:<input type=text id=n3 value=20>
<br>
<br>
CHOOSE STYLE:
<br>

<input type="radio" checked name=n4 value=3>Green
<input type="radio" name=n4 value=5>Red
<input type="radio" name=n4 value=7>Blue

<br>
<br>
<input type=button value="Calulate Estimate"
onclick="mmm(n1.value,n2.value,n3.value,n4.value)" >
You should better use document.forms[0].n1.value instead of n1.value, and so
on
<br>
<br>
<br>
<br>
TOTAL COST:
<input type=text id=t value=0>
Please add the closing </form> tag here.
<script defer>
You can't directly access the radio button value on the same web site. n4 is
an array of three values here. In order to get the current value, implement
the following function:
function radioValue(radio) {
var i;
for (i=0; i<radio.length; i++)
if (radio[i].checked)
return radio[i].value;
// otherwise no radio button of the radio button group is selected
return "undefined";
}
function mmm(x1,x2,x3,x4) {
var j1 = +x1;
var j2 = +x2;
var j3 = +x3;
var j4 = +x4;
alert(j4);
var d=document;
var el=d.getElementById("t");
You should only calculate the total cost, if one of the radio buttons was
selected. So add here:
if (radioValue(document.forms[0].n4) != "undefined")
el.value=Math.round(((j1*j2)+j3)*j4);
}
</script>

</body>
</html>
Finally change the following line onclick="mmm(n1.value,n2.value,n3.value,n4.value)" >

to that one:
onclick="mmm(document.forms[0].n1.value,document.forms[0].n2.value,document.
forms[0].n3.value,radioValue(document.forms[0].n4))">

Nice greetings from
Thomas
Jul 23 '05 #2
I figured out the below, found a function on this very forum that sets
the value of the checked radio.

function returnSelection(theRadio) {
var selection=null;
for(var i=0; i < theRadio.length; i++) {
if(theRadio[i].checked) {
selection=theRadio[i].value;
return selection;
}
} return selection;
}

Thanks.

ja***@cyberpine.com wrote in message news:<ef**************************@posting.google. com>...
The following (likely far from imperfect code), reports a value of NaN
in the j4 display. I suppose the problem is I am not really passing
the "checked" value of the radio button via .value ... without having
to get this value via html, is there any way I can passed the checked
value via html .. maybe with syntax like n4.checked.value or
something..

Many thanks.

<html>
<body>
WIDTH: <input type=text name=n1 value=5>
<br>
LENGTH:<input type=text id=n2 value=10>
<br>
EXTRA:<input type=text id=n3 value=20>
<br>
<br>
CHOOSE STYLE:
<br>

<input type="radio" checked name=n4 value=3>Green
<input type="radio" name=n4 value=5>Red
<input type="radio" name=n4 value=7>Blue

<br>
<br>
<input type=button value="Calulate Estimate"
onclick="mmm(n1.value,n2.value,n3.value,n4.value)" >
<br>
<br>
<br>
<br>
TOTAL COST:
<input type=text id=t value=0>
<script defer>
function mmm(x1,x2,x3,x4) {
var j1 = +x1;
var j2 = +x2;
var j3 = +x3;
var j4 = +x4;
alert(j4);
var d=document;
var el=d.getElementById("t");
el.value=Math.round(((j1*j2)+j3)*j4);
}
</script>

</body>
</html>

Jul 23 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

2 posts views Thread by Richard | last post: by
6 posts views Thread by Ken Loomis | last post: by
1 post views Thread by Leszek | last post: by
1 post views Thread by Jerim79 | last post: by
reply views Thread by rosydwin | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.