Timesheet entry form that auto-fills the Date range?

[clearwave]

I currently have a ColdFusion form & need to add a "Week Selector" drop-down above my table so that:
- when the week is chosen from the drop-down, (how do I generate these drop-down values?)
- the correct dates are added to the date fields in the form.. (how do I populate the text boxes?)
- Once the user chooses the week, the Sun-Sat dates update, he then enters his time for each day..

--Choose Week-->Nov 3 thru Nov 9<-- (drop-down)

Sun---Mon---Tue---Wed---Thu---Fri---Sat (static labels)
---------------------------------------
11/03 11/04 11/05 11/06 11/07 11/08 11/09 (text boxes for dynamic dates)
0 8 8 8 8 8 (text boxes for hours entry)


Here is a picture of what I'm trying to duplicate:

https://dl.dropboxusercontent.com/u/58096637/Timesheet.jpg

 

[philhege]

(I couldn't see your "picture" due to a proxy block.)

Are you using CFFORM? You can use CFSELECT to construct the dropdown. From there, you can use Javascript to populate the date boxes.

-----------
With business clients like mine, you'd be better off herding cats.

 

[clearwave]

For now I have the form laid out using a table like this:

<p>Choose Week
<select name="Choose Week" id="ChooseWeek">
</select>
</p>
<table>

<thead>
<tr>
<th>Payroll Item</th>
<th>Mon<br>
11/04</th>
<th>Tue<br>
11/05</abbr></th>
<th>Wed<br>
11/06</th>
<th>Thu<br>
11/07</th>
<th>Fri<br>
11/08</th>
<th>Sat<br>
11/09</th>
<th>Sun<br>
11/10</th>
<th>Description</th>
</tr>
</thead>

<tbody>
<tr>
<th><select name="select-choice-1" id="select-choice-1" data-native-menu="false" data-theme="c">
<option value="Regular Hourly Rate">Regular Hourly Rate</option>
<option value="Paid Leave Time">Paid Leave Time</option>
<option value="Bereavement">Bereavement</option>
<option value="Holiday Pay">Holiday Pay</option>
</select></th>
<td><input name="mon" type="text" id="mon" value="8.0" size="10" maxlength="5"></td>
<td><input type="text" name="tue" id="tue" value="8.0" size="10" maxlength="5"></td>
<td><input type="text" name="wed" id="wed" value="8.0" size="10" maxlength="5"></td>
<td><input type="text" name="thu" id="thu" value="8.0" size="10" maxlength="5"></td>
<td><input type="text" name="fri" id="fri" value="8.0" size="10" maxlength="5"></td>
<td><input type="text" name="sat" id="sat" value="8.0" size="10" maxlength="5"></td>
<td><input type="text" name="sun" id="sun" value="8.0" size="10" maxlength="5"></td>
<td><label><input name="desc" type="text" id="desc" size="15" maxlength="50">
</label></td>
</tr>
</tbody>

</table>

 

[philhege]

The solution is more complicated than I have time to write an example, but the gist is this:

Populate the dropdown with meaningful values for the beginning of your time period week, e.g. "11/11/2013" for the current week. Hint: make sure to have the first value be "Select a Week".

In the onChange event handler of the dropdown, invoke a function that 1) grabs the date value of the selected dropdown item, and 2) spins through each textbox value, populating it with date+1 (that is, the value passed to the function by the dropdown)

So the function would populate the first box. Then,

for (x = 1 to 6)
{
textbox.value = (See a tutorial about Javascript date math at

http://www.htmlgoodies.com/beyond/javascript/javascript-date-calculations-for-months.html)

}

As you can see this is more of a Javascript than a ColdFusion problem. But you can control the values in the dropdown on the server side with a payroll calendar.

-----------
With business clients like mine, you'd be better off herding cats.

 

[clearwave]

philhege, thanks for the post..

To view my images and maybe a clearer explanation of what I need..
Please see my post:

http://forums.adobe.com/message/5819995#5819995