Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts

    AJAX & Submit Buttons

    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?

    Code:
    <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

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,772
    Thanks
    23
    Thanked 550 Times in 549 Posts
    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.
    Code:
    <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>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •