Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > PHP/MySQL > PHP How-To
Password Reminder
Register
Register | FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
PHP How-To Post your "How do I do this with PHP?" questions here.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the PHP How-To section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Display Modes
  #1 (permalink)  
Old November 25th, 2003, 08:52 PM
Authorized User
 
Join Date: Oct 2003
Location: kl, wp, Malaysia.
Posts: 10
Thanks: 0
Thanked 0 Times in 0 Posts
Default Display images according to radio button chosen

the first radio button is the default button. so the image is free88.gif. When the user clicked the second radio button, image named wobutton.gif will be displayed instead. When the user clicked the third radio button, image named but.gif will be displayed instead.

However my code below only display the radio button and no image is displayed.Could someone please correct my code?

<HTML>
<HEAD></HEAD>
<BODY>

<input type="radio" name="radio1" value="one" checked="on">one
<input type="radio" name="radio1" value="two">two
<input type="radio" name="radio1" value="three">three

<SCRIPT language="JavaScript">

if(document.form.radio1.value == "one")
<img src="free88.gif">

if(document.form.radio1.value == "two")
<img src="wobutton.gif">

if(document.form.radio1.value == "three")
<img src="but3.gif">

</SCRIPT>

</BODY>
</HTML>

Reply With Quote
  #2 (permalink)  
Old November 25th, 2003, 09:15 PM
richard.york's Avatar
Wrox Author
Points: 5,506, Level: 31
Points: 5,506, Level: 31 Points: 5,506, Level: 31 Points: 5,506, Level: 31
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Camby, IN, USA.
Posts: 1,706
Thanks: 0
Thanked 5 Times in 5 Posts
Default

This is actually a question better suited for the JavaScript forums!

That being said something like the following would probably do it.

<script language='JavaScript' type='text/javascript'>

if(document.form.radio1.value == "one")
     imagedest.innerHTML = "<img src='free88.gif'>";

if(document.form.radio1.value == "two")
     imagedest.innerHTML = "<img src='wobutton.gif'>";

if(document.form.radio1.value == "three")
     imagedest.innerHTML = "<img src='but3.gif'>";

</script>

<div id='imagedest'>
</div>

:::::::::::::::::::::::::::::::::
Smiling Souls
http://www.smilingsouls.net
:::::::::::::::::::::::::::::::::
Reply With Quote
  #3 (permalink)  
Old November 25th, 2003, 09:53 PM
richard.york's Avatar
Wrox Author
Points: 5,506, Level: 31
Points: 5,506, Level: 31 Points: 5,506, Level: 31 Points: 5,506, Level: 31
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Camby, IN, USA.
Posts: 1,706
Thanks: 0
Thanked 5 Times in 5 Posts
Default

Actually the code I supplied doesn't work.

After I posted that I realized that you needed an event handler for the script to trigger and replace the image.  And I was in the middle of researching what to use instead.. but I'm in a bit of a hurry and need to head on out so I'll give you what I have.

Your JavaScript should look something like this refilling in your images in place of the ones I used in my test script.  Now all you need is to find the right event handler to call on the function..   if you can't find it or someone else on this forum doesn't pipe up and provide you with one ask your question on the JS forum.  I tried onclick and onchange and onblur none of which fired this function.

You also need to put form tags around your input elements and giving your form a name would be good idea!

Code:
<script language='JavaScript' type='text/javascript'>

    function check_value()
    {
        switch(document.test.field.value)
        {
            case "one":
             
                document.getElementById("imagedest").innerHTML = "<img src='images/blue_background.jpg'>";
                break;

            case "two":

                document.getElementById("imagedest").innerHTML = "<img src='images/red_background.jpg'>"; 
                break;

            case "three":

                document.getElementById("imagedest").innerHTML = "<img src='images/black_background.jpg'>"; 
                break;
        }
    }

</script>


<form name='test'>
    <input type="radio" name="field" value="one" onchange='check_value()'>one 
    <input type="radio" name="field" value="two" onchange='check_value()'>two 
    <input type="radio" name="field" value="three" onchange='check_value()'>three 
</form>

<div id='imagedest'>
</div>
Good luck!
: )
Rich

:::::::::::::::::::::::::::::::::
Smiling Souls
http://www.smilingsouls.net
:::::::::::::::::::::::::::::::::
Reply With Quote
  #4 (permalink)  
Old November 26th, 2003, 01:03 AM
richard.york's Avatar
Wrox Author
Points: 5,506, Level: 31
Points: 5,506, Level: 31 Points: 5,506, Level: 31 Points: 5,506, Level: 31
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Camby, IN, USA.
Posts: 1,706
Thanks: 0
Thanked 5 Times in 5 Posts
Default

Here is my third installment, and finally a working script!
Not quite as dynamic as I would have liked, but hey it works.

Code:
<script language='JavaScript' type='text/javascript'>

    function check_value(fieldvalue)
    {    
        switch(fieldvalue)
        {
            case 1:

                document.getElementById("imagedest").innerHTML = "<img src='images/blue_background.jpg'>";
                    break;

            case 2:

                document.getElementById("imagedest").innerHTML = "<img src='images/red_background.jpg'>"; 
                    break;

            case 3:

                document.getElementById("imagedest").innerHTML = "<img src='images/black_background.jpg'>"; 
                    break;
        }
    }

</script>

<form name='test'>
    <input type="radio" name="field" value="one" onclick='check_value(1)'>one 
    <input type="radio" name="field" value="two" onclick='check_value(2)'>two 
    <input type="radio" name="field" value="three" onclick='check_value(3)'>three 
</form>

<div id='imagedest'>
</div>
: )
Rich

:::::::::::::::::::::::::::::::::
Smiling Souls
http://www.smilingsouls.net
:::::::::::::::::::::::::::::::::
Reply With Quote
  #5 (permalink)  
Old November 26th, 2003, 12:50 PM
Friend of Wrox
Points: 2,570, Level: 21
Points: 2,570, Level: 21 Points: 2,570, Level: 21 Points: 2,570, Level: 21
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: San Diego, CA, USA
Posts: 836
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Well, since you're dealing with JavaScript and it's DOM model of organizing and manipulating HTML elements and attributes.... Why use InnerHTML at all???

Each HTML element is represented as an object in javascript, and each attribute of that element is a property (member variable) of that object.

Instead of saying:
   some_image.innerHTML = "<img src='...'>";

You should say:
   some_image.src = '...';


That's how JavaScript is supposed to work. Also, it makes for a better browsing experience if you preload the images you're going to use, that way, the images are swapped more quickly, without making an additional request to the webserver each time you change the image.



<script language="JavaScript">

function changeImage(newImage)
{
    if document['image_name'].src = eval(newImage + ".src");
}

button1 = new Image();
button1.src = "free88.gif";

button2 = new Image();
button2.src = "wobutton.gif";

button3 = new Image();
button3.src = "but3.gif";

-->
</script>

<img name="image_name" src="free88.gif" />

<input type="radio" name="my_radio" value="one" onClick="changeImage('button1');">one</input>
<input type="radio" name="my_radio" value="two" onClick="changeImage('button2');">two</input>
<input type="radio" name="my_radio" value="three" onClick="changeImage('button3');">three</input>



See what's going on? The button onClick events calls the changeImage function with a string parameter. This string is either "button1", "button2", or "button3".

The changeImage function takes this string and appends a ".src" to it, so now our string values are "button1.src", "button2.src", or "button3.src". This string is passed to the eval() function, which evaluates the string as javascript.

If you remember, we created variables named button1, button2, and button3 of the Image object type and set their src property (read: member variable) to the appropriate image sources. The next thing changeImage does is assign the value of the appropriate buttonX image src to the src property of your named image tag (<image name="image_name"...>).


Important note: This works because the image tag is given a NAME attribute, which allows JavaScript to easily look up that element in the document array. If you change the name of the image, remember to make sure that your "changeImage" function changes the src property of the correct image -- that is, make sure your names match.


You can make the changeImage function a little more generic by passing this image name to the function as a second parameter. That way, you can use any number of radio buttons to change any number of images -- you just have PHP generate the correct javascript and HTML code:

<script language="JavaScript">

function changeImage(newImage, imageName)
{
    if document[imageName].src = eval(newImage + ".src");
}

// here, you have PHP generate all the appropriate image pre-loading code
button1_a = new Image();
button1_a.src = "free88.gif";

button1_b = new Image();
button1_b.src = "wobutton.gif";

button1_c = new Image();
button1_c.src = "but3.gif";

button2_a = new Image();
button2_a.src = "some_image.jpg";

button2_b = new Image();
button2_b.src = "some_other_image.png";

-->
</script>

<image name="image1" src="free88.gif" />

<input type="radio" name="my_radio" value="one" onClick="changeImage('button1_a', 'image1');">one</input>
<input type="radio" name="my_radio" value="two" onClick="changeImage('button1_b', 'image1');">two</input>
<input type="radio" name="my_radio" value="three" onClick="changeImage('button1_c', 'image1');">three</input>

<image name="image2" src="some_other_image.png" />
<input type="radio" name="radio_b" value="one" onClick="changeImage('button2_a', 'image2');">one</input>
<input type="radio" name="radio_b" value="two" onClick="changeImage('button2_b', 'image2');">two</input>



I hope this makes sense.

Also, keep in mind that I typed all this code directly into this forum quick-reply box, so I haven't tested it or verified that it's completely bug- and typo-free.


Take care,

Nik
http://www.bigaction.org/
Reply With Quote
  #6 (permalink)  
Old November 26th, 2003, 04:12 PM
richard.york's Avatar
Wrox Author
Points: 5,506, Level: 31
Points: 5,506, Level: 31 Points: 5,506, Level: 31 Points: 5,506, Level: 31
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Camby, IN, USA.
Posts: 1,706
Thanks: 0
Thanked 5 Times in 5 Posts
Default

Yeah that makes a lot more sense then my approach. I just happened to be fooling around with the innerHTML property when I saw this thread come up.

The really nice part about Nik's approach is preloading each image.. no waiting for the server to fetch them! And he's using XHTML compliant mark-up! (Which I should have been doing!)

Here's a nifty FAQ that I wrote that explains why XHTML standards compliance is a good thing to get in the habit of doing and includes links to the references on the w3c website.
http://p2p.wrox.com/topic.asp?TOPIC_ID=4028

Thanks Nik!

: )
Rich



:::::::::::::::::::::::::::::::::
Smiling Souls
http://www.smilingsouls.net
:::::::::::::::::::::::::::::::::
Reply With Quote
  #7 (permalink)  
Old November 26th, 2003, 04:35 PM
Friend of Wrox
Points: 2,570, Level: 21
Points: 2,570, Level: 21 Points: 2,570, Level: 21 Points: 2,570, Level: 21
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: San Diego, CA, USA
Posts: 836
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Keep in mind that you can mix the two approaches -- your function works just fine; just replace "innerHTML = '<...>'" with "src = '...'".

Also keep in mind that, this being JavaScript, you don't have any control over the client-side environment; you should (as with all javascript) write some code to distinguish nuances between browsers, and their versions, to make sure that the client browser rendering the page is capable of processing the javascript.

There are many examples of this type of JavaScript code on the web -- pretty much ANY corporate website with changing images (on mouse rollover or click, whatever) should have this stuff in their JS code.

Here's a short example:


<script language="JavaScript">
<!--

// Figure out which version of JavaScript the browser supports.

var js = 1.0; // base-case is JS version 1.0 (can't do image changing)

Version = parseInt(navigator.appVersion);

if (navigator.appName == "Netscape")
{
    // The ternary operator works in JavaScript, too! Can you follow this?:
    js = ((Version >= 4) ? 1.2 : ( (Version == 3) ? 1.1 : 1.0 ));
}
else
{
    if (navigator.appVersion.indexOf('MSIE') != -1)
    {
        js = ((Version >= 4) ? 1.1 : 1.0);
    }
}

function changeImage(...)
{
    if (js > 1.0)
    {
        // do the change here
    }
}

// -->
</script>


Basically, this code says:

If we're using Netscape Navigator,
  and the browser version is at LEAST 4, then Javascript version 1.2 is supported,
  otherwise,
     if the browser version is 3, then JS v1.1 is supported,
     otherwise it's JS 1.0.
If, on the other hand, we're NOT using Navigator,
  and the browser is Microsoft IE (determined to be if the browser name contains "MSIE")
     and the browser version is at least 4, then we're using JS 1.1
     otherwise, we're using 1.0.

I don't know how well (or poorly) this works for new browsers that fully support JS 1.1 or later, like Opera, Mozilla, or Mozilla Firebird.



Take care,

Nik
http://www.bigaction.org/
Reply With Quote
  #8 (permalink)  
Old November 27th, 2003, 09:57 PM
Authorized User
 
Join Date: Oct 2003
Location: kl, wp, Malaysia.
Posts: 10
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Thanks for help but the code doesn't work but i think i can fix it.It did has the image free88.gif but nothing happen when i clicked the radio button.
Sorry because i should have ask this question in the javascript forum. Anyway thanks for quesadilla5 and nikolai's help.

Reply With Quote
  #9 (permalink)  
Old December 1st, 2003, 11:56 AM
Friend of Wrox
Points: 2,570, Level: 21
Points: 2,570, Level: 21 Points: 2,570, Level: 21 Points: 2,570, Level: 21
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: San Diego, CA, USA
Posts: 836
Thanks: 0
Thanked 0 Times in 0 Posts
Default

That's weird... it worked for me. What javascript errors are you getting?

Take care,

Nik
http://www.bigaction.org/
Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off

Similar Threads
Thread Thread Starter Forum Replies Last Post
Display based on radio button selection Mekala Javascript 4 August 5th, 2004 11:36 PM
Page display based on radio button selected Mekala HTML Code Clinic 3 July 10th, 2004 06:12 AM
Button acts depending on radio button values janise Access 4 March 9th, 2004 11:53 PM
Display text onmouseover of radio button(ALT?) savoym HTML Code Clinic 1 September 16th, 2003 11:27 AM



All times are GMT -4. The time now is 04:20 PM.


Powered by vBulletin® Version 3.7.0
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.