AJAX & Submit Buttons

[Dannio]

Hi,

I have written an AJAX/PHP script which basically passes a hex code through to the process.php file and brings back a coloured DIV of that hex code.

I now want to convert that select box into a series of submit buttons which are styled to be the colourof the hex code.

When clicked, the DIV will be returned the colour of that submit button.

I have it firing the AJAX, only issue is that no matter what colour button I click, it comes back white.

Any ideas?

<script color="text/javascript">
		$(document).ready(function() {
				$('#shirt').delegate('input,select,checkbox,submit,button', 'keyup change change click click', function(){
				var colorvar = $("#color").val();
				var id = $("#productId").val();				
				var selcolor = $("#colorbutton").val();

				
				$.post("process.php", { color: colorvar, productId: id, colorbutton: selcolor }, function(data) {
					$("#status p").html(data);
					$("#shirt").bind("keypress", function(e) {
  if (e.keyCode == 13) return false;
});
				});
				return false;
			});
		});
		
	</script>
	


<div align="center">
	<form id="shirt" name="shirt" method="POST">

<?php 
//this bit makes the buttons
while($row = mysql_fetch_array($fetch_color_options)) {
	$color = $row['Color'];
	$hex = $row['HexCode'];
	
	echo '
	
	<input type="hidden" name="productId" id="productId" value="'.$prodId.'">
	<input type="hidden" name="color" id="color" value="'.$color.'">
	<input name="colorbutton" id="colorbutton" value="'.$color.'" type="button" style="border-width:6px; background:#'.$hex.';">

	';

}

?>


</form>	
<div id="status">
		<p></p>
	</div>
	<br><br>	
		</div>

You can view/firebug the script at:
http://geewizzcubecart.co.uk/modules...l.php?prodId=2

Thanks

Dan

[sunfighter]

All IDs must be unique. if ID="color" is give for one item (button) Then no other button can have it. You give all your buttons and the buttoncolor the same ID. So the first button works because thats the one that was found. Place the code for the green button first and you should only get green shirts.

<form id="shirt" name="shirt" method="POST" action="">

	<input type="hidden" name="productId" id="productId" value="2">
	<input type="hidden" name="color" id="color" value="White">
	<input name="colorbutton" id="colorbutton" value="White" type="button" style="border-width:6px; background:#ffffff;">

	<input type="hidden" name="productId" id="productId" value="2">
	<input type="hidden" name="color" id="color" value="Black">
	<input name="colorbutton" id="colorbutton" value="Black" type="button" style="border-width:6px; background:#000000;">

	<input type="hidden" name="productId" id="productId" value="2">
	<input type="hidden" name="color" id="color" value="Yellow">
	<input name="colorbutton" id="colorbutton" value="Yellow" type="button" style="border-width:6px; background:#fffc00;">

	<input type="hidden" name="productId" id="productId" value="2">
	<input type="hidden" name="color" id="color" value="Red">
	<input name="colorbutton" id="colorbutton" value="Red" type="button" style="border-width:6px; background:#FF2121;">

	<input type="hidden" name="productId" id="productId" value="2">
	<input type="hidden" name="color" id="color" value="Skyblue">
	<input name="colorbutton" id="colorbutton" value="Skyblue" type="button" style="border-width:6px; background:#87CEEB	;">

	<input type="hidden" name="productId" id="productId" value="2">
	<input type="hidden" name="color" id="color" value="Green">
	<input name="colorbutton" id="colorbutton" value="Green" type="button" style="border-width:6px; background:#458B00	  ;">
</form>