Simple form to capture 3 fields

i need to develop the following form and i have limited knowledge of how to do this.

The form should have a drop down menu to select a billing code from the database

The form should have an input field to input hours.

The form should have a drop down menu to select week starting date (sunday)

Processing is that when the user selects a billing code, week starting date , and enters hours, a database table should be updated for that user for the Sunday Date of that week with hours and billing code. It should then automatically proceed to show the next date of the week (monday) and let them enters hours and billing code again, and select 'update' to update the table for monday. and so on until Saturday of the selected week.. The current day of the week and date that the user is entering info for, should be displayed on the form

I can do most of this but the date part i have no idea how to do. I'm guessing that there is a way to determine todays date and then find the Sunday date for this week. and then increment by 1 until you reach saturday.

anybody help me with this?? I can even pay you if you get it done quickly.

Thanks..

 

Hi to solve your week selection issue, I modified JQuery UI's Datepicker to select by week.

This would need to go in between script tags (or as a file linked to page)

$(function() {
    var startDate;
    var endDate;

    var selectCurrentWeek = function() {
        window.setTimeout(function () {
            $('.week-picker').find('.ui-datepicker-current-day a').addClass('ui-state-active')
        }, 1);
    }

    $('.week-picker').datepicker( {
        showOtherMonths: true,
        selectOtherMonths: true,
        onSelect: function(dateText, inst) {
            var date = $(this).datepicker('getDate');
            startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
            endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
            var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
            $('#weekStart').val(startDate).change();
        
            selectCurrentWeek();
        },
        beforeShowDay: function(date) {
            var cssClass = '';
            if(date >= startDate && date <= endDate)
                cssClass = 'ui-datepicker-current-day';
            return [true, cssClass];
        },
        onChangeMonthYear: function(year, month, inst) {
            selectCurrentWeek();
        }
    });

    $('.week-picker .ui-datepicker-calendar tr').on('mousemove', function() { $(this).find('td a').addClass('ui-state-hover'); });
    $('.week-picker .ui-datepicker-calendar tr').on('mouseleave', function() { $(this).find('td a').removeClass('ui-state-hover'); });
});

HTML:

The Field within the form becomes the following

<form id="myForm">
    <div class="week-picker"></div>
    <input type="text" id="weekStart" style="width:400px;" /> <!--Ususally this would be a type="hidden"-->
</form>

HTML:

The .week-picker Div acts as a widget for selecting the week which is then put is to the input field as a full text box

Example can be found here (http://jsfiddle.net/nwU53/4/)

This will however introduce a dependency on JqueryUI and Jquery

Let me know if you need anymore help

 

perfect -thank you...

 

darn, i put this into my coding and only got an empty text box back.. http://userw.com/billing/billing_form.php

 

Did you import the JQuery and JqueryUI libraries as mentioned?

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

Code (markup):

EDIT: Place this before the <script> tag you already have

 

woops.. yes that did it.. thanks.