Automatically get input ID value and pass using ajax - php

Question

I have following code to get directories of folder ,
<?php
$path = 'templates';
$files = scandir($path);
foreach($files as $result) {
if ($result != "." && $result != ".." && $result != "desktop.ini")
{
echo '<img src="img/folder.png" width="40px"><a name="'.$result.'" class = "folderLink" href="#">'.$result.'</a> <input type="hidden" name="'.$result.'" value="'.$result.'"></img><br><div class="fileListInner"></div>';
}
}
?>
Above code returns dynamic number of folder names. This code is working fine and displayed folder list on success. Here is my form,
<form id="t-files">
<a style="margin-left:160px;" class="list-directories" href="#">Select File Path</a><br><br>
<div id="fileList"></div>
</form>
Now I want to go inside each folder and list sub folders. To do it I get class name of each link and on click even call ajax function. here is the code,
// load directories - inner (settings)
$(document).on("click",".folderLink",function(e){
e.preventDefault();
$.ajax({
type: 'post',
url: 'list-directories-inner.php',
dataType: 'text',
data: $('#t-files').serialize(),
success: function (data) {
$('#fileList').html(data);
}
});
exit();
});
And list-directories-inner.php file,
<?php
foreach ($_POST as $key => $value){
echo "".$key."<br>";
}
$path = 'templates';
$files = scandir($path);
foreach($files as $result) {
if ($result != "." && $result != ".." && $result != "desktop.ini")
{
// echo '<img src="img/folder.png" width="40px">'.$result.'</img><br>';
}
}
?>
How can I pass clicked link( hidden input) name value instead of pass all hidden values? Because in the list-directories-inner.php file I want to get clicked link value to set path. Something like 'templates/post value'. I'm thinking for hours. Please help.

Answer 1

Not sure which link your talking about ect but I gather its the following:
<img src="img/folder.png" width="40px"><a name="'.$result.'" class = "folderLink" href="#">'.$result.'</a> <input type="hidden" name="'.$result.'" value="'.$result.'"></img><br><div class="fileListInner"></div>
If so you could add the $resultvalue to the link as a data attribute so:
<img src="img/folder.png" width="40px" /><a name="'.$result.'" class = "folderLink" href="#" data-path="'.$result.'">'.$result.'</a><br><div class="fileListInner"></div>
Notice the data-pathattribute. Then get the value on the click event.
$(document).on("click",".folderLink",function(e){
e.preventDefault();
var path = $(this).data('path');
getInnerDirectoryList(path);
});
function getInnerDirectoryList(path){
$.ajax({
type: 'post',
url: 'list-directories-inner.php',
dataType: 'text',
data: {path_url: path},
success: function (data) {...},
error: function(msg){....}
});
}
Might have something like the above?
here is a jsbin of a simple version:
https://jsbin.com/yajefi/edit?html,js,output

Answer 2

You should try declaring a function that takes the input id of the clicked folder which will contain the required field instead of the generic function which gets called on every click of a .folderLink class.

Answer 3

Simon's answer should work, but here is an alternative.
You can get the value of the hidden input (since it's the same value as the hidden input's name) like this.
$(document).on("click",".folderLink",function(e){
var folder = $(this).siblings('input:hidden').val();
e.preventDefault();
$.ajax({
type: 'post',
url: 'list-directories-inner.php',
dataType: 'text',
data: {folder: folder},
success: function (data) {
$('#fileList').html(data);
}
});
});