Flic Posted March 18, 2006 Share Posted March 18, 2006 I've just started to experiment with javascript for a site I want to extend. This is also the first time that I have tried to use the html form functions.Anyway, I have a drop down box with a few options in and at the moment I'm trying to get it to create a pop up when one of them is selected. This isn't what it'll do in the end but that way I know its working. I've seen it done with what is shown to the user, but the names of each option is unique so I want to do it with that. However I don't seem to be getting very far! <html><head><script type="text/javascript">function changeColour() {String result = document.input.colour.value;alert(result);}</script></head><body><form name="input"><select name="colour" onchange="changeColour()"><option value="black">Black / Grey</option><option value="purple">Purple</option><option value="blue">Blue</option></select><input type="submit" value="Add"></input></script></form></body></html> The Add button isn't meant to be doing anything at the moment, just trying to get this to work first. Any hints to make this work much appreciated! Thank you! Link to comment Share on other sites More sharing options...
scott100 Posted March 18, 2006 Share Posted March 18, 2006 Hi Flic, welcome to the forum. Javascript is very flexible when variables are concerned, to declare a variable use the keyword var, it handles all variable types like number, strings, dates etcchange: String result = document.input.colour.value;to: var result = document.input.colour.value;also<input> is self closing like <input /> does not require a </input>You have a </script> in the body which isn't needed. Link to comment Share on other sites More sharing options...
Flic Posted March 18, 2006 Author Share Posted March 18, 2006 Hi Flic, welcome to the forum. Javascript is very flexible when variables are concerned, to declare a variable use the keyword var, it handles all variable types like number, strings, dates etcchange: to: also<input> is self closing like <input /> does not require a </input>You have a </script> in the body which isn't needed.<{POST_SNAPBACK}> Thank you very much Scott I thought String would be ok to use, as thats what I'm used to using, but it obviously makes a difference! Oops about the /script, I had code there before but obviously forgot to delete that when I deleted the code! Link to comment Share on other sites More sharing options...
Flic Posted March 19, 2006 Author Share Posted March 19, 2006 Sorry to come back so soon!I've made progress with what I intend to do with this code, in that it should change a picture when a colour is selected in the drop down box. Having a look at the picture properties the info the url in it is right, but the picture just doesn't show. I've had a look at some pictures on the site that work and the url just shows the folder, not the file, which this one does, so i'm guessing that might be where the problem lies.Anyway, any help appreciated! Code follows: <html><head><script type="text/javascript">function changeColour() {var selection = document.input.colour.selectedIndex;document.pic.src = document.input.colour.options[selection].value;}</script></head><body><form name="input"><select name="colour" onchange="changeColour()"><option value="black.jpg">Black / Grey</option><option value="purple.jpg">Purple</option><option value="blue.jpg">Blue</option></select><input type="submit" value="Add"><br><br><img name="pic" src="blank.jpg" alt="Photo"><br></form></body></html> Thank you! Link to comment Share on other sites More sharing options...
scott100 Posted March 19, 2006 Share Posted March 19, 2006 (edited) Your code is fine flic, it has something to do with where your images are located.I changed the pictures to ones on the internet at it works fine. <html><head><script type="text/javascript">function changeColour() {var selection = document.input.colour.selectedIndex;document.pic.src = document.input.colour.options[selection].value;}</script></head><body><form name="input"><select name="colour" onchange="changeColour()"><option value="http://www.google.co.uk/intl/en_uk/images/logo.gif">Black / Grey</option><option value="http://pics.ebaystatic.com/aw/pics/uk/logos/logoEbay_150x70.gif">Purple</option><option value="http://www.w3schools.com/images/w3default80.jpg">Blue</option></select><input type="submit" value="Add"><br><br><img name="pic" src="blank.jpg" alt="Photo"><br></form></body></html> Edited March 19, 2006 by scott100 Link to comment Share on other sites More sharing options...
Flic Posted March 19, 2006 Author Share Posted March 19, 2006 Apparently because i did the picture so quickly, it was just a square of the relevant colour, the compression of the jpg made it mess up, it was on 1 and now its on 10 its working fine.I thought i was going crazy! I couldn't even get a simple link to the picture to work!All sane again now! Thank you! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now