Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 289
  • Last Modified:

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
0
forsters
Asked:
forsters
  • 5
  • 5
4 Solutions
 
Tom BeckCommented:
Sounds like a job for drop downs with limited selections like 00 to 12 (or 24) for the first drop down, 00 to 60 for the second. Standard stuff. Default to the 00 selection for both. Fewer errors means less frustration for the user plus it eliminates a validation check for double digit numbers as a bonus.
0
 
quizwedgeCommented:
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')
0
 
forstersAuthor Commented:
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

0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Tom BeckCommented:
The end user is entering a duration of time in hours and minutes, correct?
0
 
forstersAuthor Commented:
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.
0
 
Tom BeckCommented:
That's the total duration and you have that working to your satisfaction. I was referring to the three text boxes of time that the user can fill in that must add up to the total. The ones mentioned in the original question. The user is entering hours and minutes of time (duration) in some or all, NOT clock times. Is this correct? If so I have a jsfiddle for you to consider.
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.
You are eliminating invalid data being returned to you but you are not eliminating invalid data from being entered by the end user. This line of code is evidence of that: alert('the breakdown of time exceeds the duration.'); Making things simpler for you to the detriment of the end user is bad design. My original suggestion was to use drop down lists so I'm sticking with that. My fiddle does not deal with calculating the total duration and putting it in a text box because you have that worked out. The point of the fiddle is to demonstrate that you can avoid any frustration for the end user as they struggle to get the three hour/minute values to add up to the total duration.
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
You can use regular html controls just as I have them. Validation of the user's input becomes unnecessary. You would just need to get the calculated total duration inserted where I have it as a drop down.  You're only interested in the user's final selections. These can be copied to asp.net hidden field controls on submit and retrieved at the server.

http://jsfiddle.net/tommyBoy/j8V3y/2/
0
 
forstersAuthor Commented:
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...
0
 
Tom BeckCommented:
Of course they can. There's always a zero option to reset any drop down.
0
 
forstersAuthor Commented:
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...
0
 
Tom BeckCommented:
You could provide a single reset button that resets all drop downs to zero. I think users would understand that without further instruction.

I would disable the submit button until the values added up. Put some fine print by the button: "NOTE: Submit disabled until selections equal the total." That's informative rather than instructive.
0
 
forstersAuthor Commented:
ok thank you for your help
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 5
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now