www.webdeveloper.com
Results 1 to 13 of 13

Thread: How can I validate checkboxes in a table against the following conditions?

  1. #1
    Join Date
    Feb 2009
    Posts
    95

    How can I validate checkboxes in a table against the following conditions?

    Hi,
    I am taking user availability in hours for a whole day in which a user can select the hours he is available for.

    How can I validate checkboxes in a table against the following conditions? All the following conditions should be true to proceed.

    1. The minimum time span should be consecutive 1 hour (eg. 08:30 AM - 09:00 AM & 09:00 AM - 09:30 AM). Canít be 08:30 AM - 09:00 AM & 11:30 AM - 12:00 PM to make an hour

    2. The user can select multiple hours times in between(eg. 08:30 AM - 09:00 AM & 09:00 AM - 09:30 AM and 05:00 PM - 05:30 PM & 05:30 PM - 06:00 PM)

    Code:
    <table width="500px" cellspacing="1" id="AvailableTimesTable" style="margin-top: 5px;border: 1px solid black;">
        <tbody>
            <tr>
                <td class="LightBoxHeadingCell" colspan="2">
                    Available Times : 
                </td>
            </tr>
            <tr>
                <td class="AvailableTimes">
                    <input type="checkbox" value="08:00 AM - 08:30 AM;" id="Chk_0800_0830">08:00 AM - 08:30 AM 
                </td>
                <td class="AvailableTimes">
                    <input type="checkbox" value="08:30 AM - 09:00 AM;" id="Chk_0830_0900">08:30 AM - 09:00 AM 
                </td>
                <td class="AvailableTimes">
                    <input type="checkbox" value="09:00 AM - 09:30 AM;" id="Chk_0900_0930">09:00 AM - 09:30 AM 
                </td>
                <td class="AvailableTimes">
                    <input type="checkbox" value="09:30 AM - 10:00 AM;" id="Chk_0930_1000">09:30 AM - 10:00 AM 
                </td>
            </tr>
            <tr>
                <td class="AvailableTimes">
                    <input type="checkbox" value="10:00 AM - 10:30 AM;" id="Chk_1000_1030">10:00 AM - 10:30 AM 
                </td>
                <td class="AvailableTimes">
                    <input type="checkbox" value="10:30 AM - 11:00 AM;" id="Chk_1030_1100">10:30 AM - 11:00 AM 
                </td>
                <td class="AvailableTimes">
                    <input type="checkbox" value="11:00 AM - 11:30 AM;" id="Chk_1100_1130">11:00 AM - 11:30 AM 
                </td>
                <td class="AvailableTimes">
                    <input type="checkbox" value="11:30 AM - 12:00 PM;" id="Chk_1130_1200">11:30 AM - 12:00 PM 
                </td>
            </tr>
            <tr>
                <td class="AvailableTimes">
                    <input type="checkbox" value="12:00 PM - 12:30 PM;" id="Chk_1200_1230">12:00 PM - 12:30 PM 
                </td>
                <td class="AvailableTimes">
                    <input type="checkbox" value="12:30 PM - 01:00 PM;" id="Chk_1230_0100">12:30 PM - 01:00 PM 
                </td>
                <td class="AvailableTimes">
                    <input type="checkbox" value="01:00 PM - 01:30 PM;" id="Chk_0100_0130">01:00 PM - 01:30 PM 
                </td>
                <td class="AvailableTimes">
                    <input type="checkbox" value="01:30 PM - 02:00 PM;" id="Chk_0130_0200">01:30 PM - 02:00 PM 
                </td>
            </tr>
            <tr>
                <td class="AvailableTimes">
                    <input type="checkbox" value="02:00 PM - 02:30 PM;" id="Chk_0200_0230">02:00 PM - 02:30 PM 
                </td>
                <td class="AvailableTimes">
                    <input type="checkbox" value="02:30 PM - 03:00 PM;" id="Chk_0230_0300">02:30 PM - 03:00 PM 
                </td>
                <td class="AvailableTimes">
                    <input type="checkbox" value="03:00 PM - 03:30 PM;" id="Chk_0300_0330">03:00 PM - 03:30 PM 
                </td>
                <td class="AvailableTimes">
                    <input type="checkbox" value="03:30 PM - 04:00 PM;" id="Chk_0330_0400">03:30 PM - 04:00 PM 
                </td>
            </tr>
            <tr>
                <td class="AvailableTimes">
                    <input type="checkbox" value="04:00 PM - 04:30 PM;" id="Chk_0400_0430">04:00 PM - 04:30 PM 
                </td>
                <td class="AvailableTimes">
                    <input type="checkbox" value="04:30 PM - 05:00 PM;" id="Chk_0430_0500">04:30 PM - 05:00 PM 
                </td>
                <td class="AvailableTimes">
                    <input type="checkbox" value="05:00 PM - 05:30 PM;" id="Chk_0500_0530">05:00 PM - 05:30 PM 
                </td>
                <td class="AvailableTimes">
                    <input type="checkbox" value="05:30 PM - 06:00 PM;" id="Chk_0530_0600">05:30 PM - 06:00 PM 
                </td>
                <td class="AvailableTimes">
                    &nbsp; 
                </td>
                <td class="AvailableTimes">
                    &nbsp; 
                </td>
            </tr>
        </tbody>
    </table>
    Thanks

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,439

    Lightbulb

    If you convert to military time it would be a bit easier to manipulate the validation logic.
    Would also compress your code a bit. Could be compressed further if you put the appointment times into an array.
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title> Untitled </title>
    <meta charset="utf-8">
    <style type="text/css">
     .AvailableTimes { border:1px solid red; }
     #AvailabletimesTable { margin-top:5px; border:1px solid black; width:500px; }
     #AvailableTimesTable td { width:100px; }  /* or 100px, 170px, 200px or ??? */
    </style>
    
    </head>
    <body>
    <table border="0" cellspacing="5" id="AvailableTimesTable">
     <tbody>
      <tr>
       <th class="LightBoxHeadingCell" colspan="4"> Available Times : </th>
      </tr>
      <tr>
       <td class="AvailableTimes"><input type="checkbox" value="08:00_08:30">08:00 AM - 08:30 AM </td>
       <td class="AvailableTimes"><input type="checkbox" value="08:30_09:00">08:30 AM - 09:00 AM </td>
       <td class="AvailableTimes"><input type="checkbox" value="09:00_09:30">09:00 AM - 09:30 AM </td>
       <td class="AvailableTimes"><input type="checkbox" value="09:30_10:00">09:30 AM - 10:00 AM </td>
      </tr>
      <tr>
       <td class="AvailableTimes"><input type="checkbox" value="10:00_10:30">10:00 AM - 10:30 AM </td>
       <td class="AvailableTimes"><input type="checkbox" value="10:30_11:00">10:30 AM - 11:00 AM </td>
       <td class="AvailableTimes"><input type="checkbox" value="11:00_11:30">11:00 AM - 11:30 AM </td>
       <td class="AvailableTimes"><input type="checkbox" value="11:30_12:00">11:30 AM - 12:00 PM </td>
      </tr>
      <tr>
       <td class="AvailableTimes"><input type="checkbox" value="12:00_12:30">12:00 PM - 12:30 PM </td>
       <td class="AvailableTimes"><input type="checkbox" value="12:30_13:00">12:30 PM - 01:00 PM </td>
       <td class="AvailableTimes"><input type="checkbox" value="13:00_13:30">01:00 PM - 01:30 PM </td>
       <td class="AvailableTimes"><input type="checkbox" value="13:30_14:00">01:30 PM - 02:00 PM </td>
      </tr>
      <tr>
       <td class="AvailableTimes"><input type="checkbox" value="14:00_14:30">02:00 PM - 02:30 PM </td>
       <td class="AvailableTimes"><input type="checkbox" value="14:30_15:00">02:30 PM - 03:00 PM </td>
       <td class="AvailableTimes"><input type="checkbox" value="15:00_15:30">03:00 PM - 03:30 PM </td>
       <td class="AvailableTimes"><input type="checkbox" value="15:30_16:00">03:30 PM - 04:00 PM </td>
      </tr>
      <tr>
       <td class="AvailableTimes"><input type="checkbox" value="16:00_16:30">04:00 PM - 04:30 PM </td>
       <td class="AvailableTimes"><input type="checkbox" value="16:30_17:00">04:30 PM - 05:00 PM </td>
       <td class="AvailableTimes"><input type="checkbox" value="17:00_17:30">05:00 PM - 05:30 PM </td>
       <td class="AvailableTimes"><input type="checkbox" value="17:30_18:00">05:30 PM - 06:00 PM </td>
      </tr>
     </tbody>
    </table>
    <div id="AvailabilityList"></div>
    <button onclick="validateAvailability()"> List Times Checked </button>
    
    <script type="text/javascript">
    // For: http://www.webdeveloper.com/forum/showthread.php?280177-How-can-I-validate-checkboxes-in-a-table-against-the-following-conditions
    
    String.prototype.toAMPM = function() {  // convert Military time to AM/PM display
      var tarr = this.split('_');
      var n = Number(tarr[0].substring(0,2));
      if (n < 13) { tarr[0] = n+tarr[0].substring(2)+' AM'; }
             else { tarr[0] = (n-12)+tarr[0].substring(2)+' PM'; }
          n = Number(tarr[1].substring(0,2));
      if (n < 13) { tarr[1] = n+tarr[1].substring(2)+' AM'; }
             else { tarr[1] = (n-12)+tarr[1].substring(2)+' PM'; }
      return tarr[0]+ ' - ' +tarr[1];
    }
    
    function validateAvailability() {
      var checkedTimes = [ ];  // could be saved as global variable if necessary
      var sel = document.getElementById('AvailableTimesTable').getElementsByTagName('input');
      for (var i=0; i<sel.length; i++) {
        if (sel[i].checked) { checkedTimes.push(sel[i].value.toAMPM()); } // convert Military time to AM/PM display
      }
      document.getElementById('AvailabilityList').innerHTML = checkedTimes.join('<br>');
    }
    
    </script>
    
    </body>
    </html>
    Since you did not supply any CSS or starting JS, this is only a starting idea for the validation process.

    More questions:
    1. Minimum time slot is 1 hour, but is there a maximum time, ie: greater than 1 hour, like 8:30-10:00 or 10:30?

    2. Why not just make 1 hour slots on the 1/2 hour? Then there would be no need to check on the half hour.
    Last edited by JMRKER; 06-27-2013 at 03:34 PM.

  3. #3
    Join Date
    Feb 2009
    Posts
    95
    Quote Originally Posted by JMRKER View Post
    If you convert to military time it would be a bit easier to manipulate the validation logic.
    Would also compress your code a bit. Could be compressed further if you put the appointment times into an array.
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title> Untitled </title>
    <meta charset="utf-8">
    <style type="text/css">
     .AvailableTimes { border:1px solid red; }
     #AvailabletimesTable { margin-top:5px; border:1px solid black; width:500px; }
     #AvailableTimesTable td { width:100px; }  /* or 100px, 170px, 200px or ??? */
    </style>
    
    </head>
    <body>
    <table border="0" cellspacing="5" id="AvailableTimesTable">
     <tbody>
      <tr>
       <th class="LightBoxHeadingCell" colspan="4"> Available Times : </th>
      </tr>
      <tr>
       <td class="AvailableTimes"><input type="checkbox" value="08:00_08:30">08:00 AM - 08:30 AM </td>
       <td class="AvailableTimes"><input type="checkbox" value="08:30_09:00">08:30 AM - 09:00 AM </td>
       <td class="AvailableTimes"><input type="checkbox" value="09:00_09:30">09:00 AM - 09:30 AM </td>
       <td class="AvailableTimes"><input type="checkbox" value="09:30_10:00">09:30 AM - 10:00 AM </td>
      </tr>
      <tr>
       <td class="AvailableTimes"><input type="checkbox" value="10:00_10:30">10:00 AM - 10:30 AM </td>
       <td class="AvailableTimes"><input type="checkbox" value="10:30_11:00">10:30 AM - 11:00 AM </td>
       <td class="AvailableTimes"><input type="checkbox" value="11:00_11:30">11:00 AM - 11:30 AM </td>
       <td class="AvailableTimes"><input type="checkbox" value="11:30_12:00">11:30 AM - 12:00 PM </td>
      </tr>
      <tr>
       <td class="AvailableTimes"><input type="checkbox" value="12:00_12:30">12:00 PM - 12:30 PM </td>
       <td class="AvailableTimes"><input type="checkbox" value="12:30_13:00">12:30 PM - 01:00 PM </td>
       <td class="AvailableTimes"><input type="checkbox" value="13:00_13:30">01:00 PM - 01:30 PM </td>
       <td class="AvailableTimes"><input type="checkbox" value="13:30_14:00">01:30 PM - 02:00 PM </td>
      </tr>
      <tr>
       <td class="AvailableTimes"><input type="checkbox" value="14:00_14:30">02:00 PM - 02:30 PM </td>
       <td class="AvailableTimes"><input type="checkbox" value="14:30_15:00">02:30 PM - 03:00 PM </td>
       <td class="AvailableTimes"><input type="checkbox" value="15:00_15:30">03:00 PM - 03:30 PM </td>
       <td class="AvailableTimes"><input type="checkbox" value="15:30_16:00">03:30 PM - 04:00 PM </td>
      </tr>
      <tr>
       <td class="AvailableTimes"><input type="checkbox" value="16:00_16:30">04:00 PM - 04:30 PM </td>
       <td class="AvailableTimes"><input type="checkbox" value="16:30_17:00">04:30 PM - 05:00 PM </td>
       <td class="AvailableTimes"><input type="checkbox" value="17:00_17:30">05:00 PM - 05:30 PM </td>
       <td class="AvailableTimes"><input type="checkbox" value="17:30_18:00">05:30 PM - 06:00 PM </td>
      </tr>
     </tbody>
    </table>
    <div id="AvailabilityList"></div>
    <button onclick="validateAvailability()"> List Times Checked </button>
    
    <script type="text/javascript">
    // For: http://www.webdeveloper.com/forum/showthread.php?280177-How-can-I-validate-checkboxes-in-a-table-against-the-following-conditions
    
    String.prototype.toAMPM = function() {  // convert Military time to AM/PM display
      var tarr = this.split('_');
      var n = Number(tarr[0].substring(0,2));
      if (n < 13) { tarr[0] = n+tarr[0].substring(2)+' AM'; }
             else { tarr[0] = (n-12)+tarr[0].substring(2)+' PM'; }
          n = Number(tarr[1].substring(0,2));
      if (n < 13) { tarr[1] = n+tarr[1].substring(2)+' AM'; }
             else { tarr[1] = (n-12)+tarr[1].substring(2)+' PM'; }
      return tarr[0]+ ' - ' +tarr[1];
    }
    
    function validateAvailability() {
      var checkedTimes = [ ];  // could be saved as global variable if necessary
      var sel = document.getElementById('AvailableTimesTable').getElementsByTagName('input');
      for (var i=0; i<sel.length; i++) {
        if (sel[i].checked) { checkedTimes.push(sel[i].value.toAMPM()); } // convert Military time to AM/PM display
      }
      document.getElementById('AvailabilityList').innerHTML = checkedTimes.join('<br>');
    }
    
    </script>
    
    </body>
    </html>
    Since you did not supply any CSS or starting JS, this is only a starting idea for the validation process.

    More questions:
    1. Minimum time slot is 1 hour, but is there a maximum time, ie: greater than 1 hour, like 8:30-10:00 or 10:30?

    2. Why not just make 1 hour slots on the 1/2 hour? Then there would be no need to check on the half hour.
    Thank you very much for your reply. My answers to your questions:
    1. It can be any hour or hours but it can't be half an hour(e.g it can be 2 hours from 08:00 AM - 08:30 AM & 08:30 AM - 09:00 AM to make an hour and 12:00 PM - 12:30 PM & 12:30 PM - 01:00 PM to make another hour. So in this case the user is available for 2 hours. In this case a user can't be available for 2 and half hours as I mentioned before.)

    2. Because a user can be available from 9:30 to 10:30.(In this case 09:30 AM - 10:00 AM & 10:00 AM - 10:30 AM should be selected.)

    A user can't select 08:30 AM - 09:00 AM & 11:30 AM - 12:00 PM to make an hour because they are not consecutive slots.(He missed 09:00 AM - 09:30 AM
    09:30 AM - 10:00 AM & 10:00 AM - 10:30 AM & 10:30 AM - 11:00 AM & 11:00 AM - 11:30 AM slots
    )

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,439

    Lightbulb

    I'm not sure I understand the reason for 1/2 hour appointment slots when the minimum duration is a full hour.
    Just doesn't make sense to me.

    Consider this modification...
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title> Untitled </title>
    <meta charset="utf-8">
    <style type="text/css">
     .AvailableTimes { border:1px solid red; }
     #AvailabletimesTable { margin-top:5px; border:1px solid black; width:500px; }
     #AvailableTimesTable td { width:100px; }  /* or 100px, 170px, 200px or ??? */
    </style>
    
    </head>
    <body>
    <table border="0" cellspacing="5" id="AvailableTimesTable">
     <tbody>
      <tr> <th class="LightBoxHeadingCell" colspan="2"> Available Times : </th>
      </tr>
      <tr> <td class="AvailableTimes"><input type="checkbox" value="08:00">08:00 AM - 09:00 AM </td>
           <td class="AvailableTimes"><input type="checkbox" value="08:30">08:30 AM - 09:30 AM </td> </tr>
      <tr> <td class="AvailableTimes"><input type="checkbox" value="09:00">09:00 AM - 10:00 AM </td>
           <td class="AvailableTimes"><input type="checkbox" value="09:30">09:30 AM - 10:30 AM </td> </tr>
      <tr> <td class="AvailableTimes"><input type="checkbox" value="10:00">10:00 AM - 11:00 AM </td>
           <td class="AvailableTimes"><input type="checkbox" value="10:30">10:30 AM - 11:30 AM </td> </tr>
      <tr> <td class="AvailableTimes"><input type="checkbox" value="11:00">11:00 AM - 12:00 AM </td>
           <td class="AvailableTimes"><input type="checkbox" value="11:30">11:30 AM - 12:30 PM </td> </tr>
      <tr> <td class="AvailableTimes"><input type="checkbox" value="12:00">12:00 PM - 01:00 PM </td>
           <td class="AvailableTimes"><input type="checkbox" value="12:30">12:30 PM - 01:30 PM </td> </tr>
      <tr> <td class="AvailableTimes"><input type="checkbox" value="13:00">01:00 PM - 02:00 PM </td>
           <td class="AvailableTimes"><input type="checkbox" value="13:30">01:30 PM - 02:30 PM </td> </tr>
      <tr> <td class="AvailableTimes"><input type="checkbox" value="14:00">02:00 PM - 03:00 PM </td>
           <td class="AvailableTimes"><input type="checkbox" value="14:30">02:30 PM - 03:30 PM </td> </tr>
      <tr> <td class="AvailableTimes"><input type="checkbox" value="15:00">03:00 PM - 04:00 PM </td>
           <td class="AvailableTimes"><input type="checkbox" value="15:30">03:30 PM - 04:30 PM </td> </tr>
      <tr> <td class="AvailableTimes"><input type="checkbox" value="16:00">04:00 PM - 05:00 PM </td>
           <td class="AvailableTimes"><input type="checkbox" value="16:30">04:30 PM - 05:30 PM </td> </tr>
      <tr> <td class="AvailableTimes"><input type="checkbox" value="17:00">05:00 PM - 06:00 PM </td>
           <td>&nbsp;</td> </tr>
     </tbody>
    </table>
    <div id="AvailabilityList"></div>
    <button onclick="validateAvailability()"> List Times Checked </button>
    
    <script type="text/javascript">
    // For: http://www.webdeveloper.com/forum/showthread.php?280177-How-can-I-validate-checkboxes-in-a-table-against-the-following-conditions
    
    String.prototype.toAMPM = function() {  // convert Military time to AM/PM display
      var str = '';
      var n = Number(this.substring(0,2));
      if (n < 13) { str = n+this.substring(2)+' AM'; }
             else { str = (n-12)+this.substring(2)+' PM'; }
      str += ' - ';
      n++;
      if (n < 13) { str += n+this.substring(2)+' AM'; }
             else { str += (n-12)+this.substring(2)+' PM'; }
      return str;
    }
    
    function validateAvailability() {
      var checkedTimes = [ ];  // could be saved as global variable if necessary
      var sel = document.getElementById('AvailableTimesTable').getElementsByTagName('input');
      for (var i=0; i<sel.length; i++) {
        if (sel[i].checked) { checkedTimes.push(sel[i].value.toAMPM()); } // convert Military time to AM/PM display
      }
      checkedTimes.push('');
      for (var i=0; i<sel.length-1; i++) {
        if ((sel[i].checked) && (sel[i+1].checked)) {
          checkedTimes.push('Appointment conflicts: '+sel[i].value.toAMPM()+' and '+sel[i+1].value.toAMPM()); }
      }
      document.getElementById('AvailabilityList').innerHTML = checkedTimes.join('<br>');
    }
    
    </script>
    
    </body>
    </html>

  5. #5
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,276
    What about this method ?
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/chnTblict.dtd">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="generator" content="PSPad editor, www.pspad.com">
    <title></title>
    <style type="text/css">
    #pge {display:block;width:900px;margin:0 auto;padding:30px;background-color:#ffc;border:3px double red}
    table{margin:0 auto;border-collapse:collapse}
    td {height:30px;width:30px;border:1px solid gray;}
    .grs {background-color:#ccc}
    p{text-align:center}
    </style>
    </head>
    <body>
    <div id="pge">
        <p>Click on cells to select or deselect the hours your are available</p> 
        <div id="cdr"></div>    
    </div>
    
    <script type="text/javascript">
    // A simple shortcut 
    function $(id){return document.getElementById(id)}
    // To convert a column (0 to 20) to an hour
    function hrs(r){var s=Math.floor(r/2);
       s=4<s?s-4:s+8;s=(s<10?'0':'')+s;
        return s+(r%2?':30':':00');
    }
    function init(){var i,j,g,nbrHrs=20,chnTbl='';
        chnTbl+='<tr>';
        for (j=0;j<nbrHrs;j++) chnTbl+='<td id="cll_'+j+'">'+hrs(j)+'</td>';
        chnTbl+='</tr>';
        document.getElementById('cdr').innerHTML='<table cellspacing="0" cellpadding="3" onclick="clcHrs()">'+chnTbl+'<table>';
    }
    init();
    function clcHrs(e){var trg=e?e.target:window.event.srcElement,cll=+trg.id.substr(4);
        var prv=$('cll_'+(cll-1)),nxt=$('cll_'+(cll+1));
        if(/grs/.test(trg.className)) {
            trg.className=trg.className.replace(/ grs/,'');}
        else {
         	// The cliked cell
    	trg.className+=' grs';
    	if ((!prv || !/grs/.test(prv.className)) && (!nxt || !/grs/.test(nxt.className))){
    		// the previous and next cells are not or not gray
    		if (nxt) nxt.className+=' grs';
    		else prv.className+=' grs';}}
    }
    </script>
    </body>
    </html>
    There are still about problem after second click on a cell. It's imperative to remember the rule...
    Last edited by 007Julien; 06-28-2013 at 10:26 AM. Reason: Error

  6. #6
    Join Date
    Nov 2010
    Posts
    1,100
    you folks may be interested in this thread...
    http://www.codingforums.com/showthread.php?t=297507

  7. #7
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,276
    If the user can only select block of one hour (contiguous block ???), there must be a solution by treating the block pairs...
    An other idea is to store the choice in an unique integer N which is the sum of 1<<n for the choice of the cell number n (from 0 to 20).
    Last edited by 007Julien; 06-28-2013 at 11:09 AM.

  8. #8
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,439
    Quote Originally Posted by 007Julien View Post
    If the user can only select block of one hour (contiguous block ???), there must be a solution by treating the block pairs...
    An other idea is to store the choice in an unique integer N which is the sum of 1<<n for the choice of the cell number n (from 0 to 20).
    That is basically what I did in post #4.

  9. #9
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,276
    Sorry but the conditions are not clear enough to build something ...
    Is'it possible to choose 8:00 to 9:30 and 10:00 to 11:00 ? Many users have to cover the all periods ?
    A well-posed problem always has a solution !
    I wanted only show an method without check-boxes...
    Last edited by 007Julien; 06-28-2013 at 05:15 PM.

  10. #10
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,506
    It shouldn't matter too much on the date style, the Date() object understands different types of date formats as taken from the MDN site.

    Code:
    var today = new Date();
    var birthday = new Date("December 17, 1995 03:24:00");
    var birthday = new Date(1995,11,17);
    var birthday = new Date(1995,11,17,3,24,0);
    https://developer.mozilla.org/en-US/...l_Objects/Date

    You will find plenty of examples floating around the internet.

    The importance is to ensure that you are using the right string format or evaluating the string in to a format that you can use properly like getting the values the right way around.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  11. #11
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,439

    Arrow

    Just waiting for OP to confirm best solution for his/her needs.

  12. #12
    Join Date
    Feb 2009
    Posts
    95
    Quote Originally Posted by JMRKER View Post
    I'm not sure I understand the reason for 1/2 hour appointment slots when the minimum duration is a full hour.
    Just doesn't make sense to me.

    Consider this modification...
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title> Untitled </title>
    <meta charset="utf-8">
    <style type="text/css">
     .AvailableTimes { border:1px solid red; }
     #AvailabletimesTable { margin-top:5px; border:1px solid black; width:500px; }
     #AvailableTimesTable td { width:100px; }  /* or 100px, 170px, 200px or ??? */
    </style>
    
    </head>
    <body>
    <table border="0" cellspacing="5" id="AvailableTimesTable">
     <tbody>
      <tr> <th class="LightBoxHeadingCell" colspan="2"> Available Times : </th>
      </tr>
      <tr> <td class="AvailableTimes"><input type="checkbox" value="08:00">08:00 AM - 09:00 AM </td>
           <td class="AvailableTimes"><input type="checkbox" value="08:30">08:30 AM - 09:30 AM </td> </tr>
      <tr> <td class="AvailableTimes"><input type="checkbox" value="09:00">09:00 AM - 10:00 AM </td>
           <td class="AvailableTimes"><input type="checkbox" value="09:30">09:30 AM - 10:30 AM </td> </tr>
      <tr> <td class="AvailableTimes"><input type="checkbox" value="10:00">10:00 AM - 11:00 AM </td>
           <td class="AvailableTimes"><input type="checkbox" value="10:30">10:30 AM - 11:30 AM </td> </tr>
      <tr> <td class="AvailableTimes"><input type="checkbox" value="11:00">11:00 AM - 12:00 AM </td>
           <td class="AvailableTimes"><input type="checkbox" value="11:30">11:30 AM - 12:30 PM </td> </tr>
      <tr> <td class="AvailableTimes"><input type="checkbox" value="12:00">12:00 PM - 01:00 PM </td>
           <td class="AvailableTimes"><input type="checkbox" value="12:30">12:30 PM - 01:30 PM </td> </tr>
      <tr> <td class="AvailableTimes"><input type="checkbox" value="13:00">01:00 PM - 02:00 PM </td>
           <td class="AvailableTimes"><input type="checkbox" value="13:30">01:30 PM - 02:30 PM </td> </tr>
      <tr> <td class="AvailableTimes"><input type="checkbox" value="14:00">02:00 PM - 03:00 PM </td>
           <td class="AvailableTimes"><input type="checkbox" value="14:30">02:30 PM - 03:30 PM </td> </tr>
      <tr> <td class="AvailableTimes"><input type="checkbox" value="15:00">03:00 PM - 04:00 PM </td>
           <td class="AvailableTimes"><input type="checkbox" value="15:30">03:30 PM - 04:30 PM </td> </tr>
      <tr> <td class="AvailableTimes"><input type="checkbox" value="16:00">04:00 PM - 05:00 PM </td>
           <td class="AvailableTimes"><input type="checkbox" value="16:30">04:30 PM - 05:30 PM </td> </tr>
      <tr> <td class="AvailableTimes"><input type="checkbox" value="17:00">05:00 PM - 06:00 PM </td>
           <td>&nbsp;</td> </tr>
     </tbody>
    </table>
    <div id="AvailabilityList"></div>
    <button onclick="validateAvailability()"> List Times Checked </button>
    
    <script type="text/javascript">
    // For: http://www.webdeveloper.com/forum/showthread.php?280177-How-can-I-validate-checkboxes-in-a-table-against-the-following-conditions
    
    String.prototype.toAMPM = function() {  // convert Military time to AM/PM display
      var str = '';
      var n = Number(this.substring(0,2));
      if (n < 13) { str = n+this.substring(2)+' AM'; }
             else { str = (n-12)+this.substring(2)+' PM'; }
      str += ' - ';
      n++;
      if (n < 13) { str += n+this.substring(2)+' AM'; }
             else { str += (n-12)+this.substring(2)+' PM'; }
      return str;
    }
    
    function validateAvailability() {
      var checkedTimes = [ ];  // could be saved as global variable if necessary
      var sel = document.getElementById('AvailableTimesTable').getElementsByTagName('input');
      for (var i=0; i<sel.length; i++) {
        if (sel[i].checked) { checkedTimes.push(sel[i].value.toAMPM()); } // convert Military time to AM/PM display
      }
      checkedTimes.push('');
      for (var i=0; i<sel.length-1; i++) {
        if ((sel[i].checked) && (sel[i+1].checked)) {
          checkedTimes.push('Appointment conflicts: '+sel[i].value.toAMPM()+' and '+sel[i+1].value.toAMPM()); }
      }
      document.getElementById('AvailabilityList').innerHTML = checkedTimes.join('<br>');
    }
    
    </script>
    
    </body>
    </html>

    Thank you very much for your solution. It works.

  13. #13
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,439
    You're most welcome.
    Happy to help.
    Good Luck!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles