表格只检查提交功能的第一个值?

时间:2014-10-20 21:18:22

标签: javascript coldfusion

表格首先检查小时中的所有值是整数还是.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>

3 个答案:

答案 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>