我的表单中有 4 个单选按钮,提交表单后,应选中任何单选按钮,如果没有,将显示警报消息。 它在Chrome,Firefox中正常工作,但是在IE中,我检查了Radion,它始终显示警报,因此我无法提交表单,我已经在下面给出了我的代码,请帮助我
.PHP:
<form action="user_register.php" method="POST" name="myForm" onsubmit="return validateForm()" enctype="multipart/form-data">
<label>USERNAME:</label></td>
<input type="text" name="username" class="regtext" required/>
<label>RESIDING CITY:</label></td>
<input type="text" name="city" class="regtext" required/>
<label>I'M A</label>
<label>ARTIST   <input type="radio" value="1" name="user_type" > </label> 
<label>MODEL   <input type="radio" value="2" name="user_type"></label> 
<label>COMPOSER   <input type="radio" value="3" name="user_type" ></label> <br>
<label>BEAT MAKER   <input type="radio" value="4" name="user_type" ></label> 
<label>NONE   <input type="radio" value="0" name="user_type" ></label>
<label> <input type="checkbox" value="1" name="letter" >   I WOULD LIKE TO RECEIVE YOUR NEWSLETTER</label>
</div>
<div class="mainhead">
<input type="submit" name="register" class="submit" value="SEND AND REGISTER NOW">
</div>
</form>
.JS:
<script type="text/javascript">
function validateForm() {
var province = document.forms["myForm"]["province"].value;
if (province == 0 ) {
alert("Select Province");
document.myForm.province.focus()
return false;
}
var user_type = document.forms["myForm"]["user_type"].value;
if (user_type == null || user_type == "") {
alert("Select Who You are");
return false;
}
var letter = document.forms["myForm"]["letter"].value;
if (letter == null || letter == "") {
alert("Select that you want to receive news letter");
return false;
}
}
</script>
问题是,对于IE,document.forms["myForm"]["user_type"]
是一个HTMLCollection,没有value
解决方案是改变
var user_type = document.forms["myForm"]["user_type"].value;
自
var user_type = document.querySelector('form[name="myForm"] input[name="user_type"]:checked').value;
我观察到的是:
代码中province
没有名称(您给出的名称)。如果将其包含在此处,它将不起作用。
<script type="text/javascript">
function validateForm() {
var province = document.forms["myForm"]["province"].value;
if (province == 0 ) {
alert("Select Province");
document.myForm.province.focus()
return false;
}
var user_type = document.forms["myForm"]["user_type"].value;
if (user_type == null || user_type == "") {
alert("Select Who You are");
return false;
}
var letter = document.forms["myForm"]["letter"].value;
if (letter == null || letter == "") {
alert("Select that you want to receive news letter");
return false;
}
}
</script>
删除province
验证后。它开始工作了。
<script type="text/javascript">
function validateForm() {
var user_type = document.forms["myForm"]["user_type"].value;
if (user_type == null || user_type == "") {
alert("Select Who You are");
return false;
}
var letter = document.forms["myForm"]["letter"].value;
if (letter == null || letter == "") {
alert("Select that you want to receive news letter");
return false;
}
}
</script>
因此,正如Rayon Dabre先生所说,"没有元素以省命名"。所以,我也同意他的观点。从 validateForm() 函数中删除province
验证(因为它未在 <from></form>
中使用)
这段代码应该可以解决问题:
function validateForm() {
var user_type = document.getElementsByName('user_type');
var u_type = '';
for (var i = 0, length = user_type.length; i < length; i++) {
if (user_type[i].checked) {
// do whatever you want with the checked radio
u_type = user_type[i].value;
// only one radio can be logically checked, don't check the rest
break;
}
}
if (u_type == "") {
alert("Select Who You are");
return false;
}
var letter = document.getElementsByName('letter')[0].checked;
if (letter == "" || letter == undefined) {
alert("Select that you want to receive news letter");
return false;
}
}