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

J

jason

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>
 
T

Thomas Hoheneder


First of all: Please add a said:
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 said:
<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.checked)
return radio.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
 
J

jason

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.checked) {
selection=theRadio.value;
return selection;
}
} return selection;
}

Thanks.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top