使用单击单选按钮时的数据自动填充输入字段
Automatically populate input field with data on clicking radio buttons
当用户在 2 个类别中选择单选按钮时 计划详细信息 和 计划持续时间 输入字段应通过 JavaScript 填充相关数据。
请检查下面的 html 标记和 JavaScript，并建议更正或替代可行的方法。
<h3 class="fltClear">Plan Details</h3>
<div id="spryradio1">
<dt>Plan Type: <span class="required">*</span></dt>
<dd>
<label>
<input type="radio" name="RadioGroup1" value="Silver" id="RadioGroup1_0" onClick="changeplanprice();" class="RadioGroup1" />
Silver</label>
<br>
<label>
<input type="radio" name="RadioGroup1" value="Gold" id="RadioGroup1_1" onClick="changeplanprice();" class="RadioGroup1" />
Gold</label>
<br>
<label>
<input type="radio" name="RadioGroup1" value="Platinum" id="RadioGroup1_2" onClick="changeplanprice();" class="RadioGroup1" />
Platinum</label>
<br>
<label>
<input type="radio" name="RadioGroup1" value="All-in-one" id="RadioGroup1_3" onClick="changeplanprice();" class="RadioGroup1" />
All-in-one</label>
<br>
<span class="radioRequiredMsg">Please make a selection.<span class="hint-pointer"> </span></span>
</dd>
</div>
<!--Plan Duration-->
<div id="spryradio2">
<dt>Plan Duration: <span class="required">*</span></dt>
<dd>
<label>
<input type="radio" name="RadioGroup2" value="Yearly" id="RadioGroup2_0" onClick="changeplanprice();" class="RadioGroup2" />
Yearly</label>
<br>
<label>
<input type="radio" name="RadioGroup2" value="Quaterly" id="RadioGroup2_1" onClick="changeplanprice();" class="RadioGroup2" />
Quaterly</label>
<br>
<label>
<input type="radio" name="RadioGroup2" value="Monthly" id="RadioGroup2_2" onClick="changeplanprice();" class="RadioGroup2" />
Monthly</label>
<br>
<label>
<input type="radio" name="RadioGroup2" value="Other" id="RadioGroup2_3" onClick="changeplanprice();" class="RadioGroup2" />
Other</label>
<br>
<span class="radioRequiredMsg">Please make a selection.<span class="hint-pointer"> </span></span>
</dd>
</div>
<!--Plan Price-->
<div>
<script>
function changeplanprice() {
var plantype=document.getElementByClassName('RadioGroup1').value;
var planduration=document.getElementByClassName('RadioGroup2').value;
if(plantype=="Silver") {
if(planduration=="Monthly") {
document.getElementById('Price').value='£ 39.98';
document.getElementById('Price').readOnly=true;
}
else if(planduration=="Quaterly") {
document.getElementById('Price').value='£ 79.98';
document.getElementById('Price').readOnly=true;
}
else if(planduration=="Yearly") {
document.getElementById('Price').value='£ 124.98';
document.getElementById('Price').readOnly=true;
}
else if(planduration=="Other") {
document.getElementById('Price').value='';
document.getElementById('Price').readOnly=false;
}
}
else if(plantype=="Gold") {
if(planduration=="Monthly") {
document.getElementById('Price').value='£ 49.98';
document.getElementById('Price').readOnly=true;
}
else if(planduration=="Quaterly") {
document.getElementById('Price').value='£ 99.98';
document.getElementById('Price').readOnly=true;
}
else if(planduration=="Yearly") {
document.getElementById('Price').value='£ 179.98';
document.getElementById('Price').readOnly=true;
}
else if(planduration=="Other") {
document.getElementById('Price').value='';
document.getElementById('Price').readOnly=false;
}
}
else if(plantype=="Platinum") {
if(planduration=="Monthly") {
document.getElementById('Price').value='£ 59.98';
document.getElementById('Price').readOnly=true;
}
else if(planduration=="Quaterly") {
document.getElementById('Price').value='£ 199.98';
document.getElementById('Price').readOnly=true;
}
else if(planduration=="Yearly") {
document.getElementById('Price').value='£ 279.98';
document.getElementById('Price').readOnly=true;
}
else if(planduration=="Other") {
document.getElementById('Price').value='';
document.getElementById('Price').readOnly=false;
}
} }
</script>
<div>
<dt><label for="Price">Plan Price:</label></dt>
<dd class="bg"><input type="text" name="Price" id="Price" size="80" class="input" readonly="readonly" />
</dd>
</div>
我会给出的第一个建议是单身
document.getElementById('Price').readOnly=true;
这将使您的代码更具可读性。第二个建议是，您可以有 2 个数组，一个用于计划类型，另一个用于计划持续时间，并且单选按钮而不是文本将数组索引作为值。
这不仅会使您的代码更具可读性，而且更易于管理。假设如果您必须添加一个计划持续时间，则必须为所有计划类型添加相同的条件，其中可能会错过一个案例。
您的函数可以使用一些清理，但我看到了一个问题。您正在使用document.getElementByClassName(' ... ').value; .这是不正确的。该函数实际上是document.getElementsByClassName的（注意元素是复数）。此函数返回具有该类名的所有元素的数组。所以你不能直接打电话给.value。您需要遍历元素数组以查找要检查的元素并获取该元素的值。
鉴于一组的所有单选按钮都具有相同的名称，并且还有另一个功能，document.getElementsByName，没有理由使用getElementsByClassName。
我会改变你的功能。这经过测试并有效，并且更容易扩展，以防您提出新的定价选项。您所要做的就是添加到prices对象：
function changeplanprice() {
var plantype;
var plantypes = document.getElementsByName('RadioGroup1');
for (var i=0; i < plantypes.length; i++) {
if (plantypes[i].checked)
plantype = plantypes[i].value;
}
var planduration;
var plandurations = document.getElementsByName('RadioGroup2');
for (i = 0; i < plandurations.length; i++) {
if (plandurations[i].checked)
planduration = plandurations[i].value;
}
if (plantype === undefined || planduration === undefined)
return;
document.getElementById('Price').readOnly = (planduration != "Other");
var prices = {
"Silver":{
"Monthly":"£ 39.98",
"Quarterly":"£ 79.98",
"Yearly":"£ 124.98",
"Other":""
},
"Gold":{
"Monthly":"£ 49.98",
"Quarterly":"£ 99.98",
"Yearly":"£ 179.98",
"Other":""
},
"Platinum":{
"Monthly":"£ 59.98",
"Quarterly":"£ 199.98",
"Yearly":"£ 279.98",
"Other":""
},
"All-in-one":{
"Monthly":"...", /* prices weren't provided for All-in-one in the example */
"Quarterly":"...",
"Yearly":"...",
"Other":""
}
};
document.getElementById('Price').value = prices[plantype][planduration];
}
相关文章：
- 从确认框中预填充输入文本框
- 点击填充输入的按钮&提交
- 如何自动填充输入文本框值以与名称相同
- 使用 JSON 数组填充输入字段
- 使用 Jquery 在 SharePoint 2007 上自动填充输入文本
- 如何使用Javascript填充输入文本字段
- IE JavaScript参数和填充输入字段
- 使用其他输入值自动填充输入
- 在表单提交中填充输入字段
- AngularJS-用下拉菜单填充输入文本字段
- 如何使用选中的复选框文本自动填充输入文本字段
- 如果选择'其他'然后填充输入字段
- casperjs根据他的xpath填充输入
- Shiny中未读取的自动填充输入
- Javascript复选框填充输入并将不同的值传递给表单
- 壁虎浏览器不会在加载时填充输入
- 用网址图像填充输入
- 单击用文本填充输入框
- 如何使用 Javascript 动态加载 iFrame 源代码和自动填充输入表单
- 如何用数据库中的值填充输入文本字段 单击复选框
