9 Replies - 1598 Views - Last Post: 27 December 2010 - 05:45 AM

#1 KoolAide187   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 25-December 10

2 Radio buttons to = 1 image

Posted 25 December 2010 - 11:18 PM

Hey guys. I am new here. I know the top says do your homework first but I am new to javascript and I am not sure if my idea will even work in java script but here we go.

My Dad has a web page and I am trying to help him out with it. He builds duck calls and I am trying to make a build your own call section for him. I am wanting every color combination possible for this page to be set up and I would like to do it with radio buttons and the color name next to it. His calls come in 2 parts. The first is the barrel and the second part is the insert. I am wanting people to be able to be able to click 2 separate colors to show a different image for each selection they choose. So I.E. Black + Orange = BlackOrange.jpg and it will show a picture of a black barrel and orange insert of the call.

The lay out is pretty simple. I am wanting the picture on top and 2 columns to be listed with radio buttons going down each column and by each radio button i am wanting the colors.
For example.


------------[Image]
Barrels -------------- Inserts
=================================
o Black --------------- o Black
o White --------------- o White
o Orange--------------- o Orange

The page didn't show up like I wanted it took out the spacing so I inserted -'s to show off the actual look
And so on and so forth.
I can read java script and edit it decently. I am not a complete newbie when it comes to coding but I can't figure out how to write it to get the output I want.
I have found several different pages that offer 1 radio button for each picture but I am wanting to see if I can get it setup the same way as I have it laid out if it is even possible.
Any help would be appreciated and if you can't help if somebody could find me a link to something that could point me in the right direction that would be appreciated as well.

I know I can go the easy route and just do 1 image for 1 radio button and have it setup like:

[Image]
Barrels/Inserts
================
oBlack/Black
oBlack/White

But that just doesn't look as professional and to be honest I have been trying to get the way I want it done for a while now and have had no success. It is more of a personal challenge for me to find out how to get it done the way I want.

I am thinking it should be something like: if column A1 + column B3 = true go to imageA1B3.jpg(which would be a black barrel with a orange insert) or something along that lines but I can't get it to work any way I try. :(

Anyways sorry for the long post and like I said any help would be appreciated. Thanks!

This post has been edited by KoolAide187: 25 December 2010 - 11:25 PM


Is This A Good Question/Topic? 0
  • +

Replies To: 2 Radio buttons to = 1 image

#2 KoolAide187   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 25-December 10

Re: 2 Radio buttons to = 1 image

Posted 26 December 2010 - 01:14 AM

This is some rough code I have had to work with. Like I said I am new and I haven't got it to work the way I want.

<form name = "myform">
<img id = "myImage" src = "MyDefaultImage.jpg"><br><br>
Barrels:   --------    Inserts:<br>
Black <input type = "radio" name = "rad1" value = "1" onclick = "showImage()"> Black <input type = "radio" name = "rad2" value = "10" onclick = "showImage()"><br>
White <input type = "radio" name = "rad1" value = "2" onclick = "showImage()"> White <input type = "radio" name = "rad2" value = "20" onclick = "showImage()"><br>
Orange <input type = "radio" name = "rad1" value = "3" onclick = "showImage()"> Orange <input type = "radio" name = "rad2" value = "30" onclick = "showImage()"><br>
Red <input type = "radio" name = "rad1" value = "4" onclick = "showImage()"> Red <input type = "radio" name = "rad2" value = "50" onclick = "showImage()"><br>
<br>
</form>
<br>
<script type = "text/javascript">
function showImage() {
var A =0;
var B = 0;
for (var i=0; i <document.myform.rad1.length; i++) {
if (document.myform.rad1[i].checked) {
A = document.myform.rad1[i].value;
}
}
for (var i=0; i <document.myform.rad2.length; i++) {
if (document.myform.rad2[i].checked) {
B = document.myform.rad2[i].value;
}
}
var x = A*B;
if (x>0) {
var suffix = x + ".jpg"
document.getElementById("myImage").src = "myImage" + suffix;
}
}
</script>
</body>
</html>


I do plan on adding tables so it doesn't look this bad but this is like I said a rough draft of how I kind of want it to look.
Was This Post Helpful? 0
  • +
  • -

#3 moopet   User is offline

  • binary decision maker
  • member icon

Reputation: 343
  • View blog
  • Posts: 1,189
  • Joined: 02-April 09

Re: 2 Radio buttons to = 1 image

Posted 26 December 2010 - 03:22 AM

What you're trying to do is make a unique filename based on two numbers. Possibly the simplest thing you could do is
    document.getElementById("myImage").src = A + "_" + B + suffix;



Which will look for a picture called 2_50.jpg if you chose White and Red, for example. Making a string like that is going to be a lot easier than trying to multiply the numbers together and figure it out that way. In fact. if you change the values of your inputs to strings, like so:
Black <input type = "radio" name = "rad1" value = "black" onclick = "showImage()">


Then the above could take you to a file called black_red.jpg which would make things easy to manage.
Looking at your code I don't immediately see anything wrong with it. You are doing a lot of things the hard way, but that's all part of the learning process.
I highly recommend using a framework like jQuery for this sort of thing. If you did, you could replace that entire code with something like this:
$('input[type=radio]').click(function(){
    $('#myImage').src = $('input[name=rad1]').val() + '_' + $('input[name=rad2]') + '.jpg';
});


If you don't feel comfortable with a change like that, that's fine :)

What errors are you actually seeing? Like I said, the code looks like it should work to me. I might be missing something obvious but unless you tell me what it's doing that you didn't expect, or what it's not doing that you did expect, I'm a little stuck.

This post has been edited by moopet: 26 December 2010 - 03:23 AM

Was This Post Helpful? 1
  • +
  • -

#4 KoolAide187   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 25-December 10

Re: 2 Radio buttons to = 1 image

Posted 26 December 2010 - 03:33 AM

Hey thanks for the help. I like your color idea better with the _ that will make it 10 times easier to manage. I honestly just found this code tonight. I am at work so I haven't had time to test it out. I didn't think it would do exactly what I wanted but like I said before I am not great at java script it just looked like great code for me to use and start with. I really do like your idea though. If I run into any problems once I get home I'll let you know but like I said I can't do much with it at work right now.
Was This Post Helpful? 0
  • +
  • -

#5 KoolAide187   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 25-December 10

Re: 2 Radio buttons to = 1 image

Posted 26 December 2010 - 07:07 AM

View Postmoopet, on 26 December 2010 - 02:22 AM, said:

What you're trying to do is make a unique filename based on two numbers. Possibly the simplest thing you could do is
    document.getElementById("myImage").src = A + "_" + B + suffix;



Ok I tried adding pictures to the folder such as black_black.jpg and black_white.jpg and such all the way for all possible combinations. Now my problem is. It's not switching every time I click the coordinating radio buttons. It's just staying on the default image. Can you help me fix that?
I added in your
    document.getElementById("myImage").src = A + "_" + B + suffix;


in place of my
document.getElementById("myImage").src = "myImage" + suffix;


and it's not working the way I was wanting it to. help plz! :D

This post has been edited by Dormilich: 26 December 2010 - 08:09 AM

Was This Post Helpful? 0
  • +
  • -

#6 moopet   User is offline

  • binary decision maker
  • member icon

Reputation: 343
  • View blog
  • Posts: 1,189
  • Joined: 02-April 09

Re: 2 Radio buttons to = 1 image

Posted 26 December 2010 - 07:48 AM

What's suffix? Is it still something to do with A and B multiplied together? If you're assembling the filename like I suggested, it should only be ".jpg" (provided the pictures have that extension of course). The only thing I can think might be wrong is that you're still filling that with old data.
Try some debugging:
var newFile = A + "_" + B + suffix;
document.getElementById("myImage").src = newFile;
alert(newFile);



Making the page pop up a box with the variable you're trying to check is the simplest form of debugging you can do in javascript. If the result comes out like "black_white.jpg" then perhaps a file is missing. If it comes out like "black_210.jpg" or "2020.jpg" or "black_white.jpg.jpg" or something then you can instantly see that something is wrong and work your way back through the code to figure out what went wrong.
Was This Post Helpful? 0
  • +
  • -

#7 KoolAide187   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 25-December 10

Re: 2 Radio buttons to = 1 image

Posted 26 December 2010 - 08:24 PM

Hey I am still having a lot of trouble getting this to work. I made it just a little easier to understand by naming things and I also just made suffix into picture instead but I can't seem to find what is going wrong with it. The only thing I can find is that JSLint is telling me my function showImage() is used before it was defined. I don't know how I am doing that. Is there a way to fix that problem?
A copy of my new code is:
<html>
<body>
<form name = "myform">
<img id = "myImage" src = "MyDefaultImage.jpg">
<br><br>  
Barrels:   --------    Inserts:<br>  
Black <input type = "radio" name = "col1" value = "black" onclick = "showImage();">   Black <input type = "radio" name = "col2" value = "black" onclick = "showImage();"><br>  
White <input type = "radio" name = "col1" value = "white" onclick = "showImage();">   White <input type = "radio" name = "col2" value = "white" onclick = "showImage();"><br>  
Orange <input type = "radio" name = "col1" value = "orange" onclick = "showImage();"> Orange <input type = "radio" name = "col2" value = "orange" onclick = "showImage();"><br>
Red <input type = "radio" name = "col1" value = "red" onclick = "showImage();">       Red <input type = "radio" name = "col2" value = "red" onclick = "showImage();"><br>
<br>  
</form>  
<br>  
<script type = "text/javascript">  
function showImage() {  
var A = 0;  
var B = 0;  
for (var i=0; i <document.myform.col1.length; i++) {  
if (document.myform.col1[i].checked) {  
A = document.myform.col1[i].value;  
}  
}  
for (var u=0; u <document.myform.col2.length; u++) {  
if (document.myform.col2[u].checked) {  
B = document.myform.col2[u].value;  
}  
}  
var x = A + B;  
if (x>0) {  
var picture = x + ".jpg";
document.getElementById("myImage").src = picture;  
}  
}  
</script>  
</body>  
</html>


Was This Post Helpful? 0
  • +
  • -

#8 KoolAide187   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 25-December 10

Re: 2 Radio buttons to = 1 image

Posted 26 December 2010 - 10:32 PM

In a nut shell what I am wanting is this code to pull up a picture such as black_white.jpg if I was to select black and white on the radio buttons. Right now this script isn't doing anything I want except listing the radio buttons and pulling up the default image. Everytime I click in the black and white radio buttons the default image stays up there when it should be switching to the picture black_white.jpg

I feel like I am so close to getting this script working the way I want and I just don't know enough to fix it. :( Any more help would be appreciated!
Was This Post Helpful? 0
  • +
  • -

#9 moopet   User is offline

  • binary decision maker
  • member icon

Reputation: 343
  • View blog
  • Posts: 1,189
  • Joined: 02-April 09

Re: 2 Radio buttons to = 1 image

Posted 27 December 2010 - 05:21 AM

Now picture = A + B. + in this case is sctring concatenation, so if A is "black" and B is "white", then x will be "blackwhite"
Then you're checking to see if "blackwhite" is greater than zero. That's meaningless really in terms of your logic.
picture = A + "_" + B + ".jpg";


is all you need - you're overcomplicating things.
If you put in the alert line like I suggested then you could see what the values of your variables are as you go along.
Was This Post Helpful? 0
  • +
  • -

#10 KoolAide187   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 25-December 10

Re: 2 Radio buttons to = 1 image

Posted 27 December 2010 - 05:45 AM

Thanks for all your help. I actually figured out what I needed to do last night. It was such a tiny problem too. if (x>0) { I needed to take out >0 from the () so that fixed everything after that. :D Cheers mate!
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1