Home | Community | Message Board


This site includes paid links. Please support our sponsors.


Welcome to the Shroomery Message Board! You are experiencing a small sample of what the site has to offer. Please login or register to post messages and view our exclusive members-only content. You'll gain access to additional forums, file attachments, board customizations, encrypted private messages, and much more!

Jump to first unread post Pages: 1
Invisibleilus
Bred in Captivity
Male User Gallery


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


Extras: Filter Print Post Top
OfflineYthanA
ᕕ( ᐛ )ᕗ
Male User Gallery


Registered: 08/08/97
Posts: 18,774
Loc: NY/MA/VT Borderlands Flag
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>



Extras: Filter Print Post Top
Invisibleilus
Bred in Captivity
Male User Gallery


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


Extras: Filter Print Post Top
OfflineYthanA
ᕕ( ᐛ )ᕗ
Male User Gallery


Registered: 08/08/97
Posts: 18,774
Loc: NY/MA/VT Borderlands Flag
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.


Extras: Filter Print Post Top
Invisibleilus
Bred in Captivity
Male User Gallery


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


Extras: Filter Print Post Top
Jump to top Pages: 1


Similar ThreadsPosterViewsRepliesLast post
* How do I clear the list shows in my documents from Start menu Stein 868 8 03/12/07 10:33 AM
by Taharka
* my simple programming questions thread (javascript + html) stefan 716 3 04/28/08 04:43 PM
by stefan
* How many coders we got here?
( 1 2 all )
citricacidx 1,688 31 12/08/10 05:29 AM
by Buben
* Javascript help MHbound 7,289 6 10/21/09 06:22 PM
by dkamp18
* JavaScript for the web brokentv 374 2 04/03/13 02:28 AM
by insectvhore
* Javascript help realcarlos 234 1 08/02/13 01:40 PM
by realcarlos
* Javascript Help MHbound 374 2 08/28/09 04:32 PM
by MHbound
* Javascript compatibility help daytripper05 376 1 12/21/08 12:06 PM
by Ythan

Extra information
You cannot start new topics / You cannot reply to topics
HTML is disabled / BBCode is enabled
Moderator: trendal, automan, Northerner
588 topic views. 0 members, 1 guests and 1 web crawlers are browsing this forum.
[ Show Images Only | Sort by Score | Print Topic ]
Search this thread:

Copyright 1997-2024 Mind Media. Some rights reserved.

Generated in 0.051 seconds spending 0.03 seconds on 14 queries.