Example: I've got a simple form: 2 drop-down menus. One is size of the item, the other is style of the item.

Any time any item in those menus is selected, I want a javascript script to POST (or GET) the info about the size/style selected in the form to a script on the server and get a path to an image, and display that image.

I can write a little script that takes what it POSTs (or GETs) and feeds back the path to an image, but I don't know how on earth to do the javascript part. Could someone help me out, PLEEEASE? Should I even be using JavaScript?

-ee99ee

Not sure i quite understand your post, but to post the info from a form to a php script to be processed you just need <form method=post action=script.php>

You didn't understand my post... let me try to clearify:

Here's an example: I've got a simple form, it's got 2 drop-down menus; one for size and one for style. Anytime any selection is made from those drop-down menus, I need a peice of client-side code to POST (or GET) to a server-side script. The server-side script will take in the selection of the 2 fields (size and style), and return the path to an image depending on how many items are in stock. Once the client-side script gets the path to the image back, it should then display that image.

So if I user changes the size/style combination 10 times before they hit submit, the image should change 10 times (the client-side script should POST to the server 10 times, once for each combination).

Does that clear things up?

-ee99ee

why would you need a server-side script to do this?

Originally posted by HotLinkHost
why would you need a server-side script to do this?

The client-side script would POST to the server-side script. The server-side script goes to the database and figures out how many items are in stock. From the number of items in stock, it determins the right image and returns the path of that image to the client-side script. The client-side displays the image in the browser.

-ee99ee

you dont do client side scripting for this
that is very wrong

this is what you do:
form -> script.php
everything is serverside
script.php
parses results of form, and from them displays the appropriate page...

nothing client side

Originally posted by ilyash
you dont do client side scripting for this
that is very wrong

this is what you do:
form -> script.php
everything is serverside
script.php
parses results of form, and from them displays the appropriate page...

nothing client side

No... you're wrong. I want the user to be able to select any size/style from the dropdown menu, and see an image on the client-side depending on how many items of that size/style are in stock. Once they find a combination they want, they can hit submit and it'll get processed. But let's say I've got a dropdown menu with 2 options, if you choose option 1 it'll immediately show you an image, but if you change the option it'll show you another image. So the client-side code will need to POST to the server each time an option is changed to get a new image path.

-ee99ee

Take a look at Javascript's onChange method (http://devedge.netscape.com/library/manuals/2000/javascript/1.3/reference/handlers.html#1119802) . You are looking to register this on the select that holds your first menu and change the other menus dynamically based on what was selected in the first. I did a Google search on "change menu javascript onchange example" and came up with many examples.

Originally posted by stdunbar
Take a look at Javascript's onChange method (http://devedge.netscape.com/library/manuals/2000/javascript/1.3/reference/handlers.html#1119802) . You are looking to register this on the select that holds your first menu and change the other menus dynamically based on what was selected in the first. I did a Google search on "change menu javascript onchange example" and came up with many examples.

Ah yes, exactly. Thank you!

So now, I know how to have the script execute when the menu is changed, my next question is how can I post the 2 values in the drop-down menus to the server, get the path to an image back, and change the path of an image without reloading the page?

-ee99ee

I have done something similar to what you are doing and here's the deal: you want your CGI, Perl, VB or PHP server side to look up some bit of information and return that information to a page that does not change, except for the photo/image; right?

Ok, when the original html page is loaded, call it a.html, and has the select box you discussed with an onChange=doupdate() javascript, that function doupdate() will do a document.myform.submit() and off you go to cgi/php land; let's call it a cgi. When the server side cgi sends info BACK the browser will (not maybe) go blank and start loading the new info from the server: that is what browser's do. They do NOT load a piece of a new page: they refresh, starting at blank and load whatever info the server side cgi is sending. I have had server side scripts send a history.back() command but that will still BLINK as far as the client goes and you won't have the info you retrieved from the server.

The way I would handle it is to load the table you are looking up in a javascript array, such as

myitems=new Array(
"towels,3,3.00",
"washclothes,5,1.50",
"bathmats,12,7.00"
)

and have this dynamically loaded when the customer first loads the page and you have item description, quantity on hand and price and that can be used to dynamically create pictures of numbers as their select changes without doing a post to the server for the info you want.

ANOTHER way to do this is via a frame or popup that does the actual post while the main page remains static. If you use this method you still need to communicate to the main page and that is where cookies come in handy. The posting page can be a small tile, hidden behind the main page and when an item changes the main page writes a cookie and the back page or framed area is looking for new cookies (new info) from the main page and when it changes it posts and comes back and the back page then writes a cookie and the main page is also scanning for changes in that info and updates the image you are discussing.


As for getting info back from the server without refreshing or reloading the main page and without using a framed posting box (it can be tiny) and without using cookies between the various url's you have open, I wanna see it when you build it.

Okay good, we are getting somewhere now. What this actually will be is one of about 4 images showing a little bar graph. All the way up will be green, meaning plenty are in stock; All the way down will be red, showing out of stock.

Can javascript change the src="something.jpg" of an <img> without reloading the page? I understand that I can't POST to a script and get it, so loading the value into each option as an array for JavaScript would work I suppose.

So, how in the world would I do this? I know nothing about JavaScript. Can someone point me in the right dirction, maybe an example?

-ee99ee

add an id attribute to the img tag eg: <img id="myImg" src="./foo.jpg"> then in javascript do something similiar to this.

<script language="Javascript">
<!--
function changeSrc(newsrc)
{
i = document.getElementById('myImg');
i.src = newsrc;
}
//-->
</script>


might also want to preload your images.

How do I take the path out of the array matching the item selected, and pass it to changeSrc(newsrc)?

-ee99ee

First, you can use id="somename" or name="somename": both have solutions. This example assumes you use name= as in

<img src="graphbar0.gif" name="graph1" border=0>

and graphbar0.gif would be for 0 items in stock (a tiny red blip 1 pixel high by 10 wide), graphbar1.jpg and 2, 3, 4, 5 ... and each one is taller than the last. Are you going to make 100 pics for 100% or 100 items? A graph bar as you describe has height limitations (10000 items?) and this is a painful way to do item counts but not too bad if you were doing percentages and only ramped up or down at 10 percent intervals. You might also try document.image.height=newheight where

var newheight=getCookie("itemqtyonhand")

but I have never adjusted an image height on the fly...you're gonna have to test that one... otherwise go for seperate images for rising bar.

Then using the array above with elements such as "towels,3,3.00" and in the html <select name="items onChange="fixgraph()"><option value="towels">Towels</option><option value="washcloths">Wash cloths etc.

then a function to split open array. This assumes you are using a popup window behind the main window, running out to a script and gettiing a post. It would be a lot easier if you PRELOADED the inventory count when you loaded the items so they were onhand at the time you needed them without going off to a cgi post each time a seleect changes because posting and waiting will really suck for the interface. But assuming that is what you want to do (post to get qty)...

function fixgraph()
{ var itemsel=document.form1.items.value
setCookie("itemqty","",killit)
setCookie("selitems",itemsel,amin)
wait4post()
// amin is a 60 second clock
// killit is a -1
// I assume you know how to get and set cookies with system clock
}

function wait4post()
{ var newqty=getCookie("itemqty")
if (!newqty)
{ setTimeout("wait4post",1000)
} else
{ var newpic=picpath+"graph"+newqty+".jpg"
document.form1.graph1.src=newpic
}
}

and then in your post html javascript (seperate page)

you'd have the cgi form

<form name="getqty" method = etc.>
<input type=hidden name="itemid">
</form>

and some javascript to control the post

function wait4item()
{ var sentmetheitem=getCookie("selitems")
if (!sentmetheitem)
{ setTimeout("wait4item",1000)
} else
{ document.getqty.itemid.value=sentmetheitem
document.getqty.submit()
}
}

and then the same html can wait for the server reply. actually the server sends the qty as a ?q=123 in the url

so... at the top (not in a function) you have

var myref=window.location.href
if (myref.indexOf("?")>0)
{ var leftright=myref.split("?q=")
var rightside=leftright[1]
if ((rightside) && (isnum(rightside)) // write a number verification routine called isnum
{ setCookie("itemqty",rightside,amin)
}
//which will feed the getCookie for this above and make the graph rise although jeeez, by now the user has passed out waiting for that-it will be a 'mega-delayed' twitch due to post time and not very pretty but if you included the QTY in the array, such as "towels,3,3.00" then you don['t need all this crap...
}

and then to split the array (your last question) and extract the qty (meaning skip all this extra cookie this and post that stuff...sorry, I jez woke up)

use the split function and you'd have

var allitem=myitems.split(",")
var itemname=allitem[0]
var itemqty=allitem[1]
var itemprice=allitem[2]

and the same newpic logic above

var newpic=picpath+"graph"+itemqty+".jpg"
document.form1.graph1.src=newpic

and that bout wraps up this thread except you gotta cut out all the extra code I put in above for the post - get qty - cookie me to death and wait - logic.

give you something to do, eh?

Well, I would pre-load everything into an array, but not that I think about it that would take FOREVER. There are at least 1000 combinations of size/style for each type of item, and there are 8 types of items on this form. I'm afraid my only option is going to be POSTing to the server to get that image path.

Let me re-re-re-re-read your reply, and play around with it a little. I can't thank you enough kckclass for helping me. You were talking about the images and how I'd have to do 100 of them for 100%, actually I'm just going to do about 4. It's a really small image, so you wouldn't be able to see much difference in a small change.

wait, stop - 1000 items? da-oood, that means 1000 different SELECTS? now that would indicate you haven't subgrouped, eh? So perhaps either different pages or different selects, like one for bathroom, one for kitchen, one for garden etc., thereby reducing each select length and again, it could kick to a 'bathroom' page where your CGI has defined the qty on hand or whatever num you need with that item, like price, qty on hand, colors etc. for an array that looked like

"blue hand towels,50,7.00",
"red hand towels,32,7.00", etc.

Really, while you might (heh heh) get a solution with frames, backside hidden pop ups and posting to cgi, it is a really ugly, time consuming, user waits a lot, solution that lacks finesse and grace and is just brut force. Gotta do it? Fine but it would seem to me if a select can contain enough items to cover a subcatagory you can preload all that. Don't tell me yur gonna load a 1000 item select without breaking that up....? Be nice to your users... have them select a subcatagory, that goes to the cgi script, that creates the javascript array, then as they browse you have everything right there and no brut force post-cookie-wait-cookie-loadpic etc. is required. Also, an earlier post suggested you preload those pics... good idea, using height=1 width=1 in a corner of the page of on a background that is all mixed up so those pixels don't show...

No... there are around possiable 1000 different combinations between the 2 dropdown menus. Plus, there are 6 or 7 groups of these 2 dropdown menus. So I'll have an image for each dropdown menu.

-ee99ee