表格首先检查小时中的所有值是整数还是.5 问题是只检查第一个值。
我的猜测是问题是每个只能有一个ID 提交表格。
如何在插入值之前检查所有值 在表中。
现在它检查第一条记录,如果第一条记录通过该功能 然后无论其他数字仍将插入表中。
<table >
<cfoutput query="GetEmployees" group="dept">
<tr><th >#dept_name#</th></tr>
<tr><th >Hour</th><th>Name</th><th>Expiration Date (mm/dd/ccyy)</th></tr>
<cfoutput>
<cfset cnt= cnt+1>
<tr>
<td><input type="text" size="2" name="time#cnt#" id="add_time" value="" ></td>
<td> #emp_namefirst#
<input type="hidden" name="emp_id#cnt#" value="#emp_id#"></td>
<td><input type="text" name="expiration_time#cnt#" id="experition_date" value="#dateformat(nextdate, "mm/dd/yyyy")#"></td>
</tr>
</cfoutput>
</cfoutput>
</table>
<p><input type="submit" class="submit" name="Submit" value=""></p>
</form>
<script type="text/javascript" language="javascript">
form.onsubmit = function(e) {
var value = document.getElementById("add_time").value;
console.log(value);
if (!isNumber(value) || (value % 0.5) !== 0) {
alert("Please make sure all time is either a whole number or .5");
return false;
}
}
function isNumber(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
</script>
答案 0 :(得分:2)
ID
属性对于每个文档对象(在本例中为输入)应该是唯一的。您只使用&#34; add_time&#34;的值引用了一个ID。使用代码,我认为它引用了ID="add_time"
的最后一个实例。您应该将#cnt#
变量添加到ID中,以使它们都是唯一的。
为了验证所有这些,您可以使用CF创建所有JS代码来检查每个输入字段,方法是使用CFOUTPUT
使用相同的#cnt#
变量包装相关的JS代码每场检查。或者你可以学习jQuery并弄清楚如何为每个输入添加class
属性,并为该类的所有对象运行验证。
最后,您的警报消息应包含某种指示导致错误的字段。否则,用户必须进行选择,直到他们得到正确的字段。
答案 1 :(得分:0)
这是一种格式化的评论。我有一些观察。
首先,parseFloat()和parseInt()不一定会为非数字字符串返回NaN。小心一点。例如,尝试使用&#34; 1.y7&#34; parseFloat。看看你得到了什么。
其次,如果值不是您想要的值,您可以简单地清空onBlur事件中的字段,而不是在提交表单时显示消息。
最后,而不是:
<input type="text" size="2" name="time#cnt#" id="add_time" value="" >
emp_namefirst#
<input type="hidden" name="emp_id#cnt#" value="#emp_id#">
<input type="text"
name="expiration_time#cnt#"
id="experition_date"
value="#dateformat(nextdate, "mm/dd/yyyy")#">
您可能会发现这更简单:
<input type="text" size="2" name="time#emp_id#" id="add_time#emp_id#" value="" >
<input type="text"
name="expiration_time#emp_id#"
id="experition_date#emp_id#"
value="#dateformat(nextdate, "mm/dd/yyyy")#">
在提交后处理表单时,您可以执行以下操作:
<cfloop list="#form.fieldnames#" index="formfield">
<cfif left(formfield, 4) is "time">
<cfset thisEmpId = right(formfield, len(formfield) - 4)>
然后使用arrayNotation引用表单字段的值。例如:
insert into sometable
(emp_id, time)
values
(<cfqueryparam value = "#thisEmpId#">
, <cfqueryparam value = "#form['time' & thisEmpId]#">
)
或者您需要对这些值进行的任何操作。
答案 2 :(得分:0)
这里没有必要使用JQuery。 (好吧,它从来没有必要,但在普通的javascript中迭代类名很容易。)
Demonstration fiddle. - 请注意,演示小提琴中的javascript总会发生额外的return false;
。这只是因为小提琴示范不喜欢实际提交的形式。只需删除它。
使用Javascript:
form.onsubmit = function(e) {
var ftimes = document.getElementsByClassName("add_timebox");
var fflag = 0;
for(i=0;i<ftimes.length;i++) {
var value = ftimes[i].value;
console.log(i + ': ' + value);
if (!isNumber(value) || (value % 0.5) !== 0) {
fflag = 1;
}
}
if(fflag==1) {
alert("Please make sure all time is either a whole number or .5");
return false;
}
// Remove this return false.
return false;
}
function isNumber(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
示例HTML。请注意我如何给时间框一个类值。
<form method="post" id="form"><table >
<tr><th >#dept_name#</th></tr>
<tr><th >Hour</th><th>Name</th><th>Expiration Date (mm/dd/ccyy)</th></tr>
<tr>
<td><input type="text" size="2" name="time1" id="add_time" value="" class="add_timebox"></td>
<td> #emp_namefirst#
<input type="hidden" name="emp_id#cnt#" value="#emp_id#"></td>
<td><input type="text" name="expiration_time#cnt#" id="experition_date" value="#dateformat(nextdate, "mm/dd/yyyy")#"></td>
</tr>
<tr>
<td><input type="text" size="2" name="time2" id="add_time" value="" class="add_timebox"></td>
<td> #emp_namefirst#
<input type="hidden" name="emp_id#cnt#" value="#emp_id#"></td>
<td><input type="text" name="expiration_time#cnt#" id="experition_date" value="#dateformat(nextdate, "mm/dd/yyyy")#"></td>
</tr>
<tr>
<td><input type="text" size="2" name="time3" id="add_time" value="" class="add_timebox"></td>
<td> #emp_namefirst#
<input type="hidden" name="emp_id#cnt#" value="#emp_id#"></td>
<td><input type="text" name="expiration_time#cnt#" id="experition_date" value="#dateformat(nextdate, "mm/dd/yyyy")#"></td>
</tr>
</table>
<p><input type="submit" class="submit" name="Submit" value="Click Me!"></p>
</form>