需要帮助获取要使用Javascript填充的字段
Need help getting fields to Populate using Javascript
我正在学习HTML入门课程，一直在努力查找使用java的页面的错误。我确信我犯了一个简单的错误，但我没有看到
以下是我正在使用的代码：https://jsfiddle.net/Terranova1340/ctc66nmu/2/
<body onload="processForm()">
<div id="wrapper">
<form id="cars" method="get">
<h1>AutoMart Sales Order Form</h1>
<img id="imgCar" src="civic2.jpg" />
<table class="Controls">
<tr>
<td><label for="Model">Select a Model:</label><br></td>
<td><select id="selModel" onchange="chgImage()">
<option value="civic" >Civic</option>
<option value="accord" >Accord</option>
</select></td>
</tr>
<tr>
<td><label for="optAcces">Optional Accessories:</label><br></td>
<td><label class='checkbox'><input type="checkbox" id="optAcces1"value="stereoSys" onchange="processForm()"> Stereo System<br>
<label class='checkbox'><input type="checkbox" id="optAcces2" value="leatherInt" onchange="processForm()"> Leather Interiors<br>
<label class='checkbox'><input type="checkbox" id="optAcces3" value="gpsSys" onchange="processForm()"> GPS System<br><br>
</td>
</tr>
<tr>
</tr>
<tr>
<tr>
</tr>
<td><label for="extFin">Exterior Finish:</label><br></td>
<td><label class='radiolabel'><input type="radio" name="selectedfinish" id="stanFin" onchange="processForm()"> Standard Finish<br>
<label class='radiolabel'><input type="radio" name="selectedfinish" id="metalFin" onchange="processForm()"> Metalic Finish<br>
<label class='radiolabel'><input type="radio" name="selectedfinish" id="custFin" onchange="processForm()"> Customized Finish<br>
</td>
</tr>
<tr>
<td><label for="base">Base Price</label><br></td>
<td><input type="text" id="basePrice" style="text-align:right;" readonly><br></td>
</tr>
<tr>
<td><label for="access">Accessories Price</label><br></td>
<td><input type="text" id="accessPrice" style="text-align:right;" readonly><br></td>
</tr>
<tr>
<td><label for="extPrice">Exterior Finish Price</label><br></td>
<td><input type="text" id="extPrice" style="text-align:right;" readonly><br></td>
</tr>
<tr>
<td><label>Estimated Total Price</label><br></td>
<td><input class- "ReadOnlyControls" type="text" name="estPrice" id="estPrice" style="text-align:right;" readonly><br></td>
</tr>
</table>
<input class="buttons" type="reset" value="Clear">
<input class="buttons" type="button" onclick="window.print()"; value="Print Form" id="print">
</form>
</div>
</body>
</html>
Java是
function chgImage() {
if (document.getElementById("selModel").value =="civic")
{
document.getElementById("imgCar").src="Civic2.jpg";
}
else
{
document.getElementById("imgCar").src="Accord2.jpg";
}
processForm();
}
function processForm(){
var bPrice = 0;
var aPrice = 0;
var oPrice = 0;
var tPrice = 0;
if (document.getElementById("selModel").value =="civic")
{
bPrice = 17355.89;
if (document.getElementById("optAccess1").checked == true)
{
aPrice = aPrice + 400.22;
}
if (document.getElementById("optAccess2").checked == true)
{
aPrice = aPrice + 850.44;
}
if (document.getElementById("optAccess3").checked == true)
{
aPrice = aPrice + 1600.00;
}
if (document.getElementById("metalFin").checked == true)
{
oPrice = 305.72;
}
if (document.getElementById("custFin").checked == true)
{
oPrice = 350.00;
}
}
else
{
basePrice = 19856.79;
if (document.getElementById("optAccess1").checked == true)
{
aPrice = aPrice + 500.89;
}
if (document.getElementById("optAccess2").checked == true)
{
aPrice = aPrice + 1015.85;
}
if (document.getElementById("optAccess3").checked == true)
{
aPrice = aPrice + 1600.00;
}
if (document.getElementById("metalFin").checked == true)
{
oPrice = 385.67;
}
if (document.getElementById("custFin").checked == true)
{
oPrice = 400.00;
}
}
//calculate total
tPrice = bPrice+aPrice+oPrice;
document.getElementById("basePrice").value = "$" + formatCurrency(bPrice).toString();
document.getElementById("accessPrice").value = "$" + formatCurrency(aPrice).toString();
document.getElementById("extPrice").value = "$" + formatCurrency(oPrice).toString();
document.getElementById("estPrice").value = "$" + formatCurrency(tPrice).toString();
}
function formatCurrency(num){
num = isNaN(num) || num === ''|| num === null ? 0.00 : num;
return parseFloat(num).toFixed(2);
}
我的问题是基本价格到估计总价字段没有填充。
提前感谢！
function chgImage() {
if (document.getElementById("selModel").value =="civic")
{
document.getElementById("imgCar").src="Civic2.jpg";
}
else
{
document.getElementById("imgCar").src="Accord2.jpg";
}
processForm();
}
function processForm(){
var bPrice = 0;
var aPrice = 0;
var oPrice = 0;
var tPrice = 0;
if (document.getElementById("selModel").value =="civic")
{
bPrice = 17355.89;
if (document.getElementById("optAccess1").checked == true)
{
aPrice = aPrice + 400.22;
}
if (document.getElementById("optAccess2").checked == true)
{
aPrice = aPrice + 850.44;
}
if (document.getElementById("optAccess3").checked == true)
{
aPrice = aPrice + 1600.00;
}
if (document.getElementById("metalFin").checked == true)
{
oPrice = 305.72;
}
if (document.getElementById("custFin").checked == true)
{
oPrice = 350.00;
}
}
else
{
basePrice = 19856.79;
if (document.getElementById("optAccess1").checked == true)
{
aPrice = aPrice + 500.89;
}
if (document.getElementById("optAccess2").checked == true)
{
aPrice = aPrice + 1015.85;
}
if (document.getElementById("optAccess3").checked == true)
{
aPrice = aPrice + 1600.00;
}
if (document.getElementById("metalFin").checked == true)
{
oPrice = 385.67;
}
if (document.getElementById("custFin").checked == true)
{
oPrice = 400.00;
}
}
//calculate total
tPrice = bPrice+aPrice+oPrice;
document.getElementById("basePrice").value = "$" + formatCurrency(bPrice).toString();
document.getElementById("accessPrice").value = "$" + formatCurrency(aPrice).toString();
document.getElementById("extPrice").value = "$" + formatCurrency(oPrice).toString();
document.getElementById("estPrice").value = "$" + formatCurrency(tPrice).toString();
}
function formatCurrency(num){
num = isNaN(num) || num === ''|| num === null ? 0.00 : num;
return parseFloat(num).toFixed(2);
}<body onload="processForm()">
<div id="wrapper">
<form id="cars" method="get">
<h1>AutoMart Sales Order Form</h1>
<img id="imgCar" src="civic2.jpg" />
<table class="Controls">
<tr>
<td><label for="Model">Select a Model:</label><br></td>
<td><select id="selModel" onchange="chgImage()">
<option value="civic" >Civic</option>
<option value="accord" >Accord</option>
</select></td>
</tr>
<tr>
<td><label for="optAcces">Optional Accessories:</label><br></td>
<td><label class='checkbox'><input type="checkbox" id="optAccess1"value="stereoSys" onchange="processForm()"> Stereo System<br>
<label class='checkbox'><input type="checkbox" id="optAccess2" value="leatherInt" onchange="processForm()"> Leather Interiors<br>
<label class='checkbox'><input type="checkbox" id="optAccess3" value="gpsSys" onchange="processForm()"> GPS System<br><br>
</td>
</tr>
<tr>
</tr>
<tr>
<tr>
</tr>
<td><label for="extFin">Exterior Finish:</label><br></td>
<td><label class='radiolabel'><input type="radio" name="selectedfinish" id="stanFin" onchange="processForm()"> Standard Finish<br>
<label class='radiolabel'><input type="radio" name="selectedfinish" id="metalFin" onchange="processForm()"> Metalic Finish<br>
<label class='radiolabel'><input type="radio" name="selectedfinish" id="custFin" onchange="processForm()"> Customized Finish<br>
</td>
</tr>
<tr>
<td><label for="base">Base Price</label><br></td>
<td><input type="text" id="basePrice" style="text-align:right;" readonly><br></td>
</tr>
<tr>
<td><label for="access">Accessories Price</label><br></td>
<td><input type="text" id="accessPrice" style="text-align:right;" readonly><br></td>
</tr>
<tr>
<td><label for="extPrice">Exterior Finish Price</label><br></td>
<td><input type="text" id="extPrice" style="text-align:right;" readonly><br></td>
</tr>
<tr>
<td><label>Estimated Total Price</label><br></td>
<td><input class- "ReadOnlyControls" type="text" name="estPrice" id="estPrice" style="text-align:right;" readonly><br></td>
</tr>
</table>
<input class="buttons" type="reset" value="Clear">
<input class="buttons" type="button" onclick="window.print()"; value="Print Form" id="print">
</form>
</div>
</body>
</html>您使用了错误的id's，请在此处更改为optAccess1、optAccess2、optAccess3
<td><label class='checkbox'><input type="checkbox" id="optAccess1"value="stereoSys" onchange="processForm()"> Stereo System<br>
<label class='checkbox'><input type="checkbox" id="optAccess2" value="leatherInt" onchange="processForm()"> Leather Interiors<br>
<label class='checkbox'><input type="checkbox" id="optAccess3" value="gpsSys" onchange="processForm()"> GPS System<br><br>
</td>
相关文章：
- 如何使用与单个查找字段相关的信息填充字段
- 动态填充字段的Jquery验证
- 使用另一个字段的日期+14天自动填充字段
- Mongoose，按填充字段对查询进行排序
- 使用 Codeigniter 和 jquery 在 Modal Bootstrap 3 中的 DB 中填充字段
- 填充字段后更改不透明度
- 根据下拉选择(Javascript / HTML）动态填充字段
- JavaScript 重置 PHP/AJAX 中的填充字段
- 对填充字段的 MongoDB 查询
- 根据 $_POST 值填充字段
- Javascript 自动完成表单并在预填充字段中附加文本
- Jquery 未完成填充字段
- 在客户端使用 javascript、ajax 或 php 计算填充字段的数量
- 使用地理位置坐标填充字段
- 根据同时在另一个字段中输入的内容自动填充字段
- 如何将struts1与angularjs混合以自动填充字段
- 填充字段，该字段是单个查询中嵌入数组的属性
- Phantom.js填充字段，点击提交，现在只能访问下一页
- 如何在预填充字段时清除iOS占位符JS文本
- 我的response.jsp赢了'无法正确填充字段
