我有一个表单页面,用户可以在其中输入ID,并从mysql中提取相应的配置文件数据并显示在表单中,以便用户可以编辑它。
一个元素是一组无线电,因此您可以选择年级(即“1”,“2”,“3”等)。
当用户提供ID时,会进行AJAX调用以使用数据预先填充表单,包括选择适当的无线电。
问题:
用户必须选择年级才能提交表单。我用verifyForm()
方法检查了这个:
function verifyForm() {
if( !document.addStudentForm.elements["yearLevel"].checked ) {
alert( "You must select a year level before submitting." );
return false;
}
};
我希望这会检查yearLevel
,如果未选择选项,则提醒/返回false。
但是,当AJAX数据预先选择了yearLevel
无线电时,这仍然表现为用户没有选择无线电。
通过以下代码用js填充无线电:
document.getElementById( "yearLevel_<?=$student['student']->get('yearLevel')?>" ).checked = true;
编辑:这是相关的HTML。
<form name="addStudentForm" action="validation/updateStudentValidate.php" method="POST" onSubmit="return verifyForm()">
<input type="radio" value="1" name="yearLevel" disabled id="yearLevel_1" /> 1
<input type="radio" value="2" name="yearLevel" disabled id="yearLevel_2" /> 2
<input type="radio" value="3" name="yearLevel" disabled id="yearLevel_3" /> 3
<input type="radio" value="4" name="yearLevel" disabled id="yearLevel_4" /> 4
<input type="radio" value="5" name="yearLevel" disabled id="yearLevel_5" /> 5
<input type="radio" value="6" name="yearLevel" disabled id="yearLevel_6" /> 6
</form>
问题:
我是如何让我的javascript正确识别无线电是否已经过检查,无论是手动选择还是以编程方式选择?
答案 0 :(得分:0)
取自this StackOverflow post并适用于此示例和速度,您可以在AJAX成功回归中使用此功能:
var radios = document.getElementsByName('yearLevel'),
i = radios.length,
isChecked = false;
while(i--){
if (radios[i].checked) {
isChecked = true;
break;
}
}
然后调用函数时:
function verifyForm(){
if(!isChecked){
alert( "You must select a year level before submitting." );
return false;
}
};
这假设您的HTML中没有其他名称为yearLevel
的项目。
这实际上会返回值,我想我不确定您是否想要查看特定项目,或者只是已经检查过它们。这个功能可以做到这两点。