gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 08:45:13 25 4
gpt4 key购买 nike

我尝试仅在 onsubmit 时使用 ID 验证列表框和单选按钮。如果我在浏览器中运行,它不会显示任何警报。单击提交按钮时,我想运行脚本来验证单选按钮和列表框是否被选中(如果选择了其中一个而不执行任何操作)。如果没有选择,我希望它发布一条警报消息。

<%@ 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>

最佳答案

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

希望这有帮助!

关于javascript - 通过 ID 验证 javascript 中的列表框和单选按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19904521/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com