SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    381
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Click graphic to make form selection?

    Hi

    The easiset way for me to describe waht I'm looking to do is to provide a link to it http://www.sytner.co.uk/

    I'm trying to re-create the last part of the search on this site. The part that has the coloured boxes. The user basically clicks these and the form sees this as a selection having been made. Can someone point me in the right direction as to how to make this work please.

    I was thinking it would have something to do with hidden fields but I'm not sure how to make the form see what has been clicked.

    Any help much appreciated

  2. #2
    Non-Member
    Join Date
    Oct 2009
    Posts
    1,852
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It is javascript there.
    If you want to do it with PHP, you can use input type="image" as well

  3. #3
    rajug.replace('Raju Gautam'); bronze trophy Raju Gautam's Avatar
    Join Date
    Oct 2006
    Location
    Kathmandu, Nepal
    Posts
    4,013
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If I have understood you have already used ajax upon each selection. If not what it does when a selection is made since it says Updating Information.... And regarding the colored images, you already know which images are clicked so you can store those clicked colored images' id or some unique value of selected images in a hidden form field. Since you already know which image is clicked because you have changed the class or image when it is clicked as selected.
    Mistakes are proof that you are trying.....
    ------------------------------------------------------------------------
    PSD to HTML - SlicingArt.com | Personal Blog | ZCE - PHP 5

  4. #4
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    381
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sorry to be going back to this but I don't understand what you are meaning. How can I have an image in a form that once clicked will not try to send the form but will set a hidden value in the form?

  5. #5
    Non-Member
    Join Date
    Oct 2009
    Posts
    1,852
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There is good javascript forum on the sitepoint at your service

  6. #6
    rajug.replace('Raju Gautam'); bronze trophy Raju Gautam's Avatar
    Join Date
    Oct 2006
    Location
    Kathmandu, Nepal
    Posts
    4,013
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    HTML Code:
    <!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" xml:lang="en" lang="en">
    
    <head>
    	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    	<meta name="author" content="1012904284" />
    
    	<title>Test</title>
    	<script type="text/javascript">
    		function saveValue(color){
    			var str = "document.frm1.hidField.value = document.frm1.hidField.value.replace(/\,?" + color + "/i, '');";
    			eval(str);
    			if(document.frm1.hidField.value == '')
    				document.frm1.hidField.value = color;
    			else
    				document.frm1.hidField.value = document.frm1.hidField.value + ',' + color;
    			alert(document.frm1.hidField.value);
    		}
    	</script>
    </head>
    
    <body>
    
    <form method="post" accept="" name="frm1">
    	<img src="test1.png" id="img1" border="0" onclick="saveValue('Black');" /> Black<br />
    	<img src="test1.png" id="img2" border="0" onclick="saveValue('Yellow');" /> Yellow<br />
    	<img src="test1.png" id="img3" border="0" onclick="saveValue('Red');" /> Red<br />
    	<input type="hidden" name="hidField" id="hidField" value="" />
    </form>
    
    </body>
    </html>
    Hope this will guide you to the right direction.
    Mistakes are proof that you are trying.....
    ------------------------------------------------------------------------
    PSD to HTML - SlicingArt.com | Personal Blog | ZCE - PHP 5


Bookmarks

Posting Permissions

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