单选按钮在ie中无法正常工作

Question

我在表单中有4个单选按钮，提交表单后任意一个单选按钮都应该被选中，如果没有被选中则会显示警示信息。在Chrome和Firefox中它能正常工作，但在IE中，当我选中一个单选按钮时，它总是显示警示信息，因此我无法提交表单。下面是我的代码，请帮帮我。

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 &nbsp <input type="radio" value="1" name="user_type" >    </label>&nbsp
    <label>MODEL &nbsp <input type="radio" value="2" name="user_type"></label>&nbsp
    <label>COMPOSER &nbsp <input type="radio" value="3" name="user_type" ></label>&nbsp<br>
    <label>BEAT MAKER &nbsp <input type="radio" value="4" name="user_type" ></label>&nbsp
    <label>NONE &nbsp <input type="radio" value="0" name="user_type" ></label>
    <label> <input type="checkbox" value="1" name="letter" > &nbsp  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>

- Brindha Nisam

---

没有名为 province 的元素。 - Rayon

@Rayon Dabre，那没关系。我只需要关于用户类型及其验证的内容。 - Brindha Nisam

你的HTML代码无效。也许这里有问题。请删除第2行和第4行中的 </td> 标记，以及第13行中的 </div> 标记。 - Huelfe

Answer 1

问题是对于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;

- microtony

---

在Chrome中也没有进行验证。 - Brindha Nisam

你把省份改成城市了吗？那是很重要的。 - microtony

Answer 2

我观察到的是：

代码中没有名为“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>中未使用）。

- Nana Partykar

Answer 3

这段代码应该可以解决问题：

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;
    }
}

- Huelfe