save clicked element´s path in variable

Question

my html:

<form action="submitPage.php" method="post" onsubmit="savePathInVar();"> 
  <table>
  <tr>
    <td><img src="<?php echo $path; ?>" onclick="changecolor(this);" /></td>
    <td><img src="<?php echo $path; ?>" onclick="changecolor(this);" /></td>
  </tr>
    <input type="hidden" value="ClickedImaged" />
    <input type="submit" value="Submit" />          
  </table>
</form>

ps: $path = "inventory_images/$id.jpg"; my function changecolor():

function changecolor(img)
{
var images = document.getElementsByTagName("img");
for(var i=0,j=images.length; i<j; i++)
{
    images[i].style.borderColor="#000";
}
img.style.borderColor="#F00";
//Operate on img location as before
savePathInVar(img.src);
}

my function savePathInVar():

function savePathInVar(ImgLocation)
{
//How do i save the path of the clicked image in a variable now?
}

How do i save the path of the clicked image in a variable now? And how do i get this variable into my input-hidden-field below my table? Anyone who can help me?
would be really nice if anyone could help me.. i am quite new to javascript :) greetings!

score 0 · Answer 1 · edited May 23 '17 at 11:43

0

Correct me if I'm wrong, but you want to save the path of the clicked image in a string, and save this string in the value of your input? In this case, it's pretty simple. Notice the added names of the form and the input.

<form name="form_name" action="submitPage.php" method="post" onsubmit="savePathInVar();"> 
  <table>
  <tr>
    <td><img src="<?php echo $path; ?>" onclick="changecolor(this);" /></td>
    <td><img src="<?php echo $path; ?>" onclick="changecolor(this);" /></td>
  </tr>
    <input name="input_name" type="hidden" value="ClickedImaged" />
    <input type="submit" value="Submit" />          
  </table>
</form>

function savePathInVar(ImgLocation)
{
    //if you want it to be a local variable
    var str = ImgLocation;
    //if you want it to be a global variable - to be handled with care*
    str = ImgLocation;
    document.form_name.input_name.value = str; 

}

* Be careful when you use global variables. You can find a bit more details here: Difference between variable declaration syntaxes in Javascript (including global variables)?

edited May 23 '17 at 11:43

Community

1
1

answered May 23 '13 at 09:01

Stilltorik

1,662
4
19
31

yes, i want to save the path of the clicked image in a string and so on :) by clicking on "submit" i want to output the "path" of the chosen image. so this is my submitPage.php: `$clickedImage = $_POST['ClickedImaged']; echo $clickedImage;` But i just get "ClickedImage" displayed, not the path, whats wrong? greetings – user2390560 May 23 '13 at 09:15
I'm not familiar with php, so I can't say exactly what your program is doing. However, what is your $_POST['ClickedImaged'];? Are you sure you have the right parameter value? in the forme, the "ClickedImaged" is simply the value displayed, it is not an id or a name. – Stilltorik May 23 '13 at 09:45
so what do i have to write/add to display the path of the clicked image in submitPage.php ? – user2390560 May 23 '13 at 10:06
I have no way of testing, but I'm guessing it should be something similar to $_POST['input_name']; – Stilltorik May 23 '13 at 10:23

score 0 · Answer 2 · answered May 23 '13 at 09:07

Just save the var and then set it to the field.

var imgLoc;

function savePathInVar(ImgLocation)
{
    imgLoc = ImgLocation
    document.getElementById('hiddenImgLoc').value = ImgLocation
}

Example: (I've removed the hidden attribute on the field so you can see it.) http://jsfiddle.net/E4RG3/

save clicked element´s path in variable

2 Answers2