0

I don't know JavaScript at all. I've used Jotform to create a web based form with a whole bunch of conditions attached to it because I don't have a clue how to do that. Changed a lot of it to php so I can access my db. Anyway. It's a employee time card form. We have a few fields where total time is required. The first field is total hours worked. Then goes onto job1, job2, job3, and job4. In job1 it says total hours on that job, job2 total hours, job 3 ect. I'm looking for a script that if job1,2,3,4 & 5 doesn't equal their original input of hours then display error. 

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

Is that something quite complicated.

ldiggins
  • 95
  • 7

2 Answers2

1

I lazily hard coded the number of jobs, but this does what you want.

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

If this is in case of mistakes: my solution will suffice. If it's because of highly untrustworthy employees that would intentionally attempt to fake hours: Bubbles is right and you should check it with php as well.

Rhyono
  • 2,420
  • 1
  • 25
  • 41
  • This is just in case of mistakes. Employees are just generally....well they mistakes... – ldiggins Aug 31 '12 at 03:21
  • I want to understand your code without just copy and pasting it (besides there is much more to my form then just the job hours in it.) What part of the script is looking at the job inputs? "form.job" does it just know job1,job2,ect automatically? And If I inserted 5 or 10 jobs, and just called them job5, job6 ect. Would it still auto calculate? And I would change the "(x =1 ; x <= 4 ; x++) the 4 is the number of hard coded jobs is that right? – ldiggins Aug 31 '12 at 03:24
  • Nm just played around with it. Works like a charm!!! Thank you so much. Would the coding be different if I used a drop down list? Instead of text input? Like it would be Option 1,2,3,4? – ldiggins Aug 31 '12 at 15:19
  • In Bubbles response he uses change, how would I change an option to a text string for each one and include it in your script? – ldiggins Aug 31 '12 at 15:26
  • As to using a drop down: I'm not quite understanding how you wish to employ a drop down for something in which you need to specify a number of hours...unless you planned to have option 1: 1 hour, and so forth. Please elaborate on that so I can give an answer. Assuming I read it correctly: Bubbles was referring to error checking every time someone changed the number in any of the inputs. This would allow it to tell you it is incorrect before you even tried to submit. Since what I did prevents you from sending it, and also doesn't clear it out, I don't really see a need for it. – Rhyono Sep 01 '12 at 00:28
  • Your form works perfectly, but for some reason incorporating it into my existing form doesn't seem to work. I designed the form using jotform, and manipulated it to php to access my server side information. I normally have a drop down list of hours for the employees to drop down. option1: 1 hour. Option 2: 1.5 Hours and so on and so forth. It's not because the guys cant enter the time right, but allows for uniformity across all the guys some guys just write 1.5, others go 1-1/2 ect. The drop down list creates a system that doesn't allow mess-ups basically. – ldiggins Sep 03 '12 at 00:06
  • Did incorporating it into your form not work as is or did it not work after trying to switch to drop downs? – Rhyono Sep 03 '12 at 00:10
  • BTW I have a lot of conditional fields incorporated which I believe is the reason your code isn't working properly. Basically job2 doesn't display unless job 1 is fully completed, job3 doesn't display until job2 is fully completed. In 80% of cases job3 4 or 5 doesn't get filled in. Therefore not seen by the employees filling it out. – ldiggins Sep 03 '12 at 00:21
  • I switched all my lists to just text inputs and I couldn't get it to not submit at all – ldiggins Sep 03 '12 at 00:21
  • If you can, put the code in a jsFiddle or upload the files somewhere. – Rhyono Sep 03 '12 at 00:25
  • Wont be today but I for sure will. See what you can see if i'm doing something wrong. It's a long code so just warning you now. :) – ldiggins Sep 03 '12 at 01:13
0

In theory this could be done in javascript, but it would be a little awkward (and perhaps more problematic, it would be very insecure - a user could easily overcome whatever javascript blocks you put up and an invalid form can make it's way to the database). So, if I were you I'd look into implementing the requirement purely in php; there are ways you can return the form with the submitted values and display an error message with it should the input have been invalid.

However, once you have server-side validation working, you still might want a bit of javascript to alert the user if the form they're about to submit will be found invalid. To do that, it gets a bit complicated - it would likely require some jQuery. The gist of what you would do is watch for changes to each input field (using change, most likely), at which point I would gather data from each input and see if it all matches. If it doesn't, you can then display a warning message that the form will not work. If you're new to jQuery this will take a bit of work, but it certainly can be done.

Bubbles
  • 3,795
  • 1
  • 24
  • 25