Table/Image to appear on click

[almystersv]

hi Guys,

 

Im fairly new to java script.

 

I have a web page that allows people to book meeting rooms. I am using a java script calendar that i have found on the internet that when the user clicks on a date it fills the text boxes with the date.

 

What I would like is once a date is selected a table/image appears showing a layout of that day, in hour time slots, displaying what times are available and what are already booked.

 

In my book meeting room page this is my code that calls the calendar script

<script>DateInput('bkgDate', true, 'YYYY-MM-DD')</script>

 

and this is the image code

<span id="pic1"></span>
<script>
function loadpic(){
document.getElementById('pic1').innerHTML='<img src="images/TimeGreen.gif" />';
}
</script>

 

What I would like is for the image to appear when the date is entered

 

Any ideas on this approach!?

 

Thanks

[phpQuestioner]

 

Server Side Language (such as PHP/MySQL/Database) and AJAX is what you will need to do too let people see the meeting that have already been scheduled.

[almystersv]

Hi,

 

what I would like is someone to show me what code I need to add to the javascript calendar that allows an image/table to appear once the calendar date has been selected.

 

The calendar script is a bit too large to post on here though

[phpQuestioner]

 

Again you will either need AJAX an Server Side Language to do this or you will have to load everything from your database into an javascript array (which still requires you to use server side language such as php). I suggest you do some searching on your preferred search engine. You should be able to find a tutorial or example of how to do what your wanting to do.

[nogray]

not sure what calendar you're using. However, if you use the NoGray Calendar http://www.nogray.com/calendar.php you can use the onSelect event to show anything

 

example

<script>
var cal = new Calendar('holder', 'toggel', {inputField:'date',
                                                        onSelect:function(){loadpic();}});
</script>
<input type="text" name="date" id="date" /> <a href="#" id="toggel">Open</a>
<div id="holder"></div>

[phpQuestioner]

 

The javascript is not really going to be a problem for you about getting your current bookings (it just displays them); but you will need to store your daily booking in a database and then retrieve the schedule with AJAX and JavaScript (like something similar or the same as nogray's). That is how you are going to have to do this.