title: how to get image´s path with onclick and save it in a variable
body: <p>here is my html:</p>
  
  <pre><code>&lt;form action="submitPage.php" method="post" onsubmit="savePathInVar();"&gt; 
    &lt;table&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;img id="' . $id . '" src="inventory_images/' . $id . '.jpg" onclick="changecolor();" /&gt;&lt;/td&gt;
      &lt;td&gt;&lt;img id="' . $id . '" src="inventory_images/' . $id . '.jpg" onclick="changecolor();" /&gt;&lt;/td&gt;
    &lt;/tr&gt;
      &lt;input type="hidden" value="ClickedImaged" /&gt;
      &lt;input type="submit" value="Submit" /&gt;          
    &lt;/table&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Now i need a function <code>changeColor()</code> to highlight the one clicked image..
  and the function <code>savePathInVar()</code> to save the clicked image´s path in the input-hidden-field.
  Anyone who can help me?
  ps: this is where <code>$id</code> comes from:</p>
  
  <pre><code>$sql = mysqli_query($mysqli, "SELECT * FROM products WHERE id='$id' LIMIT 1");
  $productCount = mysqli_num_rows($sql); // count the output amount
  if ($productCount &gt; 0) {
      // get all the product details
      while($row = mysqli_fetch_array($sql)) {
           $id = $row["id"];
           $id = "img.$id";
                       blabla...
  </code></pre>
  
  <p>would be really nice if anyone could help me.. i am quite new to javascript :)</p>
  
  <p><hr>
  <strong>This was added to the answer by OP. It belongs to the question</strong></p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>Am I doing someone's homework</p>
  
  <p>UPDATE 3, my whole code:</p>
  
  <pre><code>&lt;script&gt;
  function changecolor(img)
  {
  var images = document.getElementsByTagName("img");
  for(var i=0,j=images.length; i&lt;j; i++)
  {
      images[i].style.borderColor="#000";
  }
  img.style.borderColor="#F00";
  //Operate on img location as before
  savePathInVar(img.src);
  }
  function savePathInVar(ImgLocation)
  {
  var form = document.createElement("form");
  var inp = document.createElement("input");
  inp.name="imgSrc";
  inp.value=ImgLocation;
  form.appendChild(inp);
  form.method="post";
  form.submit();//this will refresh the page
  }
  &lt;/script&gt;
  
  &lt;form name="form_name" action="submitPage.php" method="POST" onsubmit="savePathInVar();"&gt;
  &lt;table&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;img src="&lt;?php echo $path; ?&gt;" onclick="changecolor(this);" /&gt;&lt;/td&gt;
      &lt;td&gt;&lt;img src="&lt;?php echo $path; ?&gt;" onclick="changecolor(this);" /&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;input type="submit" value="Submit" /&gt;
  &lt;/table&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>And my submitPage.php :</p>
  
  <pre><code>&lt;?php
  error_reporting (E_ALL | E_STRICT);
  ini_set ('display_errors' , 1);
  $imgSrc = $_POST['imgSrc'];
  echo $imgSrc;
  ?&gt;
  </code></pre>
  
  <p>when i mark an image and click "submit", i get:</p>
  
  <blockquote>
    <p>Notice: Undefined index: imgSrc in /srv/disk8/1391019/www/myfirststore.eu.pn/submitPage.php on line 5 </p>
  </blockquote>
  
  <p>what do i have to do ?? greetings and thanks for your help.</p>