Avatar of baxtalo
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.
<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>

Open in new window

JavaScript

Avatar of undefined
Last Comment
baxtalo

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
SANDY_SK

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
baxtalo

ASKER
Thank you very much, it looks great!
This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23