Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>html:</p> <pre><code>&lt;form&gt; &lt;input type="hidden" name="prod"&gt; &lt;div id="thumbs"&gt; &lt;!-- Dynamically created thumbnails start --&gt; &lt;img id="pic-1" src="url"&gt; &lt;img id="pic-2" src="url"&gt; &lt;img id="pic-3" src="url"&gt; &lt;!-- Dynamically created thumbnails end --&gt; &lt;/div&gt; &lt;/form&gt; </code></pre> <p>js:</p> <pre><code>$('#thumbs').delegate('img', 'click', function() { var $this = $(this); // Clear formatting $('#thumbs img').removeClass('border-highlight'); // Highlight with coloured border $this.addClass('border-highlight'); // Changes the value of the form field "prod" to the value of img.id $('[name="prod"]').val( $this.attr('id').substring($this.attr('id').lastIndexOf('-')+1) }); </code></pre> <p>fiddle <a href="http://jsfiddle.net/9rFKB/42/" rel="nofollow">link</a></p> <p>explanation: js/jquery catches the <code>click</code> on all <code>img</code> in <code>#thumbs</code> </p> <p>then removes all highlight effects and adds to the specific one, </p> <p>then it takes the image <code>$this</code> and gets it <code>id</code> value, it splits it at the <code>-</code> symbol and takes the scondpart (the value) and sets the value of <code>&lt;input type="hidden" name="prod"&gt;</code> to it.</p> <p>you dont have to change any php, since <code>&lt;input type="hidden" name="prod"&gt;</code> sends to <code>$_POST['prod']</code> the <code>name</code> attribute does the trick</p> <p>if you use the fiddle version, just remove the alert line... its just for debug reasons since js doesn't provide proper debug mechanisms</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload