Forms and Variables

MastahUK

I am trying to make it so that an image changes depending on the value of a drop down list. I made sure that I named the list "skin", so I then assumed that I could use the variable '$skin' for the rest of the page. This does not seem to work though. I want to use it as a variable before the submit button is clicked, because the image is a preview of the skin they will be selecting.

Once the user has selected a skin, I want for the submit button to send the value of the $skin variable back to the main page to load the skin. I can get this to work fine when the form is in main page (where the skin gets loaded), but I would like this 'Skin Selector' to open in a new window and send the info back to the original window. How can I do this?

Here is my script so far, sorry if it is rubbish but I am fairly new to this:

<html>
<head>
<title>
Skin Selector
</title>
</head>
<body>
<table width=500 height=400 border=0 cellpadding=0 cellspacing=0>
<tr>
	<td height=30 width=500>
	<form action="" method="POST">
	Skin: 
	<select name="skin" class=box id="skin">
	<option value="1">Skin 1</option>
	<option value="2">Skin 2</option>
	<option value="3">Skin 3</option>
	<option value="4">Skin 4</option>
	</select>
</tr>
<tr>
	<td height=5>
</tr>
<tr>
	<td height=290 width=500 align=center valign=center><img src="screen<? echo $skin; ?>">
</tr>
<tr>
	<td height=5>
</tr>
<tr>
	<td height=170 width=500>
	<? 
	if ($skin="1")
	{
		$text="This is skin 1.  It is a nice blue skin";
	}
	if ($skin="2")
	{
		$text="This is skin 2.  It is bright and red";
	}
	if ($skin="3")
	{
		$text="This is skin 3.  It is orange and red in a grunge style";
	}
	if ($skin="4")
	{
		$text="This is skin 4.  It is grungy in black and white";
	}
	echo $text;
	?>



<input name="Submit" type="submit" class=box id="Submit" value="Submit">
</form>
</tr>
</table>
</body>
</html>

Thanks for any help!

zingbats

<form action="" method="POST">

???

MastahUK

Erm....yeah, I could use some help with what to put in the form tag too :p . So........😕

BuzzLY

Couple of things you need to change.

First, if you are going to be using PHP to access the value of a select, you need to name the select with square brackets.

Next, you need to use Javascript to change the image. Therefore, set a default option, and make the image load that default image. The Javascript goes at the top of your form, in the <head> section.

You didn't close any of your <td> tags. This is bad design practice. ALWAYS close your tags.

Plus, your <form> tag isn't placed in the best position.

I took out the text part. You could modify it in the same way... look up the InnerHTML object in Javascript.

The thing you need to remember is that PHP is a server side scripting language. It runs all the code, outputs the results as HTML, and sends the results to the user's browser. If you want to use PHP code after that, you need to reload the page, or load another PHP page.

Here is what your code should look like:

<html> 
<head> 
<title> Skin Selector </title>
<script style="text/javascript">
<!--
function changeImage(imgNum) {
  imgURL = "screen" + imgNum + ".jpg";
  window.document.myForm.skinImg.src = imgURL;
}
//-->
</script>
</head> 
<body> 
<form action="<?php echo $_SERVER['PHP_SELF'] ?>" method="POST" name="myForm"> 
<table width=500 height=400 border=0 cellpadding=0 cellspacing=0> 
<tr> 
    <td height=30 width=500> 
    Skin: 
    <select name="skin[]" class=box id="skin" onchange="changeImage(this.value);">
    <option value="1" selected>Skin 1</option> 
    <option value="2">Skin 2</option> 
    <option value="3">Skin 3</option> 
    <option value="4">Skin 4</option> 
    </select>
    </td>
</tr> 
<tr> 
    <td height=5></td>
</tr> 
<tr> 
    <td height=290 width=500 align=center valign=center>
        <img src="screen1.jpg" id="skinImg">
    </td>
</tr> 
<tr> 
    <td height=5></td>
</tr> 
<tr> 
    <td>
        <input name="Submit" type="submit" class=box id="Submit" value="Submit">
    </td>
</tr>
</table> 
</form> 
</body> 
</html>

MastahUK

Wow, thanks a lot BuzzLY, I hadn't thought of doing it like that. It still doesn't work though, the image doesn't change. Here it is, running with the script you put:

http://www.mastahuk.com/retina-fx/skinselector1.php

As PHP won't run while the page is open and only as it loads, would it be possible to make this work by using meta tags to reload the page, showing the new values of the variables?

MastahUK

If it is easier, I wouldn't mind having it so that the submit button just changes the image and text in the new window (the skin selector), so that the preview then works. Then I would have to have a seperate link that can send the variable back to the main page somehow though. Any ideas?

BuzzLY

I apologize, I had inadvertently left 'window.document.myForm.skinTxt.InnerHTML = "' in there... take that line out and it should be ok.

BuzzLY

If you really wanted to do it that way (and I recommend using Javascript), you could just have the form post to itself. Once you do, your variables will be available in the page.

I strongly recommend you use the Javascript method. Here it is on my site.

I corrected the code above.

MastahUK

Thanks again for your help, I got it to work fine on my site too 😃 .

The only thing left is the submit button. At the moment, all it does is reset the form so that 'Skin 1' is selected and the main page is unaffected. Here is the main page, and I have quickly placed a link on the left to open up the skin selector in a new window:

http://www.mastahuk.com/retina-fx/index.php?page=home&skin=1

All that I would like to happen is to make the "&skin=1" part at the end change to show the number of the skin that has been chosen. I could easily do this by opening it up in a new window, but I would like people to be able to change the skin from any point on the site and stay on the same page they are on - just with a different appearance. How can I get this to work? I wouldn't know where to start....

BuzzLY

I would set a cookie with the number of the skin the user has chosen. Then refresh the page. The page always looks for the cookie, and if it can't find it, defaults to "1."

MastahUK

Dumbass here - you will have to explain a little bit more 😉 .

Would using a cookie mean that there is no need for the "&skin=1" bit at the end of the urls, so it could just store that variable of whatever the user selects for use throughout the site? If so, that would be great! Just one problem - I have no idea how to do that.

BuzzLY

To set cookies in Javascript, use the document.cookies object. Go here to learn more. Make sure you read the entire lesson to fully understand.

Handling cookies with PHP is a little easier. You use $_COOKIES[] to retrieve it, and setcookie() to set it.

So, how do you decide which to use? Well, since you are changing the image dynamically using Javascript, use Javascript to set the cookie. Then reload the page, and use PHP to retrieve the cookie and load the right scheme.

Good Luck!

MastahUK

Thanks again, I'll try to find out about these things and see how I get on. I can't promise I won't be back here asking about it soon enough though :p