troubleshooting Question

JavaScript to insert Nulls in datetime field

Avatar of baxtalo
baxtalo asked on
JavaScript
7 Comments1 Solution385 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.
For days off I’d like to be able to submit NULL values, instead of making all fields required.
How can this script be modified to let users submit Nulls instead of getting the alert "All fields must have values entered."
Thank you for your help.
<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 strInnerHTMLData= '';
  var tabIndex = 1;
  strInnerHTMLData +="<TABLE border=0 style='border-collapse:collapse'>"
  strInnerHTMLData += "<TR>";
  strInnerHTMLData += "<TH>Day</th>";
  strInnerHTMLData += "<TH>In</th>";
  strInnerHTMLData += "<TH>Out</th><th>&nbsp;</th>";
  strInnerHTMLData += "</TR>";
  for (var i=0;i<days.length;i++) {

  	strInnerHTMLData += '<TR>';
    strInnerHTMLData += '<TD>'+days[i]+'</TD>'+
'<TD><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" />'+

'</TD><TD>'+
'<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" />'+

'<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="" /></td><td>'+


'<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>'+
'<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>'+


'</td>';
strInnerHTMLData += '</TR>';
  }
  strInnerHTMLData += '</table>';

  formContent.innerHTML = strInnerHTMLData;

  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
Kim Walker
Senior Developer

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 7 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 7 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