WeberDev.com PHP and MySQL Code

LOG IN
BEGINNER GUIDES  |  PHP CLASSES  |  CODE SEARCH  |  ARTICLES SEARCH  |  PHP FORUMS  |  PHP MANUAL  |  PHP FUNCTIONS LIST  |  WEB SITE TEMPLATES
Start typing to search for PHP and MySQL Code Snippets and Articles Search
Submit a code Example / Snippet Submit Your Code
Search Engine Optimization Monitor SEO Monitor
Web Site UpTime Monitor UpTime Monitor
WeberDev's Monthly code contest PHP Code Contest
Your Personal Examples List My Favorite Examples
Your Personal Articles List My Favorite Articles
Edit Account Info Update Your Profile
More Weber Sites
PHP Code Search
Web Development Forums
Learn MySQL Playing Trivia
PHPBB2 Templates
Web Development Index
PHP Web Logs (BLogs)
Web Development Resources
Web Development Content
Recommended Links
PHPClasses
PHP Editor
PHP Jobs
Vision.To Design
Ajax Tutorials
PHP Programming Help
PHP/MySQL Programming
Webmaster Resources
Webmaster Forum
XML meta language
website builder
Recommended
Submit Site
Forex Trading Online forex trading platform

Go Back Add a Comment Send this example to a friend Add this Article to your personal favoritest for easy future access to your favorite Code Examples and Articles. Submit a code example Print this code example.
BACK ADD A COMMENT SEND TO A FRIEND ADD TO MY FAVORITES ADD CODE EXAMPLES PRINT
PHP Code Examples Submit your own code snippets Latest Code Examples RSS Feed
Title : day and week grid with clickable fields on/off and possibility to insert in DB
Categories : PHP, Java Script, CSS Click here to Update Your Picture
frederic vandenplas
Date : Aug 28th 2006
Grade : 3 of 5 (graded 2 times)
Viewed : 2736
File : 4488.php
Images : Image 1
Search : More code by frederic vandenplas
Action : Grade This Code Example
Tools : My Examples List
Code

  Submit your own code examples 
 

Four a tennisclub members could enroll in a activity.
They als needed to have the possibility for planning to let know if they were available (green) or not (red) on certain days. the whole grid is saved in 1 textfield as 0's and 1' to mark red or green.
This field then can be stored in a DB for further consultaion by the tennis teacher to plan his weeks.
Part of it is in javascript to change the colors wich are CSS styles. Part of the javascript is /* */ disabled as this part writes the data to a field in the calling form.

Please see attached file above.


Calling Form (Calling boeking.php)
<A HREF="boeking.php" TARGET="MyWin" OnClick='window.open("","MyWin","width=400,height=116,scrollbars=yes,resizable=yes")'>Click here</A>
<form action="" method="post" name="formulaire">
<input name="reservatie" value="" ID="Reservatie" type="text" length="120">
</form>



boeking.php
<html>
<head>
<title>Booking</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
    font: 12px Verdana, Arial, Helvetica, sans-serif;
}

td {
    font-size: 12px;
}

.nietgeboekt {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    color: #FFFFFF;
    background-color: #FF0000;
    cursor: default;
}

.geboekt {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    color: #000000;
    background-color: #336600;
    cursor: default;
}

.links {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    color: #000066;
    background-color: #CCCCCC;
    font-weight: bold;
    cursor: default;
}

.style1 {color: #009900}
.style2 {color: #FF0000}
-->
</style>
<script type="text/javascript" language="javascript" defer>

onload = function(){
/* this calls the opener form to see if there is already data in the field */
var reservatie=window.opener.document.formulaire;
//alert(reservatie.Reservatie.value);
/* if the field has a length of 98 then there is data in it */
if(reservatie.Reservatie.value.length==98)

{
/* call the restore function to get the data and update the grid */
restore();
}
var a=1, d, c, x, i =0, h=0, j=0;
var tab= document.getElementById('table1');
var tds = tab.getElementsByTagName('td');
var inp = tab.getElementsByTagName('input');
while (c = tds.item(i++)){
    c.onclick = function() {
   
   
       
    if (this.id.slice(0,1)=="t"){
        a=1;
        for(a;a<15;a++){
         x=this.id.slice(1,2)+'-'+a;
         
         var z='i'+this.id.slice(1,3)+'-'+a;
         
        if(document.getElementById(z).value<'2'){
            if(document.getElementById(x).className=='geboekt'){
            document.getElementById(x).className='nietgeboekt';
           
            document.getElementById(z).value='0';
            }else{
            document.getElementById(x).className='geboekt';
           
            document.getElementById(z).value='1';       
            }
        }
        }
    }
    if (this.id.slice(0,3)=="uur"){
   
        a=1;
        for(a;a<8;a++){
         x=a+'-'+this.id.slice(3,5);
         var z='i'+a+'-'+this.id.slice(3,5);
         if(document.getElementById(z).value<'2'){
       
            if(document.getElementById(x).className=='geboekt'){
            document.getElementById(x).className='nietgeboekt';
            document.getElementById(z).value='0';
            }else{
            document.getElementById(x).className='geboekt';
            //document.getElementById(z).className='geboekt';
            document.getElementById(z).value='1';       
            }
            //alert('z '+z+' z.value '+document.getElementById(z).value)
        }
        }
    }
    if(this.id.slice(0,1)>0) {
       
        var z='i'+this.id;
       
        if (this.className=='nietgeboekt')
        {
        this.className='geboekt';
        document.getElementById(z).value='1';
        }else{
        this.className='nietgeboekt';
        document.getElementById(z).value='0';
        }
    }
}
}
}
function collect(){


var tab = document.getElementById('table1');

var inp2;
var e, i=1,j=1;zz ="";
for (i;i<8;i++){
   
        for (j;j<15;j++){
        e=document.getElementById('i'+i+'-'+j)
        zz=zz+e.value;
        }
        j=1;
    }
//alert (zz)
document.getElementById('result').value=zz;
/* write the data on closure to the calling form */
var openerDoc=window.opener.document.formulaire;

openerDoc.Reservatie.value=zz;
window.close();
//window.opener.document.formulaire.Reservatie.value=zz;
}



function restore(){
var openerDoc=window.opener
var f=window.opener.document.formulaire.Reservatie;
var n,e,m=0, i=1,j=1;zz ="";
for (i;i<8;i++){     
        for (j;j<15;j++){
        e=document.getElementById('i'+i+'-'+j)
        //alert(e.id);
       
        //alert('m='+m+' charat '+f.value.charAt(m));
        e.value=f.value.charAt(m);
        //alert('f.value is '+f.value.charAt(m)+' m is ='+m)
       
        if (f.value.charAt(m)==0){
        document.getElementById(i+'-'+j).className='nietgeboekt';
        }else{
        document.getElementById(i+'-'+j).className='geboekt';
        }
        m=m+1;
        }
        j=1;
    }
m=0;
}

</script>
</head>

<body>


<table width="400" border="0" cellpadding="0" cellspacing="0">
<tr>
   <td><p>By clicking on the days the color changes :</p>
      <ul>
         <li class="style1">green is available</li>
         <li class="style2">red is unavailable</li>
      </ul>     
      <p>Clicking on each individual case changes the color.</p></td>
</tr>
</table>

<?php
echo '<table border="0" id="table1">';

echo '<tr><td class="links" id="alles"></td><td class="links" id="t1">maandag</td><td class="links" id="t2">dinsdag</td><td class="links" id="t3">woensdag</td><td class="links" id="t4">donderdag</td><td class="links" id="t5">vrijdag</td><td class="links" id="t6">zaterdag</td><td class="links" id="t7">zondag</td></tr>';

echo '<tr><td id="uur1" class="links">8-9</td> <td class="nietgeboekt"   id="1-1"><input  type="hidden"    id="i1-1" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="2-1"><input  type="hidden"  id="i2-1" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="3-1"><input  type="hidden"  id="i3-1" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="4-1"><input  type="hidden"  id="i4-1" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="5-1"><input  type="hidden"  id="i5-1" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="6-1"><input  type="hidden"  id="i6-1" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="7-1"><input  type="hidden"  id="i7-1" value="0" readonly="true" size="10"></td></tr>';
echo '<tr><td id="uur2" class="links">9-10</td> <td class="nietgeboekt"   id="1-2"><input  type="hidden"    id="i1-2" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="2-2"><input  type="hidden"  id="i2-2" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="3-2"><input  type="hidden"  id="i3-2" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="4-2"><input  type="hidden"  id="i4-2" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="5-2"><input  type="hidden"  id="i5-2" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="6-2"><input  type="hidden"  id="i6-2" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="7-2"><input  type="hidden"  id="i7-2" value="0" readonly="true" size="10"></td></tr>';
echo '<tr><td id="uur3" class="links">10-11</td><td class="nietgeboekt"   id="1-3"><input  type="hidden"    id="i1-3" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="2-3"><input  type="hidden"  id="i2-3" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="3-3"><input  type="hidden"  id="i3-3" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="4-3"><input  type="hidden"  id="i4-3" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="5-3"><input  type="hidden"  id="i5-3" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="6-3"><input  type="hidden"  id="i6-3" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="7-3"><input  type="hidden"  id="i7-3" value="0" readonly="true" size="10"></td></tr>';
echo '<tr><td id="uur4" class="links">11-12</td><td class="nietgeboekt"   id="1-4"><input  type="hidden"    id="i1-4" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="2-4"><input  type="hidden"  id="i2-4" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="3-4"><input  type="hidden"  id="i3-4" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="4-4"><input  type="hidden"  id="i4-4" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="5-4"><input  type="hidden"  id="i5-4" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="6-4"><input  type="hidden"  id="i6-4" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="7-4"><input  type="hidden"  id="i7-4" value="0" readonly="true" size="10"></td></tr>';
echo '<tr><td id="uur5" class="links">12-13</td><td class="nietgeboekt"   id="1-5"><input  type="hidden"    id="i1-5" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="2-5"><input  type="hidden"  id="i2-5" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="3-5"><input  type="hidden"  id="i3-5" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="4-5"><input  type="hidden"  id="i4-5" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="5-5"><input  type="hidden"  id="i5-5" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="6-5"><input  type="hidden"  id="i6-5" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="7-5"><input  type="hidden"  id="i7-5" value="0" readonly="true" size="10"></td></tr>';
echo '<tr><td id="uur6" class="links">13-14</td><td class="nietgeboekt"   id="1-6"><input  type="hidden"    id="i1-6" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="2-6"><input  type="hidden"  id="i2-6" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="3-6"><input  type="hidden"  id="i3-6" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="4-6"><input  type="hidden"  id="i4-6" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="5-6"><input  type="hidden"  id="i5-6" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="6-6"><input  type="hidden"  id="i6-6" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="7-6"><input  type="hidden"  id="i7-6" value="0" readonly="true" size="10"></td></tr>';
echo '<tr><td id="uur7" class="links">14-15</td><td class="nietgeboekt"   id="1-7"><input  type="hidden"    id="i1-7" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="2-7"><input  type="hidden"  id="i2-7" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="3-7"><input  type="hidden"  id="i3-7" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="4-7"><input  type="hidden"  id="i4-7" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="5-7"><input  type="hidden"  id="i5-7" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="6-7"><input  type="hidden"  id="i6-7" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="7-7"><input  type="hidden"  id="i7-7" value="0" readonly="true" size="10"></td></tr>';
echo '<tr><td id="uur8" class="links">15-16</td><td class="nietgeboekt"   id="1-8"><input  type="hidden"    id="i1-8" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="2-8"><input  type="hidden"  id="i2-8" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="3-8"><input  type="hidden"  id="i3-8" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="4-8"><input  type="hidden"  id="i4-8" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="5-8"><input  type="hidden"  id="i5-8" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="6-8"><input  type="hidden"  id="i6-8" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="7-8"><input  type="hidden"  id="i7-8" value="0" readonly="true" size="10"></td></tr>';
echo '<tr><td id="uur9" class="links">16-17</td><td class="nietgeboekt"   id="1-9"><input  type="hidden"    id="i1-9" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="2-9"><input  type="hidden"  id="i2-9" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="3-9"><input  type="hidden"  id="i3-9" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="4-9"><input  type="hidden"  id="i4-9" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="5-9"><input  type="hidden"  id="i5-9" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="6-9"><input  type="hidden"  id="i6-9" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="7-9"><input  type="hidden"  id="i7-9" value="0" readonly="true" size="10"></td></tr>';
echo '<tr><td id="uur10" class="links">17-18</td><td class="nietgeboekt"  id="1-10"><input  type="hidden"  id="i1-10" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="2-10"><input  type="hidden"  id="i2-10" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="3-10"><input  type="hidden"  id="i3-10" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="4-10"><input  type="hidden"  id="i4-10" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="5-10"><input  type="hidden"  id="i5-10" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="6-10"><input  type="hidden"  id="i6-10" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="7-10"><input  type="hidden"  id="i7-10" value="0" readonly="true" size="10"></td></tr>';
echo '<tr><td id="uur11" class="links">18-19</td><td class="nietgeboekt"  id="1-11"><input  type="hidden"  id="i1-11" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="2-11"><input  type="hidden"  id="i2-11" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="3-11"><input  type="hidden"  id="i3-11" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="4-11"><input  type="hidden"  id="i4-11" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="5-11"><input  type="hidden"  id="i5-11" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="6-11"><input  type="hidden"  id="i6-11" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="7-11"><input  type="hidden"  id="i7-11" value="0" readonly="true" size="10"></td></tr>';
echo '<tr><td id="uur12" class="links">19-20</td><td class="nietgeboekt"  id="1-12"><input  type="hidden"  id="i1-12" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="2-12"><input  type="hidden"  id="i2-12" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="3-12"><input  type="hidden"  id="i3-12" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="4-12"><input  type="hidden"  id="i4-12" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="5-12"><input  type="hidden"  id="i5-12" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="6-12"><input  type="hidden"  id="i6-12" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="7-12"><input  type="hidden"  id="i7-12" value="0" readonly="true" size="10"></td></tr>';
echo '<tr><td id="uur13" class="links">20-21</td><td class="nietgeboekt"  id="1-13"><input  type="hidden"  id="i1-13" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="2-13"><input  type="hidden"  id="i2-13" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="3-13"><input  type="hidden"  id="i3-13" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="4-13"><input  type="hidden"  id="i4-13" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="5-13"><input  type="hidden"  id="i5-13" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="6-13"><input  type="hidden"  id="i6-13" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="7-13"><input  type="hidden"  id="i7-13" value="0" readonly="true" size="10"></td></tr>';
echo '<tr><td id="uur14" class="links">21-22</td><td class="nietgeboekt"  id="1-14"><input  type="hidden"  id="i1-14" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="2-14"><input  type="hidden"  id="i2-14" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="3-14"><input  type="hidden"  id="i3-14" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="4-14"><input  type="hidden"  id="i4-14" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="5-14"><input  type="hidden"  id="i5-14" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="6-14"><input  type="hidden"  id="i6-14" value="0" readonly="true" size="10"></td><td class="nietgeboekt" id="7-14"><input  type="hidden"  id="i7-14" value="0" readonly="true" size="10"></td></tr>';

echo '</table>';
?>


<input id="result" type="hidden" size="120" value="">
<input name="collect" value="Sluiten" type="button" onClick="collect()">


</body>
</html>



Related Code Examples
PHP Calendar
Categories : PHP, Calendar, Date Time, Java Script, CSS
Zephyr: AJAX Based Framework for PHP5 Developers
Categories : PHP, AJAX, Frameworks, Java Script, Web Applications
Create HTML forms dynamicly using Javascript & PHP
Categories : PHP, PHP Classes, Java Script
Linked comboboxes with php-mysql & javascript
Categories : PHP, Java Script, Databases, MySQL
XDT Topsite (Gold v1.0)
Categories : Databases, CSS, PHP, HTML and PHP, Sessions
The toll booth
Categories : PHP, Java Script, Filesystem
MD5 secured login
Categories : PHP, Java Script, Authentication, Security
Dynamic CSS generation for multiple website colouring schemes.
Categories : PHP, CSS, HTML and PHP
Simple Javascript CSS Digital Clock
Categories : Java Script, Date Time, CSS, Beginner Guides, Web Design
PHP alternating the colors of table rows with style.
Categories : PHP, HTML and PHP, CSS
Pull Down Surfing - Surf on Change
Categories : Java Script, MySQL, HTML and PHP, PHP, Databases
The Ajax Tree view class fetches data from a db for the requested parent category id. The data is then stored in an array and converted into JSON (Javascript Object Notation) format. This format is then used by JavaScript for populating tree view.
Categories : PHP, PHP Classes, Java Script, AJAX, Databases
Remote Scripting: send form POST data to a script and insert the results into a page without refreshing the page.
Categories : PHP, AJAX, HTML and PHP, Java Script
Array values from javascript to php
Categories : PHP, Java Script, Arrays
PHP Interaction with Javascript windows
Categories : Java Script, PHP