好的,div
问题是这样的。
<table id="torFormContainer">
<tbody><tr>
<th colspan="2">
New Time Off Request
</th>
</tr>
<tr id="supebox">
<td>
*Supervisor:
</td>
<td>
<input name="supe" id="supe" type="text" list="supes" required="">
<datalist id="supes">
<option value="Ashley Helms">
</option><option value="Dan Boling">
</option><option value="Daniel Jenkins">
</option><option value="Hannah Amos">
</option><option value="Keith Underwood">
</option><option value="Shane Smith">
</option><option value="Wade Horton">
</option></datalist>
</td>
</tr>
<tr id="sdatebox">
<td class="left">
*Start Date:
</td>
<td class="right">
<input type="date" id="sdate" name="sdate" min="2014-06-11" onblur="testSdate();" onchange="testSdate();" placeholder="YYYY-MM-DD" required="">
</td>
</tr>
<tr id="edatebox">
<td class="left">
*End Date:
</td>
<td class="right">
<input id="edate" name="edate" type="date" onblur="testEdate();" onchange="testEdate();" placeholder="YYYY-MM-DD" required="">
</td>
</tr>
<tr id="reasonbox">
<td class="left">
*Reason:
</td>
<td class="right">
<select id="reason" name="reason" required="">
<option value="0" disabled="true">Select a Reason</option>
<option value="3">Comp</option>
<option value="6">Death in Family</option>
<option value="4">Family Leave</option>
<option value="5">Personal Leave</option>
<option value="2">Sickness</option>
<option value="1">Vacation</option>
</select>
</td>
</tr>
<tr>
<td>
Comment:
</td>
<td>
<textarea id="comment" placeholder="Optional" rows="5" cols="30"></textarea>
</td>
</tr>
<tr>
<td class="left" id="required">
*Required
</td>
<td id="submit">
<input id="torSub" type="button" value="Submit" onclick="torPreSubmit();">
</td>
</tr>
</tbody></table>
出于某种原因,据我所知,只有在 Chrome 中,在做了主管名称之后,textarea 还显示了主管列表中的建议列表。现在,这很可能是我忽略的一些愚蠢的事情,并且有一些 jquery 检查日期等,但我一生都无法弄清楚这一点。下面的一些jquery。
function torPreSubmit(){
var submit = true;
if($('#sdate').val()===""){
$('#sdatebox').css('outline','thin solid red');
console.log("sdate fail");
submit = false;
}else{
console.log("sdate pass");
$('#sdatebox').css('outline','');
}
if($('#edate').val()===""){
$('#edatebox').css('outline','thin solid red');
console.log("edate fail");
submit = false;
}else{
console.log("edate pass");
$('#edatebox').css('outline','');
}
if($('#supe').val()===""){
$('#supebox').css('outline','thin solid red');
console.log("supe fail");
submit = false;
}else{
console.log("supe pass");
$('#supebox').css('outline','');
}
if($('#reason').val()===null){
console.log("reason fail");
$('#reasonbox').css('outline','thin solid red');
submit = false;
}else{
console.log("reason pass");
$('#reasonbox').css('outline','');
}
if(submit){
torSubmit();
$('#reasonbox').css('outline','');
$('#edatebox').css('outline','');
$('#sdatebox').css('outline','');
}
}
function testSdate(){
$("#edate").val('');
if(Date.parse($("#sdate").val())<=Date.today()){
$('#sdate').val('');
}else{
$('#edate').attr('min',$("#sdate").val());
}
}
function testEdate(){
if((Date.parse($("#edate").val())<Date.today())||(Date.parse($("#edate").val())<Date.parse($("#sdate").val())) ){
$('#edate').val('');
}
}