Solved

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

Posted on 2014-07-21
11
267 Views
Last Modified: 2014-07-23
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
Comment
Question by:forsters
  • 5
  • 5
11 Comments
 
LVL 38

Assisted Solution

by:Tom Beck
Tom Beck earned 500 total points
ID: 40209316
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
 
LVL 14

Expert Comment

by:quizwedge
ID: 40209384
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
 

Author Comment

by:forsters
ID: 40209475
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
 
LVL 38

Expert Comment

by:Tom Beck
ID: 40211944
The end user is entering a duration of time in hours and minutes, correct?
0
 

Author Comment

by:forsters
ID: 40213768
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 38

Assisted Solution

by:Tom Beck
Tom Beck earned 500 total points
ID: 40213908
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
 

Author Comment

by:forsters
ID: 40213997
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
 
LVL 38

Assisted Solution

by:Tom Beck
Tom Beck earned 500 total points
ID: 40214258
Of course they can. There's always a zero option to reset any drop down.
0
 

Author Comment

by:forsters
ID: 40214311
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
 
LVL 38

Accepted Solution

by:
Tom Beck earned 500 total points
ID: 40214364
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
 

Author Comment

by:forsters
ID: 40214617
ok thank you for your help
0

Featured Post

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now