1

我试图通过 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>
4

3 回答 3

0

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

于 2013-11-11T10:55:12.953 回答
0

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

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());

});

并查看选择了哪个值。基于该警报用户。

于 2013-11-11T10:58:35.550 回答
0

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

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


</form>

将您的代码包装在<form>

jsFiddle

如果你不想使用 a<form>你应该使用onlick而不是onsubmit：

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

jsFiddle

如果要检查是否选择了任何选择框，可以使用：

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

请注意，您需要一个没有值的选择框的“占位符”。所以当用户没有选择任何东西时，默认选择占位符；这没有价值。

So when the placeholder is selected a error is thrown

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"/>

希望这有帮助！

于 2013-11-11T11:09:10.127 回答