Javascript验证：将下拉列表中的字符串与表中的其他列进行比较
我想在提交表格之前制作验证表格。在我的情况下，我的数据在这样的表中：
<form name ="myForm" onsubmit="return validateForm()" action="generateSchedule" class="sky-form">
<header><br><center>Generate Schedule</center></header>
<center>
<fieldset>
<section>
<label class="select">
<% //Connection to db
String query="select s.studentID, s.studentName,s.projecttitle,s.lecturerID, l.lecturerID, l.lecturerFullname from student s JOIN lecturer l ON s.lecturerID = l.lecturerID where ROWNUM<=30";
ResultSet rs=stmt.executeQuery(query);
int i=1;
%>
<table id="t01">
<tr>
<th>No.</th>
<th>Student name</th>
<th>Project title</th>
<th>Supervisor name</th>
<th>Examiner </th>
</tr>
<% while(rs.next()){ %>
<tr>
<td><%= i++ %>.</td>
<td>
<input type="hidden" name="studentID" style="" value=<%=rs.getString("studentID") %>">
<%=rs.getString("studentName") %>
</td>
<td><%= rs.getString("projectTitle") %></td>
<td>
<input id="supervisor" type="hidden" name="supervisorID" style="" value="<%=rs.getString("lecturerID") %>"> <%=rs.getString("lecturerFullname")%>
</td>
<td>
<select id="examinerID" name="examinerID" onchange="checkLecturer()">
<option selected disabled>Examiners Name</option>
<%
try{ //Connection to db again
String query1="select lecturerID, lecturerFullname from lecturer ";
ResultSet rs1=stmt1.executeQuery(query1);
while(rs1.next())
{ %>
<option value="<%=rs1.getString("lecturerID") %>"> <%=rs1.getString("lecturerFullname") %></option>
<% }
//closing connection }
catch (Throwable theException) {
//exception statement } %></select>
</td></tr>
<% }
//close connection again }
catch (Throwable lln) {
//catch statement}
%>
</table>
<button type="submit" name="submit" class="button"> Generate schedule</button><br><br>
</center>
</label>
</section>
</fieldset></center>
我很抱歉这些代码很长很乱，因为我还是新手。我知道在JSP中组合JAVA并不好。
根据以上代码，student name，project title和supervisor name列来自第一个查询。然后在examiner列中，将会有使用第二个查询动态生成的下拉菜单。
这是它的样子。对不起，我不得不模糊数据：
Javascript：
<script>
function validateForm() {
return checkLecturer();
}
function checkLecturer() {
var ex = document.forms["myForm"]["examiner"].value;
var sv = document.forms["myForm"]["supervisor"].value;
if (sv === ex) {
document.getElementById("examiner").className = 'error';
return false;
}
else {
document.getElementById("examiner").className = '';
return true;
}
}
</script>
CSS：
<style>
.error {
border:1px solid red;
}
</style>
如果用户选择相同的examinerID值，我希望supervisorID的表单下拉列表变为红色。我想知道为什么我的代码不起作用..
2016年5月16日更新
我正在复制与你所做的完全相同的代码......它完美地工作......
@Ansari回答仍然是蓝色边框
2 个答案:
答案 0 :(得分：0)
您的案例中有很多 erroneous ，如下所示：
-
select元素option标记没有id和onkeyupattributes/events。他们只能below 4 attributes而只有global events as attributes：
- 对于不同的元素，您不能拥有相同的
ids。id每页必须是唯一的。在您的情况下，您可以使用option标记。 -
CSS样式仅适用于少数浏览器的option标记。因此，如果您想要完全实现它，可以使用搜索时在谷歌中存在的selectjquery个插件，这些插件将有很多选项/功能可供设置。否则，您必须包含任何element以显示错误消息。 - 由于上述原因，您需要获取
selected元素的select值，该值不适用于document.forms["myForm"]["examiner"].value;。 - 您尚未关闭
<table>元素。不确定这是否是复制粘贴问题。
以下是根据您的要求建议的解决方案，很少有修改..
function validateForm() {
return checkLecturer();
}
function checkLecturer() {
var e = document.getElementById("examinerID");
var ex = e.options[e.selectedIndex].value;
var sv = document.forms["myForm"]["supervisor"].value;
if (sv === ex) {
document.getElementById("examiner").className = 'error';
document.getElementById("examiner").style.display = 'block';
return false;
} else {
document.getElementById("examiner").style.display = 'none';
document.getElementById("examiner").className = '';
return true;
}
}.error {
color: red;
}<form name="myForm" onsubmit="return validateForm()" action="generateSchedule" class="sky-form">
<table id="t01">
<tr>
<th>No.</th>
<th>Student name</th>
<th>Project title</th>
<th>Supervisor name</th>
<th>Examiner</th>
</tr>
<tr>
<td>1.</td>
<td>abc</td>
<td>def</td>
<td>
<input id="supervisor" type="hidden" name="supervisorID" value="Kent" />
</td>
<td>
<select id="examinerID" id="lecturerFullname" onchange="checkLecturer()">
<option value="Suzy">Suzy</option>
<option value="Kent">Kent</option>
<option value="John">John</option>
</select>
</td>
</tr>
</table>
<button name="submit" class="button">SUBMIT</button>
<div id="examiner" style="display:none">
Both are same
</div>
</form>
<强>
的 Here is the external fiddle solution
答案 1 :(得分：0)
struct MinMaxInfo
{
public Point ptReserved;
public Point ptMaxSize;
public Point ptMaxPosition;
public Point ptMinTrackSize;
public Point ptMaxTrackSize;
}
protected override void WndProc(ref Message m)
{
base.WndProc(ref m); //do that first: "'Who is the boss' applies. You'd typically want to be the one that has the last say in this case."
if (m.Msg == 0x0024) //WM_GETMINMAXINFO
{
MinMaxInfo minMaxInfo = (MinMaxInfo)m.GetLParam(typeof(MinMaxInfo));
minMaxInfo.ptMaxSize.X = MaximumSize.Width; //Set size manually
minMaxInfo.ptMaxSize.Y = MaximumSize.Height;
minMaxInfo.ptMaxPosition.X = Location.X; //Stay at current position
minMaxInfo.ptMaxPosition.Y = Location.Y;
Marshal.StructureToPtr(minMaxInfo, m.LParam, true);
}
}
使用此<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
Test
</title>
<style>
.error {
border: 1px solid red;
}
</style>
<script type="text/javascript">
function validateForm() {
return checkLecturer();
}
function checkLecturer() {
var e = document.getElementById("examinerID");
var ex = e.options[e.selectedIndex].innerHTML;
var sv = document.forms["myForm"]["supervisorID"].value;
if (sv === ex) {
document.getElementById('ddldiv').className = "error";
alert("you can\'t select " + ex);
return false;
}
else {
document.getElementById('ddldiv').className = "";
return true;
}
}
window.onload = function () {
document.getElementById('examinerID').onchange = function () {
checkLecturer();
};
};
</script>
</head>
<body>
<form name="myForm" onsubmit="return validateForm();" action="generateSchedule" class="sky-form">
<table id="t01">
<tr>
<th>No.</th>
<th>Student name</th>
<th>Project title</th>
<th>Supervisor name</th>
<th>Examiner </th>
</tr>
<tr>
<td>1.</td>
<td>abc</td>
<td>def</td>
<td>
<input id="supervisor" type="hidden" name="supervisorID" value="Kent" />
</td>
<td>
<div id="ddldiv" style="width: 150px; height: 22px;">
<select name="examinerID" id="lecturerFullname" style="width: 150px; height: 30px;">
<option id="examiner" onkeyup="checkLecturer()">Suzy</option>
<option id="examiner" onkeyup="checkLecturer()">Kent</option>
<option id="examiner" onkeyup="checkLecturer()">John</option>
</select>
</div>
</td>
</tr>
<tr>
<td>
<input type="submit" name="submit" class="button" value="Submit" />
</td>
</tr>
</table>
</form>
</body>
</html>代替e.options[e.selectedIndex].innerHTML，因为值为null或未定义。
所以试试这个脚本： -
e.options[e.selectedIndex].value并使用此HTML
<script type="text/javascript">
function validateForm() {
return checkLecturer();
}
function checkLecturer() {
var e = document.getElementById("examinerID");
var ex = e.options[e.selectedIndex].innerHTML;
var sv = document.forms["myForm"]["supervisorID"].value;
if (sv === ex) {
document.getElementById('ddldiv').className = "error";
alert("you can\'t select " + ex);
return false;
}
else {
document.getElementById('ddldiv').className = "";
return true;
}
}
window.onload = function () {
document.getElementById('examinerID').onchange = function () {
checkLecturer();
};
};
</script>
希望这会有所帮助。
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？