Updating database by clicking an image

[Coyx]

Hi guys,

I'm wondering if anyone can help. I have surryussface flu and I just can't seem to concentrate at all.

I need to be able to select a colour from a list like the attached image. I've managed to code it right up to the part where it can show you the colour you currently have selected.

But I don't know what the hell I need to do to be able to click a colour and have it just refresh the page (or in this case, the "mainFrame" frame) as a result of updating the database. Here's some code and stuff!

<form name="selectColour" method="post" action="">
<table width="30%" align="center" border="0">
	<tr>
	<td colspan="8" align="center" valign="top" height="50">
	<font face="Verdana" size="2">Select a colour for your PDF Documents. <i><a onclick="$.jGrowl('<b>PDF Layout Colour Selector</b><br /><br />You can select the colour of the PDF Layouts here, by clicking a colour swatch below. <br><br>These colour changes <i>only</i> change the colour of the title header sections of each document. <br><br>All your documents will be the same colour. You cannot change the text colour on documents.', { sticky: true });" href="javascript:void(0);">(?)</a></i></font>
	</td>
	</tr>
	<tr>
	<td>
	<a onclick="selectColour('<?php $colour = "#000000"; ?>');"><img src="/images/colours/000000.png" border="0">
	</td>
	<td>
	<a onclick="selectColour('<?php $colour = "#333333"; ?>');"><img src="/images/colours/333333.png" border="0"></a>
	</td>
	<td>
	<a onclick="selectColour('#6e0000');"><img src="/images/colours/6e0000.png" border="0"></a>
	</td>
	<td>
	<a onclick="selectColour('#966c1a');"><img src="/images/colours/966c1a.png" border="0"></a>
	</td>
	<td>
	<a onclick="selectColour('#232163');"><img src="/images/colours/232163.png" border="0"></a>
	</td>
	<td>
	<a onclick="selectColour('#0400b4');"><img src="/images/colours/0400b4.png" border="0"></a>
	</td>
	<td>
	<a onclick="selectColour('#5f01c9');"><img src="/images/colours/5f01c9.png" border="0"></a>
	</td>
	<td>
	<a onclick="selectColour('#4c54ff');"><img src="/images/colours/4c54ff.png" border="0"></a>
	</td>
	</tr>
	<tr>
	<td>
	<a onclick="selectColour('#00a2ff');"><img src="/images/colours/00a2ff.png" border="0"></a>
	</td>
	<td>
	<a onclick="selectColour('#02d0d2');"><img src="/images/colours/02d0d2.png" border="0"></a>
	</td>
	<td>
	<a onclick="selectColour('#8e61c2');"><img src="/images/colours/8e61c2.png" border="0"></a>
	</td>
	<td>
	<a onclick="selectColour('#00ac51');"><img src="/images/colours/00ac51.png" border="0"></a>
	</td>
	<td>
	<a onclick="selectColour('#10e000');"><img src="/images/colours/10e000.png" border="0"></a>
	</td>
	<td>
	<a onclick="selectColour('#00ff78');"><img src="/images/colours/00ff78.png" border="0"></a>
	</td>
	<td>
	<a onclick="selectColour('#e30000');"><img src="/images/colours/e30000.png" border="0"></a>
	</td>
	<td>
	<a onclick="selectColour('#ffa800');"><img src="/images/colours/ffa800.png" border="0"></a>
	</td>
	</tr>
									
		<input type="hidden" name="#000000">
		<input type="hidden" name="#333333">
		<input type="hidden" name="#6e0000">
		<input type="hidden" name="#966c1a">
		<input type="hidden" name="#232163">
		<input type="hidden" name="#0400b4">
		<input type="hidden" name="#5f01c9">
		<input type="hidden" name="#4c54ff">
		<input type="hidden" name="#00a2ff">
		<input type="hidden" name="#02d0d2">
		<input type="hidden" name="#8e61c2">
		<input type="hidden" name="#00ac51">
		<input type="hidden" name="#10e000">
		<input type="hidden" name="#00ff78">
		<input type="hidden" name="#e30000">
		<input type="hidden" name="#ffa800">

<?php
									
if ($selectColour) {
	$sql = "UPDATE conf_settings SET pdfcolour = '$colour' WHERE client = '$userclient'";
	$query = mysql_query($sql);
}
									
									
//Get current colour of layouts.
	$sql = "SELECT pdfcolour FROM conf_settings WHERE client = '$userclient'";
	$query = mysql_query($sql);
	$colourhex = mysql_fetch_row($query);
									
	$currentcolour = ltrim($colourhex[0], "#");
									
	echo "<tr><td colspan='8' align='center' valign='bottom' height='90'>";
	echo "<font size='2' face='Verdana'>Your current PDF Layout colour is:</font><br /><img src='/images/colours/".$currentcolour.".png' border='0'>";
	echo "</td></tr>";
									
?>

I would be MORE than happy to just have the image be clicked and update the database with ANYTHING! I can figure out getting the right data no problem... I just literally need the onClick to run through some JS (which I'm terrible with) posting to the same PHP file, which updates the database field. But with being ill and stuff, it's thrashing my head! :(

Anyone? /beg! :)

edit: as you can see, I've tried putting some php in the onclick for the first two colours... didn't work >_<

[chrishea]

What is surryussface flu?

[diafol]

EEK!

Don't need any of that. Use AJax (I suggest jQuery).

1. Create a general JS event handler for the images. You could even place said images inside links, but that's probably unnecessary.
2. JS picks up the unique value of the image (e.g. filename) - pass this to a php script.
3. php script modifies DB and echoes true (if success), false (if couldn't change it)
4. JS picks up message (true or false) and updates the screen accordingly.

You could use onclick as opposed to a general event handler for now, but you'd be duplicating code all over the place.

BTW, I really like the idea/interface - looks nice.

[diafol]

OK, here's a start:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<script src="js/myajax.js"></script>
<script>
$(document).ready(function(){
   $("img").click(function(){
     changeColour($(this).attr("src"),$(this).attr("class"));
   });
 });</script>
</head>
<body>
<img src="img/red.jpg" class="red" />
<img src="img/green.png" class="green" />
<img src="img/cyan.png" class="cyan" />
<h3>This one chosen:</h3>
<div id="chosen">
<!-- the following could be set initially by php, eg from DB or session-->
<img src="img/red.jpg" />
<!-- red is the default otherwise-->
</div>
</body>
</html>

the myajax.js contains the changeColour function that will pass the filename and the colour to the php script.
The DB stores the colour (class value). If the DB is changed successfully, send a true back to js, it writes an <img> tag into the "chosen" <div> with the passed "src" attribute.

Anyway, that's one approach. You could do the above in a number of different ways, depending on how your DB is set up.

[Coyx]

What is surryussface flu?

"Serious face flu" :P I'm JUST getting rid of it, but I have such a violent cough at the moment and as a result of it, for the past 6 days I've had the same migraine in the same spot, about an inch above my left eye and it's extremely painful. No amount of paracetemol or cough medicine or anything is budging it. So... it's really knocked my coding out because I can't concentrate at all... it even got to the point yesterday where I typed this up;

<?php

// this bit explode each seperate setting out.
$pdf_array = explode("//" , $pdfsettings);

// this bit explodes what the type and value of each setting is and puts it into a new array so that we can keep old ones if we dont edit them.
foreach($pdf_array AS $pdfset) {
	$tot=explode(":" , $pdfset);
	$x=$tot[0];
	$y=$tot[1];
	$eachset = array();
	$eachset[$x] = $y;
}

// This is the section for defining which templates are used in the PDF documents.
$sql = "SELECT pdf_group, group_desc FROM mast_pdfgroups"';
$query = mysql_query($sql);
$groupcount = mysql_num_rows($query);
if ($groupcount > 0){
	$x=0;
	while (list($pdf_group, $group_desc) = mysql_fetch_row($query)) {

// and some more code below here

?>

... and couldn't figure out where the error was... took me 3 hours to spot it. >_<

OK, here's a start:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<script src="js/myajax.js"></script>
<script>
$(document).ready(function(){
   $("img").click(function(){
     changeColour($(this).attr("src"),$(this).attr("class"));
   });
 });</script>
</head>
<body>
<img src="img/red.jpg" class="red" />
<img src="img/green.png" class="green" />
<img src="img/cyan.png" class="cyan" />
<h3>This one chosen:</h3>
<div id="chosen">
<!-- the following could be set initially by php, eg from DB or session-->
<img src="img/red.jpg" />
<!-- red is the default otherwise-->
</div>
</body>
</html>

the myajax.js contains the changeColour function that will pass the filename and the colour to the php script.
The DB stores the colour (class value). If the DB is changed successfully, send a true back to js, it writes an <img> tag into the "chosen" <div> with the passed "src" attribute.

Anyway, that's one approach. You could do the above in a number of different ways, depending on how your DB is set up.

This is awesome Ardav... I did look at some jQuery ones yesterday (including Farbtastic, which is GREAT but doesn't work the way I need it to) - so thank you for this, I think I should have this finished this morning now I have a route!

<3

[MooGeek]

you're forgetting about marking this thread solved :P

[Coyx]

Done and done! :)