SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Guru
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    852
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Modify Selection Box based on Previous Selection?

    There's no easy way to explain this, but i'll try and make it easy to read at least.

    I'm creating a little facility which will allow admins to add a product to an existing order for an online shop. Each product has a type and weight/price value. Depending on what product the user (admin) selects from the long list of products, I want the selection in the 'type' box to be modified and the weight/price selection box to only show the available weights/prices for that product.

    The thing is, I want to be able to provide this all in one compact interface which doesn't require reloading after each selected. Luckily, the 'type' the user selects won't affect the available weights/prices.

    I'm using php for the backend and shouldn't have any problems implementing any of your suggestions. So basically, what's the best way to do this. I'm no javascript guru, but obviously the available types and weights/prices for each product need to be stored on the page somewhere, and of course need to be in a format which a javascript can access and use. Like I said, I'm not a javascript guru but I get the feeling that hidden fields containing delimiter seperated values will be the way to go. Here's what I have in mind...

    HTML Code:
    <input type="hidden" name="<some name which will related to the product it corresponds to>" value="chocolate[Chocolate],strawberry[Strawberry],vanilla[Vanilla];500[500g ($16)],1000[1kg ($28)]" />
    In the value="" property, the ';' seperates the types from the weights/prices. The commas then separate the available options for each. The text out of the square brackets will be the value of the select option in the 'Type' and 'Weight' drop-down selection list. What's contained in the square brackets will be what's displayed to the user in the drop-down selection list.

    The problem really is, I don't know javascript, and so I basically need someone to convert my theory (or whatever you call the above) into working code.

    I know this won't just be a few lines of code, which is why I really will appreciate the time and energy anyone puts into to trying to achieve this for me. I'm even willing to pay $$, but I better not talk about that here as obviously sitepoint would want me to post this in the market place.

    Cheers!

  2. #2
    SitePoint Member Nemea Lion's Avatar
    Join Date
    Jan 2008
    Location
    México
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Post

    Hi there:

    I see what you want to achieve, is relatively easy but verbose.
    I made a little example for you, it's very simple, you don't use
    hidden fields, but instead create a javascript variable for the
    data you want to use. Using the hidden fields is better when you
    have a lot of data, because the variables must be keep in the
    client's browser memory, slowing it a tiny bit, but if you use
    the hidden fields then you must parse the data everytime
    you need to use it, and thats a bit more complicated.

    The best solution will be to use AJAX and get the information for
    the other selects on demand from your server, but thats another
    tale. For now I'll give you somewhere to start, there's plenty of
    room for improvements in this code, try to understand it to be
    able to improve onto it. Javascript is necessity for anyone making
    stuff in the web.

    Here is the code: (The 3 parts go togheter, I separated
    them for the syntax higlight)
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    	<head>
    		<title>DEMO</title>
    	</head>
    	<body>
    		<select id="items">
    			<option value="item01">Item01</option>
    			<option value="item02">Item02</option>
    		</select>
    		<select id="types"></select>
    		<select id="weights"></select>
    		<script type="text/javascript">
    Code JavaScript:
    			// We assign the select boxes to variables for easy manipulation
    			var selItems = document.getElementById("items");
    			var selTypes = document.getElementById("types");
    			var selWeights = document.getElementById("weights");
    			// This is where you generate the data for each item in the backend.
    			// each one is a javascript variable, an object with 2 properties,
    			// types and weights, each one being an array of anonymous objects 
    			// with 2 properties, a value and a label, that will be used to
    			// populate the other combos. Note that each item is inside {}
    			// and separated by commas. You can add as many items as you want, 
    			// just keep the same structure.
    			var Item01Data = {	types:[
    									{value:"chocolate",label:"Chocolate"},
    									{value:"strawberry",label:"Strawberry"}
    									// any other type you want, separated by commas ex:
    									// ,{value:"someOtherFlavor",label:"someOtherLabel"}
    									],
    								weights:[
    									{value:"500",label:"500g ($16)"},
    									{value:"1000",label:"1kg ($28)"}
    									// same for this ones
    									] // <-- Don't forget to close the square brackets of the array,r
    									// or any curly brace of the items
    								};
     
    			// You can create an item data for each item in your first select.
    			var Item02Data = {	types:[
    									{value:"banana",label:"Banana"},
    									{value:"apple",label:"Apple"}],
    								weights:[{value:"300",label:"300g ($10)"},
    									{value:"750",label:"750 ($20)"}]
    								};
     
    			// We assign the handler of the change event to the select
    			selItems.onchange = function(e){
    				switch(selItems.value){
    					case "item01":
    						myData = Item01Data;
    						break;
    					case "item02":
    						myData = Item02Data;
    						break;
    					default:
    						break;
    				}
    				// This two lines will clear the other selects when whe change the
    				// first one
    				while(selTypes.options.length > 0){ selTypes.remove(0); }
    				while(selWeights.options.length > 0){ selWeights.remove(0); }
     
    				//After emptying the selects, we repopulate them again with the values from
    				// the data objects
    				for(i=0;i<myData.types.length;i++){
    					selTypes.options[i] = new Option(myData.types[i].label,myData.types[i].value);
    				}
    				for(i=0;i<myData.weights.length;i++){
    					selWeights.options[i] = new Option(myData.weights[i].label,myData.weights[i].value);
    				}
    			}
    HTML Code:
    		</script>
    	</body>
    </html>

  3. #3
    SitePoint Guru
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    852
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That looks like it will do the trick, thanks Nemea. I'll test it out late this afternoon (currently early morning here). A quick question however, if I had 100 products, what would the performance of this script be? pretty snappy? I assume it would be because it's all stored in variables which like you said can be accessed much faster than say a hidden field.

    I was thinking of Ajax but decided that I may as well load all the info into the page on first load to both speed up the process of adding a product, and save on the amount of code required to do this (and the backend code.etc).

    Once again, thanks mate.

  4. #4
    SitePoint Member Nemea Lion's Avatar
    Join Date
    Jan 2008
    Location
    México
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Hi Wardrop

    I don't know how well it will scale, but 100 elements still seems ok to me.
    Just rememeber is the client's memory you are using,(it's always memory vs
    speed). If you plan to have a lot of products then I'll recomend using AJAX.
    It's not so hard, and it can scale very well to thousands of products.

    The advantages of this approach are that mostly you reduce the latency of
    comunications by having all data already loaded on the page. The downside
    is that the size of the page can grow quickly, and bandwidth could be an
    issue.

    But anyway, I was glad to help you.

  5. #5
    SitePoint Guru
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    852
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Only admins will see/use this, and it really will only be accessed a few times a day if that. I'm going to try and implement your solution now. I'll let you know how I go.

    (anyone else feel free to provide other solutions or suggestions).


Bookmarks

Posting Permissions

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