Question

尝试使用ID验证列表框和单选按钮，仅在onsubmit上验证。如果我在浏览器中运行它没有显示任何警报。单击提交按钮时，我想运行脚本以验证是否选中了收音机和列表框，如果选择了一个则不执行任何操作。如果未选择一个，我希望它发布一条警告消息。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

        function validate()
    {
        if (document.getElementById("drop1").value == "-1")
        {
            alert("please select A");
        }
        if (document.getElementById("drop2").value == "-1")
        {
            alert("please select B");
        }
        if (document.getElementById("drop3").value == "-1")
        {
            alert("please select C");
        }
        if (document.getElementById("drop4").value == "-1")
        {
            alert("please select D");
        }
        if (document.getElementById("drop5").value == "-1")
        {
            alert("please select E");
        }

            var radios = document.getElementsByName("A");
            var formValid = false;

            var i = 0;
            while (!formValid && i < radios.length) 
            {
                if (radios[i].checked) formValid = true;
                i++;        
            }

            if (!formValid) alert("Must check some option!");
            return formValid;
        }

    }
</script>
</head>
<body>
A:<select id="drop1">

    <option value="1">item 1</option>

    <option value="2">item 2</option>

    <option value="3">item 3</option>

    <option value="4">item 4</option>

    <option value="0">All</option>

</select>
 B:   <select id="drop2" >

    <option value="1">item 1</option>

    <option value="2">item 2</option>

    <option value="3">item 3</option>

    <option value="4">item 4</option>

    <option value="0">All</option>

</select>

C:<select id="drop3" >

    <option value="1">item 1</option>

    <option value="2">item 2</option>

    <option value="3">item 3</option>

    <option value="4">item 4</option>

    <option value="0">All</option>

</select>

D:<select id="drop4" >

    <option value="1">item 1</option>

    <option value="2">item 2</option>

    <option value="3">item 3</option>

    <option value="4">item 4</option>

    <option value="0">All</option>

</select>

E:<select id="drop5" >

    <option value="1">item 1</option>

    <option value="2">item 2</option>

    <option value="3">item 3</option>

    <option value="4">item 4</option>

    <option value="0">All</option>

</select>
<input type="radio" id=myradio1 name="A" value="1">one
<input type="radio" id=myradio2 name="A" value="2">two
<input type="radio" id=myradio3 name="A" value="3">three
<input type="submit" value="submit" onclick="validate()">
</body>
</html>

Answer 1

onsubmit事件只能在form元素上设置。在input元素上，您可以设置onclick个事件。

Answer 2

您可以查看特定选择框的值：

http://jsfiddle.net/sMNd2/

<select id="drop4" >

<option value="1">item 1</option>

<option value="2">item 2</option>

<option value="3">item 3</option>

<option value="4">item 4</option>

<option value="0">All</option>

$("#selector").click(function() {
alert($("#drop4").val());

}）;

并查看选择了哪个值。基于该提醒用户。

Answer 3

onsubmit不是input类型的有效属性，它应位于<form>元素上：

<form method="POST"  onsubmit="validate()">


</form>

将您的代码包装在<form>

中

<强> jsFiddle

如果您不想使用<form>，则应使用onlick代替onsubmit：

<input type="submit" value="submit" onclick="validate()"/>

<强> jsFiddle

<小时/> 如果要检查是否选择了任何选择框，可以使用：

if (document.getElementById("drop1").value == "")
{
   alert("please select A");
}

请注意，您希望选择框中的“占位符”不是值。因此，当用户没有选择任何内容时，默认选择占位符;没有价值。

因此，当选择占位符时会抛出错误

<强> HTML

 A:<select id="drop1">
    <option value="" style="display: none;">Placeholder</option>
    <option value="2">item 1</option>
    <option value="2">item 2</option>
    <option value="3">item 3</option>
    <option value="4">item 4</option>
    <option value="0">All</option>
</select>

<强> jsFiddle

我只做了一次列表框检查，你可以用同样的方式做其他人。

还要将您的ID名称放在引号中：

 <input type="radio" id='myradio1' name="A" value="1"/>one
 <input type="radio" id='myradio2' name="A" value="2"/>two
 <input type="radio" id='myradio3' name="A" value="3"/>three
 <input type="submit" value="submit"/>

希望这有帮助！

通过ID验证javascript中的列表框和单选按钮

3 个答案: