Link to home
Start Free TrialLog in
Avatar of forsters
forstersFlag for United Kingdom of Great Britain and Northern Ireland

asked on

pre-populate three text-boxes with 00:00 time

Hi Experts,

I have three text-boxes that are currently masked:

<script type="text/javascript">
        $(function () {
            var prm = Sys.WebForms.PageRequestManager.getInstance();
            prm.add_pageLoaded(function () {
                $("#<%=TxtFlat.ClientID%>").mask("99:99");
                $("#<%=TxtHalf.ClientID%>").mask("99:99");
                $("#<%=TxtDouble.ClientID%>").mask("99:99");
                
            });
        });

    </script>

Open in new window


The user will need to enter a time (duration) hh:mm in one or more of them and the sum of time entered across all three text-boxes is validated against a pre-populated value in a forth text-box - the sum of the three must equal the value of the forth. This means that the user therefore has to enter 00:00 in any that he does not want to assign a duration to or the validation doesn't understand...

I was thinking the simplest solution might be to pre-populate the boxes with 00:00 and the user can then just edit as required...

I'd appreciate some guidance
SOLUTION
Avatar of Tom Beck
Tom Beck
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
I agree with Tom, but in case there's a use case where you really want text boxes you can set text="00" in your code where you have the textbox, assuming they're asp.net textboxes. If they're standard inputs, you set value="00".

The jQuery way to do this (and I'd recommend the above method instead) would be
$("#<%=TxtFlat.ClientID%>").val('00')
$("#<%= TxtHalf.ClientID%>").val('00')
$("#<%= TxtDouble.ClientID%>").val('00')
Avatar of forsters

ASKER

Hi, thank you both for your thoughts.
Hmm I did consider using dropdowns but I've never used that approach so wasn't sure how I would then get the two drop down values into a date time field in sql which I will need to do...I would also require a calc to associate ddl 1 to ddl 2 so that it is recognised as a duration of time for the validation against the 'control' duration (a javascript function) so it is seeming more complex to me at the moment. Perhaps it has to be that way but I was hoping to keep it simple.

With the existing textbox approach the validation will by default eliminate any user error - because from our perspective as long as the sum of the values they enter is equal to the 'control' we can assume they have entered three valid times.

They are asp.net textboxes but setting the text didn't work.... Below is the validation function which may be useful in understanding, many thanks

 function TimeBreakdown() {

        var normal = document.getElementById('<%=TxtFlat.ClientID%>').value;
        normal = normal.split(":")[0] * 60 + normal.split(":")[1] * 1; // half is now in seconds

        var half = document.getElementById('<%=TxtHalf.ClientID%>').value;
        half = half.split(":")[0] * 60 + half.split(":")[1] * 1; // half is now in seconds

        var double = document.getElementById('<%=TxtDouble.ClientID%>').value;
        double = double.split(":")[0] * 60 + double.split(":")[1] * 1; // double is now in seconds

        var duration = document.getElementById('<%=TxtDuration.ClientID%>').value;
        duration = duration.split(":")[0] * 60 + duration.split(":")[1] * 1; // duration is now in seconds

        if (duration != '') {

            if ((normal + half + double) > duration) {

                alert('the breakdown of time exceeds the duration.');
            }
            else if ((normal + half + double) < duration) {

                alert('the breakdown of time is less than the duration.');
            }
            
        }
    }

Open in new window

The end user is entering a duration of time in hours and minutes, correct?
no, duration is auto-populated:

 
function TimeDuration() {
        var start = document.getElementById('<%=DDLStart.ClientID%>').value;
        var end = document.getElementById('<%=DDLStop.ClientID%>').value;
       

        if (start != '' && end != '') {
            // SPLIT INTO HOURS AND MIN
            var ds = start.split(':');
            var de = end.split(':');
            // WORK OUT DIFF IN MIN
            var diff = (de[0] * 60 + de[1] * 1) - (ds[0] * 60 + ds[1] * 1);
            // SET THE SIGN IF START > END
            var sign = (diff < 0) ? '-' : '';

            // WORK WITH ABS VALUE
            diff = Math.abs(diff);

            // SET THE DIFF IN MINUTES
            //document.getElementById('mindiff').value = sign + diff;

            // CREATE A FORMATTED STRING hh:mm
            var hours = parseInt(diff / 60);
            var min = diff - (hours * 60);

            // LETS PAD THE STRING
            min = "00" + min;
            hours = "00" + hours;

            // SET THE FORMATTED DIFF
            document.getElementById('<%=TxtDuration.ClientID%>').value = sign + hours.substr(hours.length - 2) + ':' + min.substring(min.length - 2);
           
        }
 
        }

Open in new window


So the form has two drop-downs DDLStart & DDLStop from which the user must select a start and stop time, (these are set at 15min intervals around a 24hr clock). The function above then works out the duration of time between the two and populates txtDuration with the result.
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
ahh I see, apologies misunderstood.

ok yes I can see the benefit of the dropdowns but what happens if they go wrong - they cant go back and amend...
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Ok, sorry that wasn't obvious, the fact that I had to ask you tells me it will not be apparent to the average user either - which is ok I can put instructions on...thanks for highlighting that.

ok next question what happens if the user selects values which have a total less than duration? I know we've got a running total but I need to prevent them from moving on if the total of their time entry differs from the duration...
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
ok thank you for your help