baxtalo
asked on
JavaScript Inner HTML
The JavaScript below builds a weekly schedule submitting times to the following database colums: SunIn, SunOut, MonIn, MonOut, TueIn, TueOut, WedIn, WedOut, ThuIn, ThuOut, FriIn, FriOut, SatIn, SatOut.
How can the inner HTML be formatted so that the users actually know what they fill out? It would be nice if there were labels next to the textboxes.
I'd appreciate your help with this.
How can the inner HTML be formatted so that the users actually know what they fill out? It would be nice if there were labels next to the textboxes.
I'd appreciate your help with this.
<html>
<head>
<title>Submit Time</title>
<script type="text/JavaScript">
<!--
var days = "sun,mon,tue,wed,thu,fri,sat".split(",");
var idx = {sun:0,mon:1,tue:2,wed:3,thu:4,fri:5,sat:6}
function tabField(elmnt){
var next=document.getElementById("fld"+elmnt.tabIndex);
if (next){
next.focus();
}
}
function pad() {
var val = this.value;
if (val.length==1) this.value="0"+val;
}
function isValid(txtBox) {
var isHour = txtBox.name.indexOf("Hour") !=-1;
var span = document.getElementById('invalid'+txtBox.name);
span.style.display = 'none';
if (isHour) {
if (parseInt(txtBox.value,10) > 23) {
txtBox.value = '';
span.style.display = 'block';
return false
}
}
else {
if (parseInt(txtBox.value) > 59) {
txtBox.value = '';
span.style.display = 'block';
return false
}
}
return true;
}
window.onload=function() {
document.getElementById("form1").onsubmit=function() {
for (var i=0;i<days.length;i++) {
var startH = this["startHour_"+days[i]].value;
var startM = this["startMinute_"+days[i]].value;
var endH = this["endHour_"+days[i]].value;
var endM = this["endMinute_"+days[i]].value;
if (startH == '' || startM == '' || endH == '' || endM == '') {
alert("All fields must have values entered.");
return false;
}
else {
if (startH.length == 1) {
startH = '0' + startH;
}
if (startM.length == 1) {
startM = '0' + startM;
}
if (endH.length == 1) {
endH = '0' + endH;
}
if (endM.length == 1) {
endM = '0' + endM;
}
this[days[i]+"In"].value = startH + ':' + startM;
this[days[i]+"Out"].value = endH + ':' + endM;
}
}
return true;
}
var formContent = document.getElementById("formContent");
var tabIndex = 1;
for (var i=0;i<days.length;i++) {
formContent.innerHTML+=
'<input type="textbox" tabindex="'+(tabIndex++)+'" id="fld'+(tabIndex-2)+'" name="startHour_'+days[i]+'" maxlength="2" style="width:18px" />'+
'<input type="textbox" tabindex="'+(tabIndex++)+'" id="fld'+(tabIndex-2)+'" name="startMinute_'+days[i]+'" maxlength="2" style="width:18px" />'+
'<span id="invalidstartHour_'+days[i]+'" style="color:red;display:none">* Hour must be between 0 and 23</span>'+
'<span id="invalidstartMinute_'+days[i]+'" style="color:red;display:none">* Minute must be between 0 and 59</span>'+
'<br />'+
'<input type="textbox" tabindex="'+(tabIndex++)+'" id="fld'+(tabIndex-2)+'" name="endHour_'+days[i]+'" maxlength="2" style="width:18px" />'+
'<input type="textbox" tabindex="'+(tabIndex++)+'" id="fld'+(tabIndex-2)+'" name="endMinute_'+days[i]+'" maxlength="2" style="width:18px" />'+
'<span id="invalidendHour_'+days[i]+'" style="color:red;display:none">* Hour must be between 0 and 23</span>'+
'<span id="invalidendMinute_'+days[i]+'" style="color:red;display:none">* Minute must be between 0 and 59</span>'+
'<input type="hidden" tabindex="-1" name="'+days[i]+'In" id="startTime_'+days[i]+'" value="" />'+
'<input type="hidden" tabindex="-1" name="'+days[i]+'Out" id="endTime_'+days[i]+'" value="" /><br/>';
}
for (var i=0;i<days.length;i++) {
var sth = document.getElementsByName("startHour_"+days[i])[0],
endh = document.getElementsByName("endHour_"+days[i])[0],
stm = document.getElementsByName("startMinute_"+days[i])[0],
endm = document.getElementsByName("endMinute_"+days[i])[0];
sth.onblur=endh.onblur=stm.onblur=endm.onblur=pad;
sth.onkeyup=endh.onkeyup=stm.onkeyup=endm.onkeyup=function(evt) {
if (isValid(this) && this.value.length==this.maxLength) tabField(this);
}
sth.onkeypress=endh.onkeypress=stm.onkeypress=endm.onkeypress=function(evt) {
evt = evt || window.event;
var charCode = evt.which || evt.keyCode;
var charStr = String.fromCharCode(charCode);
return /\d/.test(charStr);
};
}
}
//-->
</script>
</head>
<body>
<form action="SubmitTime_Send.asp" id="form1" method="POST">
<div id="formContent">
</div>
<input type="submit" value="Submit" />
</form>
</body>
</html>ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER