|
ilus
Bred in Captivity



Registered: 05/07/04
Posts: 3,152
Loc: Around the bend.
|
Coders... I need a little javascript help!
#8027386 - 02/15/08 01:35 PM (15 years, 11 months ago) |
|
|
I'm working on an application and am teaching myself javascript finally since I don't do too much coding. Anyway, I have most of the app coded, but now I'm trying to get the image on the right to update when you select a form.
Project I'm working on: http://conceptknot.com/littleriver/
Full javascript for it (the image function is at the very bottom) http://conceptknot.com/littleriver/buildboat.js
So here is my function to change the images:
function showSelect(x){ // show the selected image if(x == 0){ document.getElementById('myImage').outerHTML = "<img src='images/boat1.jpg' alt='' name='myImage' id='myImage' border='0'>" } if(x == 1){ document.getElementById('myImage').outerHTML = "<img src='images/boat2.jpg' alt='' name='myImage' id='myImage' border='0'>" } if(x == 2) { document.getElementById('myImage').outerHTML = "<img src='images/boat3.jpg' alt='' name='myImage' id='myImage' border='0'>" } }
and I'm using that to change the different forms:
<form method="POST" name="selectionForm"> <b>Boat Only</b><br> Guide Boat Style <input type="checkbox" name="BoatOnly" value="1275.00" onclick="this.form.total.value=calculateTotal(this);"> <br /><br /> <b>Add Rails:</b> <br> <input name="Rails" type="radio" value="0.00" onclick="this.form.total.value=calculateTotal(this);"> None <br> <input name="Rails" type="radio" value="110.00" onclick="this.form.total.value=calculateTotal(this);"> Cherry: <em>$110.00</em> <br> <input name="Rails" type="radio" value="100.00" onclick="this.form.total.value=calculateTotal(this);"> Black: <em>$100.60 </em><br /> <br /> <b>Add Benches:</b> <br> <input name="Benches" type="radio" value="0.00" onclick="this.form.total.value=calculateTotal(this);"> None <br> <input name="Benches" type="radio" value="110.00" onclick="this.form.total.value=calculateTotal(this);"> 1 Bench: <em>$80.00</em> <br> <input name="Benches" type="radio" value="100.00" onclick="this.form.total.value=calculateTotal(this);"> 2 Benches: <em>$90.75</em> <br /> <br />
<input type="hidden" name="calculatedTotal" value="0"> <input type="hidden" name="previouslySelectedRadioButton" value="0"> <strong>Your total is:</strong> <input type="text" name="total" readonly onfocus="this.blur();" /> </form>
I was going to use the script below in the form to connect the function, but I'm already using a value to change the price of it, and I can't figure out how to change the image by using a different value...
<form> <select name="" size=1 multiple onChange="showSelect(this.options[selectedIndex].value)"> <option value="0">Select an image</option> <option value="1">boat1</option> <option value="2">boat2</option>
</select> </form>
Anyway, I'm trying to connect the dots and teach myself javascript, any help is greatly appreciated!
-------------------- Message me for Mushroom Tinctures Lion's Mane, Reishi, Turkey Tail, Chaga, Shiitake / Extracts / CBD Isolate, Oil ---- My Art, Design, Sculpture & Music: http://www.conceptflow.org
|
Ythan
ᕕ( ᐛ )ᕗ



Registered: 08/08/97
Posts: 18,774
Loc: NY/MA/VT Borderlands
Last seen: 2 hours, 15 seconds
|
Re: Coders... I need a little javascript help! [Re: ilus]
#8027783 - 02/15/08 03:21 PM (15 years, 11 months ago) |
|
|
I'm having trouble understanding exactly what the problem is and what you're trying to do. But try this and see if it's what you had in mind:
Code:
<script type="text/javascript"> function updateTotals(theform){ var price = 0, childcount = theform.childNodes.length; // Handle checkboxes and radiobuttons for(var i=0;i<childcount;i++){ if (theform.childNodes[i].checked){ price += parseFloat(theform.childNodes[i].value); } } // Handle dropdown list price += parseFloat(document.getElementById('Paint')[document.getElementById('Paint').selectedIndex].value); var boatimages = ["http://conceptknot.com/littleriver/images/boat1.jpg", "http://news.bbc.co.uk/media/images/40882000/jpg/_40882093_boat300245.jpg", "http://media-cdn.tripadvisor.com/media/photo-s/00/1c/3e/b1/nice-boat.jpg"] document.getElementById('boatimg').src = boatimages[document.getElementById('Paint').selectedIndex]; // Update price document.getElementById('total').value = price.toFixed(2); } </script>
<table><tr><td> <form method="POST" name="selectionForm" onchange="updateTotals(this)"> <b>Boat Only</b><br> Guide Boat Style <input type="checkbox" name="BoatOnly" value="1275"> <br><br> <b>Add Rails:</b><br> <input name="Rails" type="radio" value="0" checked> None<br> <input name="Rails" type="radio" value="110"> Cherry: <em>$110.00</em><br> <input name="Rails" type="radio" value="100.60"> Black: <em>$100.60</em><br> <br> <b>Add Benches:</b><br> <input name="Benches" type="radio" value="0" checked> None<br> <input name="Benches" type="radio" value="80"> 1 Bench: <em>$80.00</em><br> <input name="Benches" type="radio" value="90.75"> 2 Benches: <em>$90.75</em><br> <br> <b>Paint Job:</b><br> <select name="Paint" id="Paint" size="1"> <option value="0">None</option> <option value="100">Crappy ($100)</option>; <option value="200">Good ($200)</option>; </select> <br><br> <strong>Your total is:</strong> <input type="text" name="total" id="total" value="0.00" readonly> </form> </td><td valign="top"> <img name="boatimg" id="boatimg" src="https://proxy.mind-media.com/proxy.php?url=http%3A%2F%2Fconceptknot.com%2Flitt%3Cwbr%3Eleriver%2Fimages%2Fboat1.jpg" width="200" height="150"> </td></tr></table>
|
ilus
Bred in Captivity



Registered: 05/07/04
Posts: 3,152
Loc: Around the bend.
|
Re: Coders... I need a little javascript help! [Re: Ythan]
#8027940 - 02/15/08 04:02 PM (15 years, 11 months ago) |
|
|
Ahhhh thanks so much for the help Ythan, almost!
Basically, I have all of the boat pictures in the http://www.conceptknot.com/littleriver/images/ folder which represent each option you can select... so I have a picture for the option of having cherry or black rails, 1 bench, or two benches, and when the user clicks on the form option to the left, it needs to update the picture on the right via ajax or javascript, or whatever.
I have a bunch of other options I have to add later, I just can't seem to figure out how to get it to swap the image when you click on the left option.
-------------------- Message me for Mushroom Tinctures Lion's Mane, Reishi, Turkey Tail, Chaga, Shiitake / Extracts / CBD Isolate, Oil ---- My Art, Design, Sculpture & Music: http://www.conceptflow.org
|
Ythan
ᕕ( ᐛ )ᕗ



Registered: 08/08/97
Posts: 18,774
Loc: NY/MA/VT Borderlands
Last seen: 2 hours, 15 seconds
|
Re: Coders... I need a little javascript help! [Re: ilus]
#8028062 - 02/15/08 04:32 PM (15 years, 11 months ago) |
|
|
Aaah okay I think I understand. Check out test2.html, is that what you need? Uncomment the line after the alert to actually change the image once you have them uploaded and properly named for all permutations.
|
ilus
Bred in Captivity



Registered: 05/07/04
Posts: 3,152
Loc: Around the bend.
|
Re: Coders... I need a little javascript help! [Re: Ythan]
#8028082 - 02/15/08 04:36 PM (15 years, 11 months ago) |
|
|
Ohhhhhh! What a clever solution! Thank you so much!
-------------------- Message me for Mushroom Tinctures Lion's Mane, Reishi, Turkey Tail, Chaga, Shiitake / Extracts / CBD Isolate, Oil ---- My Art, Design, Sculpture & Music: http://www.conceptflow.org
|
|