using Onchange() in PHP

[myth3_16]

Hi All, i'm new to this board. I'm having a spot of bother with the following: Here is what i'm trying to do.

From the drop down list (generated from my database) a style is selected and the image is displayed in the preview box next to it.

The problem I am having is that the onchange event that i'm using is not working. is there any way of doing this without using javascript? or is there a way of doing it with both javascript and PHP together? I know the Javascript is client side and PHP is server side. I've been trying this for ages now without success. Any help would be apprciated.

here is the code:

From the Head Section of the page:

<script language="javascript" src="cgi-bin/go.js" type="text/javascript"></script>
<script language="javascript" src="cgi-bin/showimage.js" type="text/javascript"></script>
<script language="javascript" src="cgi-bin/Paypal.js" type="text/javascript"></script>
<script language="javascript" src="cgi-bin/checkboxclick.js" type="text/javascript"></script>

(showimage.js):

function showimage()
{
if (!document.images)
return
document.images.pictures.src=
document.forms.os0.options[document.mygallery.os0.selectedIndex].value2
}

My PHP code:

<?
$username="***********";
$password="***********";
$database="********";

mysql_connect("**********",$username,$password);
@mysql_select_db($database) or die( "Unable to select database");
$query="SELECT style_name,img_url FROM product WHERE product_name = 'Day You Were Born' order by style_name";

/* You can add order by clause to the sql statement if the names are to be displayed in alphabetical order */

$result = mysql_query ($query);
print "<select name=\"os0\" onchange=\"showimage()\">";
// printing the list box select command

while($nt=mysql_fetch_array($result)){//Array or records stored in $nt
print "<option value=\"$nt[style_name]\" value2=\"$nt[img_url]\">$nt[style_name]</option>";
/* Option values are added by looping through the array */
}
print "</select>";// Closing of list box
?>

the full page can be seen here: http://www.personally-yours.co.uk/development/onthisdaydev.php

any help would be appreciated. Cheers!!!!!!

[johnsquibb]

when I use the select menu on your live page, I get a javascript error that says 'previewProduct is undefined' (look at the little exclamation alert on the bottom left of your browser and double click it to view details).

instead of your output saying this:

<select name=\"os0\" onchange=\"showimage()\">";

your output actually says this when you view the source code:
<select name="os0" onchange="previewproduct.php">

I'm not exactly sure why, so check your php code to make sure you are printing the correct line. The only thing I can think off of the top of my head is that you might have a function called showimage() in your PHP file that returns the value previewproduct.php???

[myth3_16]

yeah sorry about that, a minor change that I made myself and forgot to change back, please try again and see what it says.
It is saying

documents.forms.os0.options is null or not an object

any help appreciated.

[nav33n]

function showimage()
{
if (!document.images)
return
document.images.pictures.src=
document.forms.os0.options[document.mygallery.os0.selectedIndex].value2
}

.value2 ?

[myth3_16]

function showimage()
{
if (!document.images)
return
document.images.pictures.src=
document.forms.os0.options[document.mygallery.os0.selectedIndex].value2
}

.value2 ?

Yes, I had to add a value2 to to hold the url of the img to be shown when the value is selected.

If you want to see it in action, goto www.personally-yours.co.uk/onthisday.html.

I am migrating from HTML to PHP and trying to get this working, but with no success. If you see the source code for when the page in post #1 is actually loaded.

The problem i'm getting at the moment is when a value is selected from the drop down box I am getting the message 'documents.forms.os0.options is null or not an object'.

Cheers

[nav33n]

But it should be var x = document.form.element.value and not var x=document.form.element.value2 I dont think you can have <option value="something" value2="something">something </option> ! Instead put contents in value2 to value and then try.

[myth3_16]

But it should be var x = document.form.element.value and not var x=document.form.element.value2 I dont think you can have <option value="something" value2="something">something </option> ! Instead put contents in value2 to value and then try.

But it works that way already in the live webpage.

I will try what you suggest but i don't think it will make any difference. The current live page is found at www.personally-yours.co.uk/onthisday.htm. This drop down is part of the input into the paypal ordering system. The paypal ordering system takes its values from the drop downs and inputs on the page.

What I'm trying to do is mimic the result on the live page using PHP and mysql but not having any success.

test page found at www.personally-yours.co.uk/development/onthisdaydev.php

cheers

[nav33n]

But it works that way already in the live webpage.

I will try what you suggest but i don't think it will make any difference. The current live page is found at www.personally-yours.co.uk/onthisday.htm. This drop down is part of the input into the paypal ordering system.

That live page cannot be found. And nowhere I have seen a select box with 2 values. (sorry for my ignorance!)

[myth3_16]

That live page cannot be found. And nowhere I have seen a select box with 2 values. (sorry for my ignorance!)

Sorry my bad, the live page is found at www.personally-yours.co.uk/dywb.htm.

It was the only way to do it because of a bug in IE7 where it wan't displaying the correct value. If I put the img url in 'value' the drop down box would just show the image url but like this I can get the drop down to show the value instead e.g. classic style 1.

It was the only way at the time that i could find that worked in both IE7 and Firefox.

So I kept it that way. As mentioned before I'm lookng for a way to click on a drop down value and for the picture (img_url) to be passed and loaded in the preview box.

Cheers, and thanks for your prompt response.

[nav33n]

hmm.. IE7 has a lot of problems, i believe.
But, wont the dropdown be populated by the value which you give within option tag ? like, <option value="someurl1.php">Classic 1</option> . I mean, wouldn't it show classic 1 in the dropdown list ?

[myth3_16]

hmm.. IE7 has a lot of problems, i believe.
But, wont the dropdown be populated by the value which you give within option tag ? like, <option value="someurl1.php">Classic 1</option> . I mean, wouldn't it show classic 1 in the dropdown list ?

No it didn't, which is why I had to add the value2. The value that is put in

<option value = "____">

is passed onto my paypal form. If I put the img_url in this field then the url of the img that needs to be displayed will be passed to paypal and it will look like i'm just selling the image file.

To get the paypal form to display a style name and still show the preview for the product, I added a value2 to hold the url of the img and pointed the javascript to look at value2 to load the product preview.

I know it is complicated and against everything you have ever seen, but there is proof that is does work.

I want to mimic what is on the live page in my under construction php page but I'm having great difficulty in doing so.

When viewing the source of the development php page everything seems fine and same as the live page but it just won't work and gives me back 'documents.forms.os0.options is null or not an object' What does this actually mean? The pull down menu is being generated dynamically from my database as you can see form the code above but the javascript that is attached to the onchange event is not working properly. Can you see why??

Cheers

[myth3_16]

I tried putting the img_url as just

<option value=\"$nt[img_url]\">$nt[style_name]</option>

but with no avail, it didnt work. Is there a way I can get this working at all?

Many Thanks

[nav33n]

I searched everywhere, but I couldn't find a select tag which could hold 2 option values. :S If you, by any chance get the answer, please post it here. I am curious. :)

But, I have an idea. Instead of passing 2 different option values, why dont you concat both the values and then pass it ? You can then separate them when the user submits the page ?
Eg.

$concat="category1:http://siteurl1.com";
echo "<select name=\"select\">";
echo "<option value=\"$concat\">something1</option>";
......
......
echo "</select>";
?>
//And when the user submits the page, 
$selectedval=$_REQUEST['select'];
list($firstvalue,$secondvalue)=explode(":",$selectedval);
//$firstvalue will have category1
//$secondvalue will have [url]http://siteurl1.com[/url].

:) This is all I could think of.