a booking system

@terry81Aug 02.2004

Hi this is how my ticket booking form looks like:

a drop down menu stating day(Mon, Tues, Wed etc)

then based on day selected, on the same page itself, it will display all the movies screening on the selected day inside textarea?

how do I do that with javascript?

can someone who helped me with the coding, try add some explanations on the codes used so i can learn from it too.

to post a comment

JavaScript

20 Comments(s) _↴

@PittimannAug 02.2004 — #Hi!

Do you need that for just a week or a longer period of time?

Cheers - Pit

@terry81authorAug 02.2004 — #hi, thanks for replying.

Let's say there is no time restriction. I just want to display movie X on Monday. Movie C on Tuesday regardless of the week. I just want to see how javascript can do that. Btw, no databse or servr will be involved so i guess all will be hard coded.

@javaNoobieAug 02.2004 — #this is the simplest way i can think of.

==========================================================

<html>

<head>

<title>Test Page</title>

<script language="javascript">

function showMeTheMovies(){

var ele = document.getElementById("ddlDays");

//alert("Selected: " + ele.selectedIndex);

var index = ele.selectedIndex

var eleTxtArea = document.getElementById("txtMovies")

var movie;

 switch(index){ //base on selected index change the movie title accordingly
   case 0: movie="Monday Movie";break;
 
   case 1: movie="Tuesday Movie";break;
 
   default: movie="other day";break;
   }
   //fill the textarea with the corresponding movie titles based on selection
   eleTxtArea.innerText = movie; 
   }
   </script>
  </head>
  <body>
   <Select id="ddlDays" onchange="showMeTheMovies()">
   <Option>Monday</option>
   <Option>Tuesday</option>
   <Option>Wednesday</option>
   <Option>Thursday</option>
   <Option>Friday</option>
   <Option>Saturday</option>
   <Option>Sunday</option>
   </select>
   <Textarea id="txtMovies"></textarea>
  </body>

</html>

==========================================================

there will be better examples by the pros.

@PittimannAug 02.2004 — #Hi!

Just incase you will be going back to your wish to display more than one movie:

[code=php]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html>
 <head>
 <title>Untitled</title>
 <script language="JavaScript" type="text/javascript">
 <!--
 var movies=new Array();
 movies[0]=new Array('Sunday movie 1','Sunday movie 2','Sunday movie 3','Sunday movie 4','Sunday movie 5','Sunday movie 6');
 movies[1]=new Array('Monday movie 1','Monday movie 2','Monday movie 3','Monday movie 4','Monday movie 5','Monday movie 6');
 movies[2]=new Array('Tuesday movie 1','Tuesday movie 2','Tuesday movie 3','Tuesday movie 4','Tuesday movie 5','Tuesday movie 6');
 movies[3]=new Array('Wednesday movie 1','Wednesday movie 2','Wednesday movie 3','Wednesday movie 4','Wednesday movie 5','Wednesday movie 6');
 movies[4]=new Array('Thursday movie 1','Thursday movie 2','Thursday movie 3','Thursday movie 4','Thursday movie 5','Thursday movie 6');
 movies[5]=new Array('Friday movie 1','Friday movie 2','Friday movie 3','Friday movie 4','Friday movie 5','Friday movie 6');
 movies[6]=new Array('Saturday movie 1','Saturday movie 2','Saturday movie 3','Saturday movie 4','Saturday movie 5','Saturday movie 6');
 function showMovies(val,who){
 if(val==0)who.value='No day selected.';
 else{
 who.value=movies[val-1].join('n');
 }
 }
 //-->
 </script>
 </head>
 <body>
 <form>
 <select name="days" onchange="showMovies(this.selectedIndex,this.form.display)">
 <option>select a day</option>
 <option>Sunday</option>
 <option>Monday</option>
 <option>Tuesday</option>
 <option>Wednesday</option>
 <option>Thursday</option>
 <option>Friday</option>
 <option>Saturday</option>
 </select>
 <textarea cols=50 rows=10 name="display"></textarea>
 </form>
 </body>
 </html>[/code]

Cheers - Pit

@terry81authorAug 03.2004 — #Hi javaNoobie and Pitman,

Thanks alot. =)

@terry81authorAug 03.2004 — #hi again,

Thanks for the codes which display the movie based on day selected.

Now supposed I add in a few more fields in the system.

- display total ticket price based on quantity entered.

- select theatre and display image of the theatre location

I tried to create arrays like what pitman did. For example,

var movie = new Array();

movie[0]=('monday', '5','theatre1_map', 'theatre2_map');

movie[1]=('tuesday', '10','theatre1_map', 'theatre2_map');

//theatre1_map is actually referring to a file 'theatre1_map.jpg

But how do i retrieve the price 5 and add with quantity entered?

and i was thinking of matching the string of the theatre and display the image by query from array and then add something .jpg to the code

?

@HaganeNoKokoroAug 03.2004 — #You're going to need to declare entries in the movie array like this:

movie[0]=new Array('monday', '5','theatre1_map', 'theatre2_map');

then you can get the values like:

movie[0][0] would give you 'monday'

movie[0][1] would give you '5'

movie[0][2] would give you 'theatre1_map'

movie[0][3] would give you 'theatre2_map'

and so on

@terry81authorAug 03.2004 — #what is the different between a array created with [x]? where x is any value?

will the retrieving method be the same for normal array like 'var basket = new Array()'?

@HaganeNoKokoroAug 03.2004 — #As far as I know, there is no practical difference between

<i>
 </i>//Using Array() constructor declaration
 var myArray=new Array(x, y, z);

and

<i>
 </i>//Using array literal declaration
 var myArray=[x, y, z];

The two work exactly the same.

You can also use strings as array indices, like so:

<i>
 </i>var myArray=new Array();
 myArray['userName']='HaganeNoKokoro';
 myArray['favoriteAnimal']='cat';
 myArray['favoriteDrink']='coca-cola';

@terry81authorAug 04.2004 — #Hi again,

How do I query an image and append it?

example:

function showImage()

{

var selectedImage = document.getElementById("image");

if (selectedImage ="img1")

{

//what is the coding? Assumin I have a file name img1.jpg

}

}

<tr>

<td>Display Image</td>

<td>//what is the coding here?</td>

</tr>

?

@terry81authorAug 04.2004 — #Hi, forget about the previous posting..here it is

<script language="JavaScript">

var productDetails = new Array(4);

function showDetails()

{

var selectedProduct = document.getElementById("product");

var showDesc = document.getElementById("productDesc");

var displayDesc;

if (selectedProduct ="p1")

{

displayDesc="other day";

showDesc.innerText = displayDesc;

productDetails[0] = "p1"

productDetails[1] = 50 //hard code in the price

}

}

function showImage()

{

var selectedColor = document.getElementById("productColor");//get color

if(selectedColor = "c1")

{

//how to do the codings here and display?

}

}

</script>

<tr>

<td width="163" class="body"><div align="right">Select The Model</div>

</td>

<td width="357">

<select name="product" onchange="showDetails()">

<option value="p0" selected>--Select Model--</option>

<option value="p1">Product One</option>

<option value="p2">Product Two</option </select> </td>

</tr>

 <tr> 
   <td class="body"><div align="right">Select Model Color</div></td>
   <td><select name="modelColor" onchange="showImage()">
   <option value="c0" selected>--Select Model--</option>
   <option value="c1">Blue</option>
   <option value="c2">Green</option>
   <option value="c3">Yellow</option>
   <option value="c4">Orange</option>
   <option value="c5">Red</option>
   </select> </td>
   </tr>
 
   <tr> 
   <td class="body"><div align="right">Picture</div></td>
   <td>//display image according to model and color selected</td>
   </tr>
 
   <tr> 
   <td class="body"><div align="right">Enter Quantity</div></td>
   <td><input name="quantity"></td>
   </tr>
 
   <tr> 
   <td class="body"><div align="right">Total</div></td>
   <td><input name="total" >//display total here</td>
   </tr>

[COLOR=blue]I am actually trying to add elements into array from different function and then intend to query out all element to do TOTAL, check Model + Color to display correct image. Not sure if correct. [/COLOR]

@javaNoobieAug 04.2004 — #not sure if this is wat u wanted.. if its not den i'm terribly sorry.

====================================

[code=php]
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
 <html> 
 <head> 
 <title>Test Page</title> 
 <script language="JavaScript"> 
 
 var productDetails = new Array(4);
 
 function letsGo(){
 var selectedColor = document.getElementById("productColor");//get color
 var selectedProduct = document.getElementById("product");//get product
 var productDesc = document.getElementById("productDesc");//get textarea element to hold the desc
 var ele;
 
  ele=document.getElementById("pic");
 
  if (selectedProduct.value != "p0"){
   displayDesc="other day";
   productDesc.value = displayDesc;
   productDetails[0] = "p1";
   productDetails[1] = 50; //hard code in the price 
  }
 
  if(selectedColor.value !="c0"){
   //note change to .innerHTML and edit the src according to where image is held
   pic.innerText = "<img src='" + selectedColor.value + ".jpg'></img>";
  }
 }
 
 function validateAndCalulate(txt){
 if(/D/.test(txt.value)){
 alert('please input a number');
 txt.value='';
 }else{
 if(txt.form.product.value !="p0"){
 txt.form.total.value = txt.value * productDetails[1];
 }else{
 txt.form.total.value = "Please select a product";
 txt.value = '';
 }
 }
 }
 </script>
 </head> 
 <body> 
 <form>
 <table>
 <tr> 
 <td class="body"><div align="right">Select The Model</div></td>
 <td> 
 <select id="product" name="product" onchange="letsGo()">
 <option value="p0" selected>--Select Model--</option>
 <option value="p1">Product One</option>
 <option value="p2">Product Two</option>
 </select>
 </td>
 <td><textArea id="productDesc"></textarea></td>
 </tr>
 
 <tr> 
 <td class="body"><div align="right">Select Model Color</div></td>
 <td><select name="modelColor" onchange="letsGo()" id="productColor">
 <option value="c0" selected>--Select Model--</option>
 <option value="c1">Blue</option>
 <option value="c2">Green</option>
 <option value="c3">Yellow</option>
 <option value="c4">Orange</option>
 <option value="c5">Red</option>
 </select> </td>
 </tr>
 
 <tr> 
 <td class="body"><div align="right">Picture</div></td>
 <td><span name="pic" id="pic"></span></td>
 </tr>
 
 <tr> 
 <td class="body"><div align="right">Enter Quantity</div></td>
 <td><input type="text" name="quantity" onchange="validateAndCalulate(this)"></td>
 </tr>
 
 <tr> 
 <td class="body"><div align="right">Total</div></td>
 <td><input name="total" id="total" value="Display total here" readonly></td>
 </tr>
 </table>
 </form> 
 </body> 
 </html>
 
 [/code]

@terry81authorAug 04.2004 — #Oh great javanoobie,

thanks alot!! that's what I want. But is it possible to refresh the total by itself whenever someone type the quantity? if not, i try and create a button to inform user to refresh the price.

anyway u have been replyin to some of my postings...maybe u like to intro yrself?

I am only trained in Coldfusion so quite newbie to javascript. though I can understand people codes but I dun really can write my own codes.

@javaNoobieAug 04.2004 — #mm.. 19m.. frm sg too ^{^^{^.}} learnt abit of js in school.. so i am quite a newbie to js. so if the codes are inefficient pls understand that i am still learning too. ? glad to be of help to u

mm.. i just noticed that the '' is missing in my regex. pls take note of that if u are doing copy and paste

@terry81authorAug 04.2004 — #hi again, ?

if (selectedProduct.value ="p1"){

displayDesc="other day";

productDesc.value = displayDesc;

productDetails[0] = "p1";

productDetails[1] = 50; //hard code in the price

}

if(selectedColor.value ="c1" && selectedProduct.value="p1"){ 
   pic.innerText = "<img src='" + selectedColor.value + ".jpg'></img>"; 
  }

hmm my AND condition doesnt work even though it is declared outside the IF braces. I wan it to get image of Product X in Color Y. ?

@javaNoobieAug 04.2004 — #selectedColor.value ="c1" && selectedProduct.value="p1"[/QUOTE]

it should be double '='

[code=php]selectedColor.value=="c1" && selectedProduct.value=="p1"[/code]

@terry81authorAug 05.2004 — #hihi..got problems again...?

<html>

<head>

<title></title>

<script language="JavaScript">

var shoppingCart = new Array(4);

function addModel(){

var selectedModel = document.getElementById("model");//get product

var selectedColor = document.getElementById("modelColor");//get color

var modelDesc = document.getElementById("modelDesc");//get textarea element to hold the desc

if (selectedModel.value =="w1"){

displayDesc="w1 product";

modelDesc.value = displayDesc;

shoppingCart[0] = "w1";

shoppingCart[1] = 50; //hard code in the price

}

[COLOR=blue] . . . .blah blah blah [/COLOR]

else

displayDesc="w5 product";

modelDesc.value = displayDesc;

shoppingCart[0] = "w5";

shoppingCart[1] = 150; //hard code in the price

}

function getPicture(){

var selectedColor = document.getElementById("modelColor");//get color

var picture;

picture =document.getElementById("picture");

if(selectedColor.value =="blue" && shoppingCart[0] =="w1"){

//note change to .innerHTML and edit the src according to where image is held

picture.innerText = "<img src='" + selectedColor.value + "w1.jpg'></img>";

document.write(model);

} else

picture.innerText = "<img src='" + selectedColor.value + "not correct.jpg'></img>";

}

</script>

</head>

<body>

<form name="shopping" action="" onSubmit="return shopping()">

<table width="730" border="0" align="left">

<tr>

<td width="231" class="mainText"><div align="right">Select The Model</div></td>

<td width="489"> <select name="model" onchange="addModel()" >

<option value="w0" selected>--Select Model--</option>

<option value="w1">Model One</option>

[COLOR=blue] . . . . blah blah blah[/COLOR]

<option value="w5">Model Five</option>

</select> </td>

</tr>

<tr>

<td class="mainText"><div align="right">Select Model Color</div></td>

<td><select name="modelColor" onchange="getPicture()" id="modelColor">

<option value="noColor" selected>--Select Model--</option>

<option value="blue">Blue</option>

<option value="green">Green</option>

<option value="yellow">Yellow</option>

<option value="orange">Orange</option>

<option value="red">Red</option>

</select> </td>

</tr>

<tr>

<td class="mainText"><div align="right">Model Description</div></td>

<td> <textarea name="modelDesc" cols="20" rows="4"></textarea> </td>

</tr>

<tr>

<td class="mainText"><div align="right">Picture</div></td>

<td><span name="picture" id="picture"></span></td>

</tr>

</table>

</body>

</html>
the getPicture() does not work. The condition does not work[/QUOTE]

If you dont mind. ?

@javaNoobieAug 05.2004 — #
else

displayDesc="w5 product";

modelDesc.value = displayDesc;

shoppingCart[0] = "w5";

shoppingCart[1] = 150; //hard code in the price

[/QUOTE]

u missed out your {}

@terry81authorAug 05.2004 — #oh ya hor!!!

damm it been 3yrs+ no do programming..kinda lost..

btw is there any program for javascript where it can compile and return u errors??

at least I dont ned someone to check for me each time for such mistakes..so sorry.. thanks alot. ?

@javaNoobieAug 05.2004 — #none that i know of.. maybe the others know?

btw thats still a valid code despite the missing {} brackets so even if u hav a compiler i dont think it will warn u of the error ?

Also in #JavaScript _↴

Opening Pic in New Window please help tabber javascript code help

Success!

Help @terry81 spread the word by sharing this article on Twitter...

Tweet This

a booking system

20 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

a booking system

20 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

20 Comments(s) _↴

Also in #JavaScript _↴