HTML表单与javascript得到"在IE,但在Chrome工作
HTML form with javascript gets "NaN" in IE but works in Chrome
我绝不是一个程序员,但我设法让这在Chrome中工作,但当我在IE上尝试时,我得到了"NaN"(如果这很重要的话)。它基本上需要4个标准,并做一些数学计算来给出一个报价。有人能帮忙吗?
<html>
<head>
<title>instant inspection quote tool</title>
<SCRIPT Language="JavaScript">
function calculateFee(frm){
var building = frm.building.value
var distance = frm.distance.value
var age = frm.age.value
var sqft = frm.sqft.value
var total = 0
building = Number(building)
distance = Number(distance)
age = Number(age)
sqft = Number(sqft)
total = Number(total)
total = building + distance + age + sqft
frm.total.value = total
}
</script>
</head>
<body>
<h1>Inspection Fee Calculator</h1>
<form method="post" action="">
Select the type of home
<br><input type="radio" name="building" value="375"> detached
<br><input type="radio" name="building" value="350"> semi-detached
<br><input type="radio" name="building" value="350"> condo or freehold townhome - end unit
<br><input type="radio" name="building" value="325"> condo or freehold townhome - interior unit
<br><input type="radio" name="building" value="299"> condo apartment
<br><br>Is the home within 50 kms of Ottawa?
<br><input type="radio" name="distance" value="0"> yes
<br><input type="radio" name="distance" value="25"> no
<br><br>Is the home less than 50 years old?
<br><input type="radio" name="age" value="0"> yes
<br><input type="radio" name="age" value="25"> no
<br><br>Is the home less than 2000 square feet?
<br><input type="radio" name="sqft" value="0"> yes
<br><input type="radio" name="sqft" value="25"> no
<br><br>
<input type="button" name="button" value="Calculate Fee" onClick="calculateFee(this.form)">
<table>
<tr>
<td align="right">Total Inspection fee:</td>
<td>
<input type="text" name="total" size="30" maxlength="30">
</td>
</tr>
</table>
</form>
</body>
</html>
试试这个-注意:querySelector和querySelectorAll在IE中不起作用<</p>
现场演示
function calculateFee(frm) {
var total = 0,
rads = frm.querySelectorAll('input:checked'); // get all checked radios
for (var i = 0; i < rads.length; i++) {
var num = Number(rads[i].value);
total += isNaN(num) ? 0 : num;
}
frm.total.value = total;
}
对于单独的单选值使用名称-然而,如果不选中单选,直接获取值将失败
var building = frm.querySelector("input[name=building]:checked");
if (building) total += Number(building.value);
要验证,连接表单的onsubmit
function validate(frm) {
var rads = frm.querySelectorAll('input:checked'); // get all checked radios
if (rads.length<4) {
alert("Please select one of each");
return false; // cancel form
}
return true;
}
window.onload=function() {
document.forms[0].onsubmit=function() {
return validate(this);
}
}
如果这些值都没有勾选,那么这些值就是未定义的。
function getRadioValue( radioElement ){
for (var i=0; i < radioElement.length; i++){
if ( radioElement[i].checked ){
return radioElement[i].value;
}
}
}
将前面的代码替换为下面的…
var building = getRadioValue( frm.building ) || 0;
var distance = getRadioValue( frm.distance ) || 0;
var age = getRadioValue( frm.age ) || 0;
var sqft = getRadioValue( frm.sqft ) || 0;
var total = 0
试试这个:
var building = frm.querySelector("[name=building]:checked");
var distance = frm.querySelector("[name=distance]:checked");
var age = frm.querySelector("[name=age]:checked");
var sqft = frm.querySelector("[name=sqft]:checked");
building = (building && building.value) || 0;
distance = (distance && distance.value) || 0;
age = (age && age.value) || 0;
sqft = (sqft && sqft.value) || 0;
相关文章:
- 列表样式在IE中未设置为none,但在IE中适用
- 滚动在Chrome中有效,但在Firefox或IE中无效
- 为什么这个按钮在IE中有效,但在Firefox中无效
- 以下颜色更改功能在IE9和Firefox中运行良好,但在早期的IE或Chrome中则不然
- Javascript'元素'在ie中未定义,但在chrome和firefox中运行良好
- 获取所选选项的Javascript在Webkit/FF中有效,但在IE中无效
- javascript代码,用于删除firefox中的空白,但在IE和chrome中无法正常工作
- 无法从IE中的data.responseText获取结果,但在其他浏览器中工作
- jQuery代码在Firefox中工作,但在IE中失败
- Javascript正则表达式在IE中失败,但在Chrome和Edge中工作
- 如何调试遗留的javascript代码(适用于IE,但在Google Chrome中不正常)
- 禁用字段在IE中有效,但在Firefox中无效
- jqGrid-在IE中产生SCRIPT5007错误,但在localhost上工作
- 为什么对img标记的前向引用在Chrome上失败,但在FireFox和IE上有效
- Date对象在Chrome中有效,但在Safari、Firefox或IE中无效
- ng-click在IE中不起作用,但在CHROME中工作正常
- 拖放文件时,dataTransfer.items属性在Firefox和IE中未定义,但在Chrome中未定义
- jQuery scrollTop没有'不能在FF或IE中制作动画,但在chrome中效果良好
- innerHTML=Date()在fiddle中工作,但在Chrome或IE中不工作
- Onchange,向上,向下箭头键适用于FF和Chrome,但在IE中不起作用