申请表要求在提交前一个单元格与其他单元格相等

Question

我根本不懂JavaScript。我使用Jotform创建了一个基于web的表单，并附加了一大堆条件，因为我不知道如何做到这一点。把它改成了php，这样我就可以访问我的数据库了。无论如何这是一个员工考勤卡表格。我们有几个字段需要总时间。第一个字段是总工作小时数。然后进入作业1、作业2、作业3和作业4。在工作1中，它显示了该工作的总时长，工作2的总时数，工作3等。我正在寻找一个脚本，如果job1,2,3,4&5不等于他们最初输入的小时数，则显示错误。

Total Hours Worked = 8
Job1 Hours =3
Job2 Hours =5
JOb3 Hours =1
DISPLAY ERROR
Total Hours Worked = 8
Job1 Hours =1
Job2 Hours =4
Job3 Hours =2
Job4 Hours =1
ALLOW FORM TO SUBMIT

这是不是很复杂。

Answer 1

我懒洋洋地硬编码了作业的数量，但这符合您的要求。

<script type="text/javascript">
function checkHours() {
totalHours = Number(form.total.value);
realTotal = 0;
for (x = 1; x <= 4 /* hard-coded job count */; x++)
    realTotal += Number(eval("form.job" + x + ".value"));
if (totalHours != realTotal) {
        alert("Total hours does not match cumulative job hours");
        return false;    
}
}
</script>
<form name="form" method="post" onsubmit="return checkHours()">
<table>
<tr>
    <td>Total Hours</td><td><input type="text" name="total"/></td>
</tr>     
<tr>
    <td>Job 1</td><td><input type="text" name="job1"/></td>
</tr>   
<tr>
    <td>Job 2</td><td><input type="text" name="job2"/></td>
</tr> 
 <tr>
    <td>Job 3</td><td><input type="text" name="job3"/></td>
</tr> 
<tr>
    <td>Job 4</td><td><input type="text" name="job4"/></td>
</tr>     
</table>
<input type="submit" value="Submit">
</form>

如果这是在错误的情况下：我的解决方案就足够了。如果是因为高度不可信的员工故意试图伪造工作时间：Bubbles是对的，你也应该用php检查一下。

Answer 2

理论上，这可以在javascript中完成，但会有点尴尬（也许问题更大，它会非常不安全——用户可以很容易地克服你设置的任何javascript块，而无效的表单可能会进入数据库）。所以，如果我是你，我会考虑纯在php中实现该需求；有一些方法可以返回带有提交值的表单，并在输入无效时显示错误消息。

然而，一旦服务器端验证工作正常，如果用户要提交的表单被发现无效，您可能仍然需要一些javascript来提醒用户。要做到这一点，它会变得有点复杂——可能需要一些jQuery。您所要做的要点是观察每个输入字段的更改（很可能使用更改），此时我将从每个输入中收集数据，看看是否全部匹配。如果没有，则可以显示一条警告消息，说明表单将不起作用。如果您是jQuery的新手，这将需要一些工作，但这肯定是可以做到的。