forsters
asked on
pre-populate three text-boxes with 00:00 time
Hi Experts,
I have three text-boxes that are currently masked:
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
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>
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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
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.');
}
}
}
The end user is entering a duration of time in hours and minutes, correct?
ASKER
no, duration is auto-populated:
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.
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);
}
}
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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...
ok yes I can see the benefit of the dropdowns but what happens if they go wrong - they cant go back and amend...
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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...
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
ok thank you for your help
The jQuery way to do this (and I'd recommend the above method instead) would be
$("#<%=TxtFlat.ClientID%>"
$("#<%= TxtHalf.ClientID%>").val('
$("#<%= TxtDouble.ClientID%>").val