JavaScript and getting the value of radio button
Question
I tried to create an online calculation form using javascript, everything is ok except radio buttons.
Scenario:
x(select list) =
item1 - value="11.2"
item2 - value="7.6"
item3 - value="7"
y=(input number)
z=(input number)
coverkind=(radio button)
if 1 selected >> coverkind = z*800
if 2 selected >> coverkind = ((y/16)+1)*8*z
totalprice= (x*y*z)+(1000*z)+coverkind
my work till now:
<html>
<head>
<script type="text/javascript">
function getselectionPrice() {
var elt = document.getElementById("selectionone");
var selectionPrice = elt.options[elt.selectedIndex].value;
var y = document.getElementById("y").value;
var z = document.getElementById("z").value;
var ser = (selectionPrice * y * z);
var dz = z*1000;
var coverkind = document.getElementById("cover").value;
if (coverkind == 'soft') {
var SizePrice = (z * 800);
} else {
var SizePrice = ((y / 16) + 1) * 8 * z;
}
var finalPrice = ser + dz;
document.getElementById("totalPrice").value = finalPrice;
}
</script>
</head>
<body>
<div>
<form action="" id="calcform" onsubmit="return false;">
<div>
<div>
<fieldset>
<label>select</label>
<select id="selectionone" name='selectionone' onChange="getselectionPrice()">
<option value="11.2">1</option>
<option value="7.6">2</option>
<option value="7">3</option>
</select>
<br/>
<p>y
<input type="text" id="y" onchange="getselectionPrice()" />
</p>
<p>z
<input type="text" id="z" onchange="getselectionPrice()" />
</p>
<label>cover</label>
<input type="radio" name="cover" value="hard" />hard
<br />
<br>
<input type="radio" name="cover" value="soft" />soft
<br>
<br>
<br/>The new calculated price:
<INPUT type="text" id="totalPrice" Size=8>
</fieldset>
</div>
<input type='submit' id='submit' value='Submit' onclick="getselectionPrice()" />
</div>
</form>
</div>
</body>
</html>
If I remove the coverkind from js, the rest works fine. I googled about getting value from radio button and nothing found very relevant to this situation. firebug error panel :
TypeError: document.getElementById(...) is null var coverkind = document.getElementById("cover").value;
3 answers
solution1
1 2016-04-07 17:48:19
如果可以使用jQuery，则可以在一行中获取选中的单选按钮的值。
var Val = $("input[name=cover]:checked").val();
solution2
0 2015-09-06 06:01:29
You can use the output tag if you want or something else for your output. (a <p> element for example). Just make sure you give anything you want to access in your Javascipt an 'id' value.
You'll need to create a new file and call it something like 'script.js'. Google how to include this script in your html document.
Some of the things you'll need to use in your script:
document.getElementById(str)Returns an object representing an html element with an id of 'str'
parseFloat(str)Takes a string 'str' and return the float value
.valueThis is a read/write property of an input text box object that contains the text value
.checked..and a property of an input radio button object.
When you hit a wall refer to the great google ;) Put all that together and you should be on the right track.
solution3
0 ACCPTED 2015-09-07 06:51:26
Here is the solution of your problem.
First give a same id to your radio buttons. The checked property will tell you whether the element is selected:
<input type="radio" id="cover" name="cover" value="hard" checked="checked" />hard
<br />
<br>
<input type="radio" id="cover" name="cover" value="soft" />soft
and in JavaScript function, you can get it.
var coverkind = null;
if (document.getElementById('cover').checked)
{
coverkind = document.getElementById('cover').value;
}
if (coverkind == 'soft') {
var SizePrice = (z * 800);
} else {
var SizePrice = ((y / 16) + 1) * 8 * z;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.