troubleshooting Question

JavaScript Inner HTML

Avatar of baxtalo
baxtalo asked on
JavaScript
2 Comments1 Solution313 ViewsLast Modified:
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.
<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
SANDY_SK

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 1 Answer and 2 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 2 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros