Need help displaying an image on a drop down list selection

View New Content

Page 1 of 1

You cannot start a new topic
You cannot reply to this topic

Need help displaying an image on a drop down list selection Rate Topic:

#1 dan...

Forum Newcomer

Group: Members
Posts: 54
Joined: 28-January 10
Reputation: 0

Posted 15 March 2010 - 02:11 AM

Can someone please help me, does anyone know how i can get an image to show depending on the selection. Can this be done in php? i know it can if it where a normal html drop down list i.e. <option value='1'>selection 1</option> as i could use the value but with the php, i don't have that

Thanks in advanced.

the <option>$frame</option> has 5 options in the sql database, i would an image to show for each selection so that when you click on it, the user has something visual to confirm what they are about to buy etc.
Please find the code below

<html><head></head><body>
<form method="get" action="test8.php">
<select name="frame">
<?php

error_reporting (0) ;

$connect = mysql_connect ("*****","*******","******") or die(mysql_error());
mysql_select_db("********") or die (mysql_error());

echo "connected<p>";

//extract data
$extract = mysql_query("SELECT * from frame ORDER BY id ASC");
$numrows = mysql_num_rows ("$extract");
echo "<option>Please Select</option>";
while ($row = mysql_fetch_assoc ($extract))
{
$id = $row['id'];
$frame = $row['frame'];
echo "
<option>$frame</option>";
}
?>
</select>
<input type="submit" value="next page" />
</form>
</body></html>

#2 Geeks

Advanced Member

Group: Members
Posts: 321
Joined: 07-October 09
Reputation: 11
Gender:Male
Location:South Africa
Experience:Intermediate
Area of Expertise:Designer/Coder

Posted 15 March 2010 - 07:55 AM

the fastest would be to use Javascript

first use php to populate the list.

$query= mysql_query("SELECT * from frame ORDER BY id ASC"); //set SQL query
echo "<option value='null'>Please Select ...</option>"; //echo first option set it's value to null
$framedata = mysql_query($query) or die('Query failed: ' . mysql_error()); //fetch all the data
	unset($query); //save resources by killing unused variables
	if (!$framedata ) //some simple error checking
	{ 
 	//communicate with user if there is an error
 	echo "sorry there was an error if you think we should know about this please let us know at <a href='mailto:email@server.com'>email@server.com</a>"; 
 	exit; //stop processing if there is an error
	}
	else
	{
 	while($row = mysql_fetch_row($framedata ))
 	{ 
 	echo "<option value=".$row['id'].">".$row['frame']."</option>"; //echo EACH option set it's value to the ID
 	}
 	unset($framedata); //save resources by killing unused variables
	}
unset $query //save resources by killing unused variables

I would use jquery ajax for displaying the image go see http://api.jquery.com/jQuery.ajax/

#3 dan...

Forum Newcomer

Group: Members
Posts: 54
Joined: 28-January 10
Reputation: 0

Posted 15 March 2010 - 09:40 AM

Geeks, on 15 March 2010 - 07:55 AM, said:

the fastest would be to use Javascript

first use php to populate the list.

I would use jquery ajax for displaying the image go see http://api.jquery.com/jQuery.ajax/

Hi geeks, you have been a fantastic help and i don't know where i would be if it wasn't for you but i think you over estimate me, i've never used ajax before and and i've looked at the link and can't make sense of it or know where to add it, i've also got the next page which again need the images to show on the selection, could you help me out one last time

<?php if(!isset($_GET['frame'])){ header( 'Location: test7.php' ) ; }?>
<html><head></head><body>
<form method="get" action="test9.php">
<input type="hidden" name="frame" value="<?php echo $_GET['frame']; ?>">
<select name="image_style">
<?php

error_reporting (0) ;

$connect = mysql_connect ("*****","******","*******") or die(mysql_error());
mysql_select_db("******") or die (mysql_error());

echo "connected<p>";

//extract data
$extract = mysql_query("SELECT * from image_style ORDER BY id ASC");
$numrows = mysql_num_rows ("$extract");
//Selection 1
echo "<option>Please Select</option>";
if($_GET['frame'] == "Acrylic")
{while ($row = mysql_fetch_assoc ($extract)){
$id = $row['id'];
$image_style = $row['image_style'];
echo "<option>$image_style</option>";}}
//Selection 2
echo "";
if($_GET['frame'] == "Block Mounted"){
while ($row = mysql_fetch_assoc ($extract)){
$id = $row['id'];
$image_style = $row['image_style'];
echo "<option>$image_style</option>";}}
//Selection 3
echo "";
if($_GET['frame'] == "Canvas"){
while ($row = mysql_fetch_assoc ($extract)){
$id = $row['id'];
$image_style = $row['image_style'];
echo "<option>$image_style</option>";}}
//Selection 4
echo "";
if($_GET['frame'] == "Clipped"){
while ($row = mysql_fetch_assoc ($extract)){
$id = $row['id'];
$image_style = $row['image_style'];
echo "<option>$image_style</option>";}}
//Selection 5
echo "";
if($_GET['frame'] == "Framed"){
while ($row = mysql_fetch_assoc ($extract)){
$id = $row['id'];
$image_style = $row['image_style'];
echo "<option>$image_style</option>";}}
?>
</select>
<input type="submit" value="next page" />
</form>
</body></html>

#4 Geeks

Advanced Member

Group: Members
Posts: 321
Joined: 07-October 09
Reputation: 11
Gender:Male
Location:South Africa
Experience:Intermediate
Area of Expertise:Designer/Coder

Posted 15 March 2010 - 10:05 AM

Lets do one step at a time, you select list won't populate properly like this.

send me a layout of you DB

eg :
[frames]
[ID][frame_name]

[image_style]
[ID][image_style]

#5 Geeks

Advanced Member

Group: Members
Posts: 321
Joined: 07-October 09
Reputation: 11
Gender:Male
Location:South Africa
Experience:Intermediate
Area of Expertise:Designer/Coder

Posted 15 March 2010 - 10:17 AM

no problem Dan I am still a relative newby to PHP so we can learn together :clapping:

by the place your code in a code tag in the forum it is easier to read

#6 dan...

Forum Newcomer

Group: Members
Posts: 54
Joined: 28-January 10
Reputation: 0

Posted 15 March 2010 - 10:29 AM

Geeks, on 15 March 2010 - 10:17 AM, said:

no problem Dan I am still a relative newby to PHP so we can learn together :clapping:

by the place your code in a code tag in the forum it is easier to read

This is my database, i've just been testing it at the moment

database : test
[frames]
[ID][frame]

[image_style]
[ID][image_style]

[edge_style]
[ID][edge_style]

page1

<html><head></head><body>
<form method="get" action="test8.php">
 <select name="frame">
        <?php


error_reporting (0) ;

$connect = mysql_connect ("********","******","******") or die(mysql_error());
mysql_select_db("test") or die (mysql_error());

echo "connected<p>";

//extract data
$extract = mysql_query("SELECT * from frame ORDER BY id ASC");
$numrows = mysql_num_rows ("$extract");
echo "<option>Please Select</option>";
while ($row = mysql_fetch_assoc ($extract))
{
	$id		= $row['id'];
	$frame	= $row['frame'];
echo "
	<option>$frame</option>";
}
?>
 </select>
 <input type="submit" value="next page" />
</form>
</body></html>

page2

<?php if(!isset($_GET['frame'])){ header( 'Location: test7.php' ) ; }?>
<html><head></head><body>
<form method="get" action="test9.php">
<input type="hidden" name="frame" value="<?php echo $_GET['frame']; ?>">
 <select name="image_style">
        <?php


error_reporting (0) ;

$connect = mysql_connect ("********","******","******") or die(mysql_error());
mysql_select_db("test") or die (mysql_error());

echo "connected<p>";

//extract data
$extract = mysql_query("SELECT * from image_style ORDER BY id ASC");
$numrows = mysql_num_rows ("$extract");
//Selection 1
echo "<option>Please Select</option>";
if($_GET['frame'] == "Acrylic")
{while ($row = mysql_fetch_assoc ($extract)){
$id		= $row['id'];
$image_style	= $row['image_style'];
echo "<option>$image_style</option>";}}
//Selection 2
echo "";
if($_GET['frame'] == "Block Mounted"){
while ($row = mysql_fetch_assoc ($extract)){
$id		= $row['id'];
$image_style	= $row['image_style'];	
echo "<option>$image_style</option>";}}
//Selection 3
echo "";
if($_GET['frame'] == "Canvas"){
while ($row = mysql_fetch_assoc ($extract)){
$id		= $row['id'];
$image_style	= $row['image_style'];	
echo "<option>$image_style</option>";}}
//Selection 4
echo "";
if($_GET['frame'] == "Clipped"){
while ($row = mysql_fetch_assoc ($extract)){
$id		= $row['id'];
$image_style	= $row['image_style'];	
echo "<option>$image_style</option>";}}
//Selection 5
echo "";
if($_GET['frame'] == "Framed"){
while ($row = mysql_fetch_assoc ($extract)){
$id		= $row['id'];
$image_style	= $row['image_style'];	
echo "<option>$image_style</option>";}}
?>
 </select>
 <input type="submit" value="next page" />
</form>
</body></html>

page3

<?php if(!isset($_GET['image_style'])){ header( 'Location: test8.php' ) ; }?>
<html><head></head><body>
<form method="get" action="test9.php">
<input type="hidden" name="image_style" value="<?php echo $_GET['image_style']; ?>">
 <select name="edge_style">
        <?php



error_reporting (0) ;

$connect = mysql_connect ("********","******","******") or die(mysql_error());
mysql_select_db("test") or die (mysql_error());

echo "connected<p>";

//extract data
$extract = mysql_query("SELECT * from edge_style ORDER BY id ASC");
$numrows = mysql_num_rows ("$extract");
//Selection 1
echo "<option>Please Select</option>";
if($_GET['Image_style'] == "Original")
{while ($row = mysql_fetch_assoc ($extract)){
$id		= $row['id'];
$edge_style	= $row['edge_style'];	
echo "<option>$edge_style</option>";}}	
//Selection 2
echo "";
if($_GET['Image_style'] == "Black & White"){
while ($row = mysql_fetch_assoc ($extract)){
$id		= $row['id'];
$edge_style	= $row['edge_style'];	
echo "<option>$edge_style</option>";}}
//Selection 3
echo "";
if($_GET['Image_style'] == "Sepia"){
while ($row = mysql_fetch_assoc ($extract)){
$id		= $row['id'];
$edge_style	= $row['edge_style'];	
echo "<option>$edge_style</option>";}}
//Selection 4
echo "";
if($_GET['Image_style'] == "Colour Splash"){
while ($row = mysql_fetch_assoc ($extract)){
$id		= $row['id'];
$edge_style	= $row['edge_style'];	
echo "<option>$edge_style</option>";}}
//Selection 5
echo "";
if($_GET['Image_style'] == "Framed"){
while ($row = mysql_fetch_assoc ($extract)){
$id		= $row['id'];
$edge_style	= $row['edge_style'];	
echo "<option>$edge_style</option>";}}
?>
 </select>
 <input type="submit" value="next page" />
</form>
</body></html>

page 4

<html><head></head><body>
<?php
if(isset($_GET['frame']))
{
 echo "frame = " . $_GET['frame'];
}
if(isset($_GET['image_style']))
{
 echo "<br /><br />color = " . $_GET['image_style'];
}
?>
</body></html>

#7 Geeks

Advanced Member

Group: Members
Posts: 321
Joined: 07-October 09
Reputation: 11
Gender:Male
Location:South Africa
Experience:Intermediate
Area of Expertise:Designer/Coder

Posted 15 March 2010 - 10:45 AM

lets see if I understand right here,

user selects a frame -> image style is relative to frame
-> user selects image style -> edge_style is relative to image syle
-> user selects edge_style

if that is correct how do you know which image styles go with a frame and which edge style goes with a image_style?

I think you need linking tables :

eg
[frame_image_link]
[ID][Frame_ID][Image_ID]
-> this table will tell you which image goes with which frame
[image_edge_link]
[ID][Image_ID][edge_ID]
-> this table will tell you which frame goes with which edge

#8 dan...

Forum Newcomer

Group: Members
Posts: 54
Joined: 28-January 10
Reputation: 0

Posted 15 March 2010 - 10:53 AM

Geeks, on 15 March 2010 - 10:45 AM, said:

I forgot about that, but yeah i need it to link somehow, what you have put down is how it should be, i need that put in as well somehow lol

#9 dan...

Forum Newcomer

Group: Members
Posts: 54
Joined: 28-January 10
Reputation: 0

Posted 15 March 2010 - 10:54 AM

dan..., on 15 March 2010 - 10:53 AM, said:

I forgot about that, but yeah i need it to link somehow, what you have put down is how it should be, i need that put in as well somehow lol

eg
[frame_image_link]
[ID][Frame_ID][Image_ID]
-> this table will tell you which image goes with which frame
[image_edge_link]
[ID][Image_ID][edge_ID]
-> this table will tell you which frame goes with which edge

#10 Geeks

Advanced Member

Group: Members
Posts: 321
Joined: 07-October 09
Reputation: 11
Gender:Male
Location:South Africa
Experience:Intermediate
Area of Expertise:Designer/Coder

Posted 15 March 2010 - 10:58 AM

will send soon

#11 dan...

Forum Newcomer

Group: Members
Posts: 54
Joined: 28-January 10
Reputation: 0

Posted 15 March 2010 - 11:00 AM

Geeks, on 15 March 2010 - 10:58 AM, said:

will send soon

thank you

#12 Geeks

Advanced Member

Group: Members
Posts: 321
Joined: 07-October 09
Reputation: 11
Gender:Male
Location:South Africa
Experience:Intermediate
Area of Expertise:Designer/Coder

Posted 15 March 2010 - 11:37 AM

are you running phpmyadmin?

#13 dan...

Forum Newcomer

Group: Members
Posts: 54
Joined: 28-January 10
Reputation: 0

Posted 15 March 2010 - 11:41 AM

Geeks, on 15 March 2010 - 11:37 AM, said:

are you running phpmyadmin?

yeah

#14 Geeks

Advanced Member

Group: Members
Posts: 321
Joined: 07-October 09
Reputation: 11
Gender:Male
Location:South Africa
Experience:Intermediate
Area of Expertise:Designer/Coder

Posted 15 March 2010 - 11:44 AM

what image styles are there ?

#15 Geeks

Advanced Member

Group: Members
Posts: 321
Joined: 07-October 09
Reputation: 11
Gender:Male
Location:South Africa
Experience:Intermediate
Area of Expertise:Designer/Coder

Posted 15 March 2010 - 11:44 AM

I have it working 100%

#16 Geeks

Advanced Member

Group: Members
Posts: 321
Joined: 07-October 09
Reputation: 11
Gender:Male
Location:South Africa
Experience:Intermediate
Area of Expertise:Designer/Coder

Posted 15 March 2010 - 11:46 AM

sorry I mean edge styles

#17 dan...

Forum Newcomer

Group: Members
Posts: 54
Joined: 28-January 10
Reputation: 0

Posted 15 March 2010 - 11:48 AM

Geeks, on 15 March 2010 - 11:46 AM, said:

sorry I mean edge styles

acrylic
5mm
10mm

block mounted
white
black
wrapped

canvas
white
black
coloured
wrapped

#18 Geeks

Advanced Member

Group: Members
Posts: 321
Joined: 07-October 09
Reputation: 11
Gender:Male
Location:South Africa
Experience:Intermediate
Area of Expertise:Designer/Coder

Posted 15 March 2010 - 11:59 AM

delete your database 'test'

then in phpmyadmin go to SQL and run this:

-- phpMyAdmin SQL Dump
-- version 3.2.0.1
-- http://www.phpmyadmin.net
--
-- Host: localhost
-- Generation Time: Mar 15, 2010 at 11:57 AM
-- Server version: 5.1.36
-- PHP Version: 5.3.0

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";

--
-- Database: `test`
--
CREATE DATABASE `test` DEFAULT CHARACTER SET latin1 COLLATE latin1_swedish_ci;
USE `test`;

-- --------------------------------------------------------

--
-- Table structure for table `edge_style`
--

CREATE TABLE IF NOT EXISTS `edge_style` (
 `ID` int(11) NOT NULL AUTO_INCREMENT,
 `edge_style` text NOT NULL,
 `frames` text NOT NULL,
 PRIMARY KEY (`ID`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=14 ;

--
-- Dumping data for table `edge_style`
--

INSERT INTO `edge_style` (`ID`, `edge_style`, `frames`) VALUES
(10, 'white', '3'),
(9, 'wrapped', '2'),
(8, 'black ', '2'),
(6, '10mm', '1'),
(7, 'white', '2'),
(5, '5mm', '1'),
(11, 'black', '3'),
(12, 'coloured', '3'),
(13, 'wrapped ', '3');

-- --------------------------------------------------------

--
-- Table structure for table `frames`
--

CREATE TABLE IF NOT EXISTS `frames` (
 `ID` int(11) NOT NULL AUTO_INCREMENT,
 `frame` text NOT NULL,
 PRIMARY KEY (`ID`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=6 ;

--
-- Dumping data for table `frames`
--

INSERT INTO `frames` (`ID`, `frame`) VALUES
(1, 'Acrylic'),
(2, 'Block Mounted'),
(3, 'Canvas'),
(4, 'Clipped'),
(5, 'Framed');

-- --------------------------------------------------------

--
-- Table structure for table `image_style`
--

CREATE TABLE IF NOT EXISTS `image_style` (
 `ID` int(11) NOT NULL AUTO_INCREMENT,
 `image_style` text NOT NULL,
 `Frames` text NOT NULL,
 PRIMARY KEY (`ID`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=6 ;

--
-- Dumping data for table `image_style`
--

INSERT INTO `image_style` (`ID`, `image_style`, `Frames`) VALUES
(1, 'Original', '1,2,5'),
(2, 'Black & White', '2,4,5'),
(3, 'Sepia', '1,4,5'),
(4, 'Colour Splash', '4,5'),
(5, 'Framed', '2,1,3');

EDIT: in the image style table change the values of the Frames column to suit your needs

EDIT: I will send you the pages once you have this done

#19 dan...

Forum Newcomer

Group: Members
Posts: 54
Joined: 28-January 10
Reputation: 0

Posted 15 March 2010 - 12:07 PM

Geeks, on 15 March 2010 - 11:59 AM, said:

delete your database 'test'

then in phpmyadmin go to SQL and run this:

-- phpMyAdmin SQL Dump
-- version 3.2.0.1
-- http://www.phpmyadmin.net
--
-- Host: localhost
-- Generation Time: Mar 15, 2010 at 11:57 AM
-- Server version: 5.1.36
-- PHP Version: 5.3.0

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";

--
-- Database: `test`
--
CREATE DATABASE `test` DEFAULT CHARACTER SET latin1 COLLATE latin1_swedish_ci;
USE `test`;

-- --------------------------------------------------------

--
-- Table structure for table `edge_style`
--

CREATE TABLE IF NOT EXISTS `edge_style` (
 `ID` int(11) NOT NULL AUTO_INCREMENT,
 `edge_style` text NOT NULL,
 `frames` text NOT NULL,
 PRIMARY KEY (`ID`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=14 ;

--
-- Dumping data for table `edge_style`
--

INSERT INTO `edge_style` (`ID`, `edge_style`, `frames`) VALUES
(10, 'white', '3'),
(9, 'wrapped', '2'),
(8, 'black ', '2'),
(6, '10mm', '1'),
(7, 'white', '2'),
(5, '5mm', '1'),
(11, 'black', '3'),
(12, 'coloured', '3'),
(13, 'wrapped ', '3');

-- --------------------------------------------------------

--
-- Table structure for table `frames`
--

CREATE TABLE IF NOT EXISTS `frames` (
 `ID` int(11) NOT NULL AUTO_INCREMENT,
 `frame` text NOT NULL,
 PRIMARY KEY (`ID`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=6 ;

--
-- Dumping data for table `frames`
--

INSERT INTO `frames` (`ID`, `frame`) VALUES
(1, 'Acrylic'),
(2, 'Block Mounted'),
(3, 'Canvas'),
(4, 'Clipped'),
(5, 'Framed');

-- --------------------------------------------------------

--
-- Table structure for table `image_style`
--

CREATE TABLE IF NOT EXISTS `image_style` (
 `ID` int(11) NOT NULL AUTO_INCREMENT,
 `image_style` text NOT NULL,
 `Frames` text NOT NULL,
 PRIMARY KEY (`ID`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=6 ;

--
-- Dumping data for table `image_style`
--

INSERT INTO `image_style` (`ID`, `image_style`, `Frames`) VALUES
(1, 'Original', '1,2,5'),
(2, 'Black & White', '2,4,5'),
(3, 'Sepia', '1,4,5'),
(4, 'Colour Splash', '4,5'),
(5, 'Framed', '2,1,3');

EDIT: in the image style table change the values of the Frames column to suit your needs

EDIT: I will send you the pages once you have this done

OK, i have deleted the test table and put this in the database, but i don't get what you mean

Quote

in the image style table change the values of the Frames column to suit your needs

?

Does it mean that if i select 2 Block Mounted / 4 Clipped or 5 Framed then the field that has 2,4,5 will show?

#20 Geeks

Advanced Member

Group: Members
Posts: 321
Joined: 07-October 09
Reputation: 11
Gender:Male
Location:South Africa
Experience:Intermediate
Area of Expertise:Designer/Coder

Posted 15 March 2010 - 12:11 PM

Quote

lol

the numbers represent the ID of the frame eg Acrylic = 1 so if Acrylic should show Framed then add 1 to that one.

#21 Geeks

Advanced Member

Group: Members
Posts: 321
Joined: 07-October 09
Reputation: 11
Gender:Male
Location:South Africa
Experience:Intermediate
Area of Expertise:Designer/Coder

Posted 15 March 2010 - 12:12 PM

else send me a list of frames and what image style they should have

the same as you did with edges

#22 Geeks

Advanced Member

Group: Members
Posts: 321
Joined: 07-October 09
Reputation: 11
Gender:Male
Location:South Africa
Experience:Intermediate
Area of Expertise:Designer/Coder

Posted 15 March 2010 - 12:18 PM

here are the pages maybe it will make more sense :

test7.php

<html><head></head><body>
<form method="get" action="test8.php">
 <select name="frame"> <option>Please Select</option>	
 	<?php
 	$username="root"; //set username
 	$password="pass"; //set password
 	$database = "test"; //set database
 	$server = "localhost"; //set server
 	$sqlcon = mysql_connect($server,$username,$password); //connect to DB 
 	@mysql_select_db($database) or die( "Unable to select database");
 	$query = "SELECT * from frames ORDER BY ID ASC";
 	$framedata = mysql_query($query) or die('Query failed: ' . mysql_error()); //fetch data
 	//unset($query); //save resources by killing unused variables
 	if (!$framedata ) //some simple error checking 
 	{ 
 	//communicate with user if there is an error
 	echo "sorry there was an error if you think we should know about this please let us know at <a href='mailto:email@server.com'>email@server.com</a>"; 
 	exit; //stop processing if there is an error
 	}
 	else
 	{ 
 	while($row = mysql_fetch_row($framedata)) //loop through results which are now matched with parameters
 	{ 
 	echo "<option value=".$row[0].">".$row[1]."</option>"; //echo each option set it's value to the ID
 	}
 	unset($framedata); //save resources by killing unused variables
 	} 
?>
 </select>
 <input type="submit" value="next page" />
</form>
</body></html>

test8.php

<?php if(!isset($_GET['frame'])){ header( 'Location: test7.php' ) ; }?>
<html><head></head><body>
<form method="get" action="test9.php">
<input type="hidden" name="frame" value="<?php echo $_GET['frame']; ?>">
<select name="image_style"> 
 <option>Please Select ...</option> 
	<?php 
 	$username="root"; //set username
 	$password="pass"; //set password
 	$database = "test"; //set database
 	$server = "localhost"; //set server
 	$sqlcon = mysql_connect($server,$username,$password); //connect to DB 
 	@mysql_select_db($database) or die( "Unable to select database");
 	$frame = $_GET['frame']; // set variable 
 	$query= "SELECT * FROM image_style WHERE Frames LIKE '%$frame%' LIMIT 0 , 30"; //set SQL query with parameters
 	$framedata = mysql_query($query) or die('Query failed: ' . mysql_error()); //fetch data
 	unset($query); //save resources by killing unused variables
 	if (!$framedata ) //some simple error checking 
 	{ 
 	//communicate with user if there is an error
 	echo "sorry there was an error if you think we should know about this please let us know at <a href='mailto:email@server.com'>email@server.com</a>"; 
 	exit; //stop processing if there is an error
 	}
 	else
 	{
 	while($row = mysql_fetch_row($framedata )) //loop through results which are now matched with parameters
 	{ 
 	echo "<option value=".$row[0].">".$row[1]."</option>"; //echo each option set it's value to the ID
 	}
 	unset($framedata); //save resources by killing unused variables
 	} 
	?> 	
 </select>
 <input type="submit" value="next page" />
</form>
</body></html>

test9.php

<?php if(!isset($_GET['frame']) && !isset($_GET['image_style'])){ header( 'Location: test7.php' ) ; }?>
<html><head></head><body>
<form method="get" action="test10.php">
<input type="hidden" name="frame" value="<?php echo $_GET['frame']; ?>">
<input type="hidden" name="image_style" value="<?php echo $_GET['image_style']; ?>">
<select name="edge_style"> 
 <option>Please Select ...</option> 
	<?php 
 	$username="root"; //set username
 	$password="pass"; //set password
 	$database = "test"; //set database
 	$server = "localhost"; //set server
 	$sqlcon = mysql_connect($server,$username,$password); //connect to DB 
 	@mysql_select_db($database) or die( "Unable to select database");
 	$frame = $_GET['frame']; // set variable 
 	$query= "SELECT * FROM edge_style WHERE frames LIKE '%$frame%' LIMIT 0 , 30"; //set SQL query with parameters
 	$framedata = mysql_query($query) or die('Query failed: ' . mysql_error()); //fetch data
 	unset($query); //save resources by killing unused variables
 	if (!$framedata ) //some simple error checking 
 	{ 
 	//communicate with user if there is an error
 	echo "sorry there was an error if you think we should know about this please let us know at <a href='mailto:email@server.com'>email@server.com</a>"; 
 	exit; //stop processing if there is an error
 	}
 	else
 	{
 	while($row = mysql_fetch_row($framedata )) //loop through results which are now matched with parameters
 	{ 
 	echo "<option value=".$row[0].">".$row[1]."</option>"; //echo each option set it's value to the ID
 	}
 	unset($framedata); //save resources by killing unused variables
 	} 
	?> 	
 </select>
 <input type="submit" value="next page" />
</form>
</body></html>

test10.php

<?php if(!isset($_GET['frame']) && !isset($_GET['image_style']) && !isset($_GET['edge_style'])){ header( 'Location: test7.php' ) ; }?>
<html><head></head><body>
<?php
if(isset($_GET['frame']))
{
 echo "frame = " . $_GET['frame'];
} 
if(isset($_GET['image_style']))
{
 echo "<br /><br />image style = " . $_GET['image_style'];
} 
if(isset($_GET['edge_style']))
{
 echo "<br /><br />edge style = " . $_GET['edge_style'];
}
?>
</body></html>

#23 dan...

Forum Newcomer

Group: Members
Posts: 54
Joined: 28-January 10
Reputation: 0

Posted 15 March 2010 - 12:30 PM

Geeks, on 15 March 2010 - 12:18 PM, said:

here are the pages maybe it will make more sense :

I get it now lol, even then i had to keep going back and checking it before it clicked.

ok, could you please help me out with the image part, i know i'm asking a lot but you've been great and patient.

#24 Geeks

Advanced Member

Group: Members
Posts: 321
Joined: 07-October 09
Reputation: 11
Gender:Male
Location:South Africa
Experience:Intermediate
Area of Expertise:Designer/Coder

Posted 15 March 2010 - 12:46 PM

Glad to help, does it all make sense not just work, it doesn't help if it just works because then you have gained nothing.

explain the image part to me at what point do you want images and what images ?

This post has been edited by Geeks: 15 March 2010 - 12:47 PM

#25 dan...

Forum Newcomer

Group: Members
Posts: 54
Joined: 28-January 10
Reputation: 0

Posted 15 March 2010 - 01:01 PM

Geeks, on 15 March 2010 - 12:46 PM, said:

Your right, but i actually understand it, i'm now trying to see if i can add more pages to see if i can actually do it by myself, i find this is my best way of learning.

Let's start on the first selection,

I would like an image to show next to the drop down list (I guess i can do this with css, i hope) then once i choose Acrylic, it will replace the standard image with an image of acrylic, then if i select Block Mounted, it will replace the Acrylic image with the Block Mounted one etc etc

check out my site to show you what i mean but this is done in html and i need it working the new way to talk to the database etc http://www.evco-design.co.uk/

#26 dan...

Forum Newcomer

Group: Members
Posts: 54
Joined: 28-January 10
Reputation: 0

Posted 15 March 2010 - 01:05 PM

dan..., on 15 March 2010 - 01:01 PM, said:

p.s. I have added another page to it, so i do now understand more

#27 Geeks

Advanced Member

Group: Members
Posts: 321
Joined: 07-October 09
Reputation: 11
Gender:Male
Location:South Africa
Experience:Intermediate
Area of Expertise:Designer/Coder

Posted 15 March 2010 - 01:06 PM

I recall you never had working hosting, try 000webhost(it is free I use it for my testing)

it has PHP, mySQL support

#28 dan...

Forum Newcomer

Group: Members
Posts: 54
Joined: 28-January 10
Reputation: 0

Posted 15 March 2010 - 01:10 PM

Geeks, on 15 March 2010 - 01:06 PM, said:

I recall you never had working hosting, try 000webhost(it is free I use it for my testing)

it has PHP, mySQL support

i might have to take that on board, the evco-design site which i use for testing is free at the moment but i think that runs out soon.

#29 Geeks

Advanced Member

Group: Members
Posts: 321
Joined: 07-October 09
Reputation: 11
Gender:Male
Location:South Africa
Experience:Intermediate
Area of Expertise:Designer/Coder

Posted 15 March 2010 - 01:38 PM

in the database in the frames table add a column at the end called img_src

for each entry add the value for img_src e.g : my images/Thumbnails/Image Styles/style4.jpg

let me know when that is done .

#30 dan...

Forum Newcomer

Group: Members
Posts: 54
Joined: 28-January 10
Reputation: 0

Posted 15 March 2010 - 01:44 PM

Geeks, on 15 March 2010 - 01:38 PM, said:

I've never added an image to the database before, do i use varchar or something else?

#31 Geeks

Advanced Member

Group: Members
Posts: 321
Joined: 07-October 09
Reputation: 11
Gender:Male
Location:South Africa
Experience:Intermediate
Area of Expertise:Designer/Coder

Posted 15 March 2010 - 01:49 PM

no just add the location of the image relative to the page.

#32 dan...

Forum Newcomer

Group: Members
Posts: 54
Joined: 28-January 10
Reputation: 0

Posted 15 March 2010 - 01:52 PM

Geeks, on 15 March 2010 - 01:49 PM, said:

no just add the location of the image relative to the page.

sorry geeks i'm lost?

#33 Geeks

Advanced Member

Group: Members
Posts: 321
Joined: 07-October 09
Reputation: 11
Gender:Male
Location:South Africa
Experience:Intermediate
Area of Expertise:Designer/Coder

Posted 15 March 2010 - 02:03 PM

make your frames table look something like this

[frames]
[ID] [frame] [img_src]

then for the values something like :

[1] [Acrylic] [images/1.jpg]
[2] [Block Mounted] [images/blockmounted.jpg]
[3] [Canvas] [images/image_3.gif]
[4] [Clipped] [images/clipped_image.png]
[5] [framed] [images/5.jpg]

#34 Geeks

Advanced Member

Group: Members
Posts: 321
Joined: 07-October 09
Reputation: 11
Gender:Male
Location:South Africa
Experience:Intermediate
Area of Expertise:Designer/Coder

Posted 16 March 2010 - 07:41 AM

here is a solution but it does not validate, dan - IM me for the working code

Can anyone help me get it to validate ? The custom attribute "image" is giving problems

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head> 
	<title>insert title here</title>
 </head>
 <body>
	<form method="get" action="test8.php">
 	<img alt='Sample image' id="change_me" src="images/base.jpg" /> 	
 	<select id="frame" onchange='image_rollover()' name="frame" size="12">	
 	<option image="images/base.jpg">Please Select
 	</option> 	
 	<option image="images/1.jpg">Please Select
 	</option> 	
 	<option image="images/2.jpg">Please Select
 	</option> 	
 	<option image="images/3.jpg">Please Select
 	</option> 	
 	<option image="images/4.jpg">Please Select
 	</option> 	
 	</select> <br /><br /> <br /> 
 	<input type="submit" value="next page" />
	</form>
<script type="text/javascript">
 function image_rollover()
 { 
 var x=document.getElementById("frame"); //get element 
 var index = x.selectedIndex; // get selected index
 var image = x.options[index].getAttribute("image"); // get image attribute 	
 document.getElementById("change_me").src=image; //change img src 
 }
</script>
	<img alt='Sample image' src='images/1.jpg' style='display:none' />
	<img alt='Sample image' src='images/2.jpg' style='display:none' />
	<img alt='Sample image' src='images/3.jpg' style='display:none' />
	<img alt='Sample image' src='images/4.jpg' style='display:none' />
 </body>
</html>

#35 Geeks

Advanced Member

Group: Members
Posts: 321
Joined: 07-October 09
Reputation: 11
Gender:Male
Location:South Africa
Experience:Intermediate
Area of Expertise:Designer/Coder

Posted 16 March 2010 - 11:52 AM

final code for those interested


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
 function image_rollover()
 { 
   var x=document.getElementById("frame"); //get element 
   var index = x.selectedIndex; // get selected index
   var image = x.options[index].getAttribute("image"); // get image attribute 
   var caption = x.options[index].getAttribute("caption"); // get caption attribute                   
   document.getElementById("change_me").src=image; //change img src 
   document.getElementById("caption_holder").innerHTML = caption;
   if (x.options[0].getAttribute("value") == "null")
   {
    x.remove(0);
   }                             
 }
</script>
</head>
<body>
  <form method="get" action="test8.php">  
    <img alt="Sample image" id="change_me" src="images/base.jpg" />                  
    <select id="frame" onchange='image_rollover()' name="frame"> 
     <option caption="please select your option" value="null" image="images/base.jpg">Please Select</option>    
      <?php
          $username="****";   //set username
          $password="****";   //set password
          $database = "****";  //set database
          $server = "******";  //set server
          $sqlcon = mysql_connect($server,$username,$password);  //connect to DB 
          @mysql_select_db($database) or die( "Unable to select database");  //connect to table
          $query = "SELECT * from frames ORDER BY ID ASC"; //set query
          $framedata = mysql_query($query) or die('Query failed: ' . mysql_error()); //fetch data
          unset($query); //save resources by killing unused variables
            if (!$framedata ) //some simple error checking 
            { 
              //communicate with user if there is an error
              echo "sorry there was an error if you think we should know about this please let us know at <a href='mailto:email@server.com'>email@server.com</a>"; 
              exit; //stop processing if there is an error
            }
            else
            {   
              while($row = mysql_fetch_row($framedata)) //loop through results which are now matched with parameters
              { 
                echo "<option value=".$row[0]." image='$row[2]' caption='$row[3]'>".$row[1]."</option>"; //echo each option set it's value to the ID
              }
              unset($framedata); //save resources by killing unused variables
            } 
      ?>
     </select> 
    <br /><br /> <br />  
<div id="caption_holder">please select your option</div>
    <input type="submit" value="next page" />
  </form>
  <?php
                    ///////////////////////////
                    // TO PRELOAD THE IMAGES //
                    ///////////////////////////
        $images_query = "SELECT * from frames ORDER BY ID ASC";
        $images_data = mysql_query($images_query) or die('Query failed: ' . mysql_error()); //fetch data
        unset($images_query); //save resources by killing unused variables
          if (!$images_data ) //some simple error checking 
          { 
            //communicate with user if there is an error
            echo "sorry there was an error if you think we should know about this please let us know at <a href='mailto:email@server.com'>email@server.com</a>"; 
            exit; //stop processing if there is an error
          }
          else
          {   
            while($row = mysql_fetch_row($images_data)) //loop through results which are now matched with parameters
            { 
              echo "<img alt='Sample image' src='$row[2]' style='display:none' />";
            }
            unset($images_data); //save resources by killing unused variables
          } 
  ?>
</body></html>

Web Design Forum: Need help displaying an image on a drop down list selection - Web Design Forum

Share this topic:

1 User(s) are reading this topic 0 members, 1 guests, 0 anonymous users

Delete Post

Skin and Language

Execution Stats

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users