Jump to content

Problem with shopping...


OWZ2004

Recommended Posts

Problem with shopping table...Im trying to build a shopping form..The table has four fields:-The first is a pull down menu named order code with 6 selections within it.The second is a description boxthe third a quantity fieldand the forth a price fieldThe problem im having is when i select an option from the drop down menu i want a description of the game to appear in the description field and the price to load into the price field.Ive set up an array which i want to load from when i make a selection from the pull down menu..Ive tried all sorts of things but cant seem to get the description to load into the text box..Does anyone know of a script or could help me solve this problem?The array i have is:-

var Gamesdesc = gamesdesc(6);	gamesdesc[0]"Civilization IV - Product ID - Civ5",	gamesdesc[1]"Moscow '41 - Product ID - Mos41",	gamesdesc[2]"Empire Earth II - Product ID - EmpEarII",	gamesdesc[3]"Dungeon Seige II - Product ID - DunSeiII",	gamesdesc[4]"Battlefield 2 - Product ID - BatFi2",	gamesdesc[5]"Spacehack - Product ID - spahac",

This is the pull down menu code

<form name="main" method="post">        <div align="center">           <select name="Game" size="1" onChange='get_selected()'>            <option value="0">Select Game </option>            <option value="1">BatFi2 </option>            <option value="2">Civ5 </option>            <option value="3">Mos41 </option>            <option value="4">EmpEarII </option>            <option value="5">DunSeiII </option>            <option value="6">SpaHac </option>          </select>        </div>      </form>

The form is called "main", the select tag is called "game" the description field name is called "desc" and the price field named "price"Any help would be greatly appreciated, as i kniw this should be straight forward, but cannot get it to work.. :) Thank you in advanceOwz

Link to comment
Share on other sites

There were a few errors but this should work

<head><script>function get_selected(val){var game=new Array(7)game[0]="no choice"game[1]="game 1"game[2]="game 2"game[3]="game 3"game[4]="game 4"game[5]="game 5"game[6]="game 6"document.getElementById('desc').value=game[val];}</script></head><body><form name="main" method="post">       <div align="center">          <select name="Game" size="1" onChange='get_selected(this.value)'>           <option value="0">Select Game </option>           <option value="1">BatFi2 </option>           <option value="2">Civ5 </option>           <option value="3">Mos41 </option>           <option value="4">EmpEarII </option>           <option value="5">DunSeiII </option>           <option value="6">SpaHac </option>         </select><input type="text" id="desc" />       </div>     </form></body>

Link to comment
Share on other sites

There were a few errors but this should work
<head><script>function get_selected(val){var game=new Array(7)game[0]="no choice"game[1]="game 1"game[2]="game 2"game[3]="game 3"game[4]="game 4"game[5]="game 5"game[6]="game 6"document.getElementById('desc').value=game[val];}</script></head><body><form name="main" method="post">       <div align="center">          <select name="Game" size="1" onChange='get_selected(this.value)'>           <option value="0">Select Game </option>           <option value="1">BatFi2 </option>           <option value="2">Civ5 </option>           <option value="3">Mos41 </option>           <option value="4">EmpEarII </option>           <option value="5">DunSeiII </option>           <option value="6">SpaHac </option>         </select><input type="text" id="desc" />       </div>     </form></body>

Cheers mate will try it out now...thanks
Link to comment
Share on other sites

There were a few errors but this should work
<head><script>function get_selected(val){var game=new Array(7)game[0]="no choice"game[1]="game 1"game[2]="game 2"game[3]="game 3"game[4]="game 4"game[5]="game 5"game[6]="game 6"document.getElementById('desc').value=game[val];}</script></head><body><form name="main" method="post">       <div align="center">          <select name="Game" size="1" onChange='get_selected(this.value)'>           <option value="0">Select Game </option>           <option value="1">BatFi2 </option>           <option value="2">Civ5 </option>           <option value="3">Mos41 </option>           <option value="4">EmpEarII </option>           <option value="5">DunSeiII </option>           <option value="6">SpaHac </option>         </select><input type="text" id="desc" />       </div>     </form></body>

Cheers that works perfectly the description loads when i select the game but i also need to assign the price to the game so that it loads in the price field..any suggestionsThe price field is named "price"Cheers tho, took me ages to try and solve that...
Link to comment
Share on other sites

A bit more trickier but here you go :)

<head><script>function get_selected(val){var game = new Array();game[0] = new Array( "No Choice" , "" );game[1] = new Array( "Game 1" , "2.99" );game[2] = new Array( "Game 2" , "54.22" );game[3] = new Array( "Game 3" , "100" );game[4] = new Array( "Game 4" , "3.66" );game[5] = new Array( "Game 5" , "7.20" );game[6] = new Array( "Game 6" , "66.2" );document.getElementById('desc').value=game[val][0];document.getElementById('price').value=game[val][1];}</script></head><body><form name="main" method="post">       <div align="center">          <select name="Game" size="1" onChange='get_selected(this.value)'>           <option value="0">Select Game </option>           <option value="1">BatFi2 </option>           <option value="2">Civ5 </option>           <option value="3">Mos41 </option>           <option value="4">EmpEarII </option>           <option value="5">DunSeiII </option>           <option value="6">SpaHac </option>         </select><input type="text" id="desc" />£ <input type="text" id="price" />       </div>     </form></body>

Link to comment
Share on other sites

Just add to the array, is this what you meant?

<head><script>function get_selected(val){var game = new Array();game[0] = new Array( "No Choice" , "" , "" , "");game[1] = new Array( "Game 1" , "1.99" , "1a" , "1b" );game[2] = new Array( "Game 2" , "2.99" , "2a" , "2b" );game[3] = new Array( "Game 3" , "3.99" , "3a" , "3b" );game[4] = new Array( "Game 4" , "4.99" , "4a" , "4b" );game[5] = new Array( "Game 5" , "5.99" , "5a" , "5b" );game[6] = new Array( "Game 6" , "6.99" , "6a" , "6b" );document.getElementById('desc').value=game[val][0];document.getElementById('price').value=game[val][1];document.getElementById('new').value=game[val][2];document.getElementById('more').value=game[val][3];}</script></head><body><form name="main" method="post"><div align="center"><select name="Game" size="1" onChange='get_selected(this.value)'><option value="0">Select Game </option><option value="1">BatFi2 </option><option value="2">Civ5 </option><option value="3">Mos41 </option><option value="4">EmpEarII </option><option value="5">DunSeiII </option><option value="6">SpaHac </option></select><input type="text" id="desc" />£ <input type="text" id="price" /><input type="text" id="new" /><input type="text" id="more" /></div>

:)

Link to comment
Share on other sites

Just add to the array, is this what you meant?
<head><script>function get_selected(val){var game = new Array();game[0] = new Array( "No Choice" , "" , "" , "");game[1] = new Array( "Game 1" , "1.99" , "1a" , "1b" );game[2] = new Array( "Game 2" , "2.99" , "2a" , "2b" );game[3] = new Array( "Game 3" , "3.99" , "3a" , "3b" );game[4] = new Array( "Game 4" , "4.99" , "4a" , "4b" );game[5] = new Array( "Game 5" , "5.99" , "5a" , "5b" );game[6] = new Array( "Game 6" , "6.99" , "6a" , "6b" );document.getElementById('desc').value=game[val][0];document.getElementById('price').value=game[val][1];document.getElementById('new').value=game[val][2];document.getElementById('more').value=game[val][3];}</script></head><body><form name="main" method="post"><div align="center"><select name="Game" size="1" onChange='get_selected(this.value)'><option value="0">Select Game </option><option value="1">BatFi2 </option><option value="2">Civ5 </option><option value="3">Mos41 </option><option value="4">EmpEarII </option><option value="5">DunSeiII </option><option value="6">SpaHac </option></select><input type="text" id="desc" />£ <input type="text" id="price" /><input type="text" id="new" /><input type="text" id="more" /></div>

  :)

Because the form is a table there will be several rows of the same thing... so they will be duplicating one after the other, there will be several drop down menus with the same options but just on different rows.. several description fieldboxes on different rows, several quanity boxes on different rows and so forth..would you like me to email you the html document? might be easier to understand?
Link to comment
Share on other sites

No probs, here it is so far, each select accesses the array and fills in the form, quantity calculates totals

<html><head><title>Game store UK - Selling top P.C titles</title><script>function get_selected(val,num){var game = new Array();game[0] = new Array( "No Choice" , "" );game[1] = new Array( "Battlefield 2" , "28.00" );game[2] = new Array( "Civilisation 4" , "36.25" );game[3] = new Array( "Moscow 41" , "30.00" );game[4] = new Array( "Empire earth 2" , "35.00" );game[5] = new Array( "DungeonSiege" , "27.00" );game[6] = new Array( "Space hack" , "12.00" );document.getElementById('desc'+num).innerHTML=game[val][0];document.getElementById('price'+num).value=game[val][1];get_total();}function get_total(){var total1=0;var total2=0;var total3=0;var total4=0;var grandTotal=0;var q1=document.getElementById('qty1').value;var p1=document.getElementById('price1').value;total1=q1*p1;var q2=document.getElementById('qty2').value;var p2=document.getElementById('price2').value;total2=q2*p2;var q3=document.getElementById('qty3').value;var p3=document.getElementById('price3').value;total3=q3*p3;var q4=document.getElementById('qty4').value;var p4=document.getElementById('price4').value;total4=q4*p4;grandTotal=total1+total2+total3+total4;grandTotal=grandTotal.toFixed(2);document.getElementById('total').value=grandTotal;}</script></head><body><p> </p><table width="89%" border="0">  <tr>    <td width="17%"><img src="file:///C|/Documents%20and%20Settings/llewellyn/Desktop/battlefield-2-c.jpg" width="150" height="150"></td>    <td width="17%"><img src="file:///C|/Documents%20and%20Settings/llewellyn/Desktop/Civiliv%20copy.jpg" width="150" height="150"></td>    <td width="17%"><img src="file:///C|/Documents%20and%20Settings/llewellyn/Desktop/Moscow41%20copy.jpg" width="150" height="150"></td>    <td width="17%"><img src="file:///C|/Documents%20and%20Settings/llewellyn/Desktop/EmpireEarthii%20copy.jpg" width="150" height="150"></td>    <td width="22%"><img src="file:///C|/Documents%20and%20Settings/llewellyn/Desktop/Dungeonsiegeii%20copy.jpg" width="150" height="150"></td>    <td width="10%"><img src="file:///C|/Documents%20and%20Settings/llewellyn/Desktop/Spacehack%20copy.jpg" width="150" height="150"></td>  </tr>  <tr>    <td><div align="center"><font face="Arial, Helvetica, sans-serif"><strong>£28.00</strong></font></div></td>    <td><div align="center"><font face="Arial, Helvetica, sans-serif"><strong>£36.25</strong></font></div></td>    <td><div align="center"><font face="Arial, Helvetica, sans-serif"><strong>£30.00</strong></font></div></td>    <td><div align="center"><font face="Arial, Helvetica, sans-serif"><strong>£35.00</strong></font></div></td>    <td><div align="center"><font face="Arial, Helvetica, sans-serif"><strong>£27.00</strong></font></div></td>    <td><div align="center"><font face="Arial, Helvetica, sans-serif"><strong>£12.00</strong></font></div></td>  </tr></table><p> </p><p> </p><form name="main" method="post"><table width="67%" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#666666" bgcolor="#FFFFFF">  <tr>    <td width="12%"><div align="center"><strong><font face="Arial, Helvetica, sans-serif">Order        code</font></strong></div></td>    <td width="46%"><div align="center"><strong><font face="Arial, Helvetica, sans-serif">Description</font></strong></div></td>    <td width="16%"><div align="center"><strong><font face="Arial, Helvetica, sans-serif">Quantity</font></strong></div></td>    <td colspan="2"><div align="center"><strong><font face="Arial, Helvetica, sans-serif">Price</font></strong></div></td>  </tr>  <tr>    <td height="26">        <select name="Game" size="1" onChange='get_selected(this.value,1)'>          <option value="0">Select Game </option>          <option value="1">BatFi2 </option>          <option value="2">Civ5 </option>          <option value="3">Mos41 </option>          <option value="4">EmpEarII </option>          <option value="5">DunSeiII </option>          <option value="6">SpaHac </option>        </select>      </form></td>    <td> <div id="desc1"> </div></td>    <td> <input name="qty" type="text" id="qty1" size="10" maxlength="2" onkeyup="get_total()"></td>    <td colspan="2"> £<input type="text" id="price1" /></td>  </tr>  <tr>    <td height="26">        <select name="Game" size="1" onChange='get_selected(this.value,2)'>          <option value="0">Select Game </option>          <option value="1">BatFi2 </option>          <option value="2">Civ5 </option>          <option value="3">Mos41 </option>          <option value="4">EmpEarII </option>          <option value="5">DunSeiII </option>          <option value="6">SpaHac </option>        </select>      </form></td>    <td> <div id="desc2"> </div></td>    <td> <input name="qty" type="text" id="qty2" size="10" maxlength="2" onkeyup="get_total()"></td>    <td colspan="2"> £<input type="text" id="price2" /></td>  </tr>  <tr>    <td height="26">        <select name="Game" size="1" onChange='get_selected(this.value,3)'>          <option value="0">Select Game </option>          <option value="1">BatFi2 </option>          <option value="2">Civ5 </option>          <option value="3">Mos41 </option>          <option value="4">EmpEarII </option>          <option value="5">DunSeiII </option>          <option value="6">SpaHac </option>        </select>      </form></td>    <td> <div id="desc3"> </div></td>    <td> <input name="qty" type="text" id="qty3" size="10" maxlength="2" onkeyup="get_total()"></td>    <td colspan="2"> £<input type="text" id="price3" /></td>  </tr>  <tr>    <td height="26">        <select name="Game" size="1" onChange='get_selected(this.value,4)'>          <option value="0">Select Game </option>          <option value="1">BatFi2 </option>          <option value="2">Civ5 </option>          <option value="3">Mos41 </option>          <option value="4">EmpEarII </option>          <option value="5">DunSeiII </option>          <option value="6">SpaHac </option>        </select>      </form></td>    <td> <div id="desc4"> </div></td>    <td> <input name="qty" type="text" id="qty4" size="10" maxlength="2" onkeyup="get_total()"></td>    <td colspan="2"> £<input type="text" id="price4" /></td>  </tr>  <tr>    <td height="21"> </td>    <td> </td>    <td><font size="2" face="Arial, Helvetica, sans-serif"> </font></td>    <td colspan="2"> </td>  </tr>  <tr>    <td><div align="center"> </td>    <td> </td>    <td><div align="center"><font face="Arial, Helvetica, sans-serif"><strong>        Total</strong></font></div></td>    <td width="7%" colspan="2">£<input id="total" type="text" disabled="disabled"></td>    <td width="19%">    </td>  </tr></table><p> </p>			<center>  <a href="index1.htm"><img src="proceed-to-checkout-small.gif" width="164" height="25" border="0"></a></center></body></html>

Link to comment
Share on other sites

Nice scott. I'd be tempted to compress it even further, and have the field id in the array too, then dynamically write the select boxes onto the page, so you only have the code once instead of duplicating.It really does depend on whether you want to provide the form for people with javascript disabled at all, or whether it's worth the time to have it all written in script. :)

Link to comment
Share on other sites

Yeah there's a couple of areas that could be improved... but im sure OWZ2004 gets the idea and is closer to completing their shopping form. :) It's just a shame that you can go to such lenthy efforts with JavaScript only for the client to turn it off, oh well :)

Link to comment
Share on other sites

very cool, scott...i must say you are very generous with your time and with you willingness to create and share code.but, i have a question...i noticed that your game array had two values per index...does that make it a 2-dimensional array?how is your code: game[val][0] working?or this code: onChange='get_selected(this.value,2)?could you pick the 2nd element of a given index value without picking the first?i'm somewhat familiar with mutiple-dimension arrays from other programming experience but have never heard of them for javascript, that's why i'm asking.

Link to comment
Share on other sites

Thanks, i like to help out when i've got the time, just like everyone else :)

i noticed that your game array had two values per index...does that make it a 2-dimensional array?
Yes, it's an array within an array :)
how is your code: game[val][0] working?
val is the number sent from the select index, 0 just means first value in the array.var game = new Array();game[0] = new Array( "Game 0" , "1.99" , "1a" , "1b" );game[0][0] would return Game 1game[0][1] would return 1.99game[0][2] would return 1agame[0][3] would return 1a
or this code: onChange='get_selected(this.value,2)?
This just means that when someone changes the select menu, send the value of the menu (this.value) and what menu number it is (2) to the get_selected() function. This makes the function re-usable :)
could you pick the 2nd element of a given index value without picking the first?
Yes, in the code i used this to put the values of the array into the textboxesdocument.getElementById('desc').value=game[val][0]; //just delete this line to pick 2nd onlydocument.getElementById('price').value=game[val][1];
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...