Automatically get input ID value and pass using ajax

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"><a href="#">'.$result.'</a></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.

<input type="hidden" name="'.$result.'" value="'.$result.'"> you can see it in first code snippet in my question. Send by php script. — Chandimal Harischandra
– Chandimal Harischandra, Commented Jan 23, 2016 at 19:05

Simon Davies · Accepted Answer · 2016-01-24 11:46:30Z

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

edited Jan 24, 2016 at 11:46

answered Jan 23, 2016 at 19:05

Simon Davies

3,6949 gold badges45 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Chandimal Harischandra Over a year ago

There are 5 links ( with same class based on number of folders). This is not working. I think this part var path = $(this).data('path'); . what is the ''path' means?

Simon Davies Over a year ago

its the data attribute value data-path="'.$result.'"so on clicking a link you then get the data-path value and assign it to the path variable to then send via ajax

Chandimal Harischandra Over a year ago

But there are 5 links with data-path attribute. And all links with same class. So $(this).data('path'); means $('.folderLink').data('path'); right? I'm wondering which value. This returns 5 values and return value assign to variable on the other hand. I want to get exactly one value relevant to link which clicked.

Chandimal Harischandra Over a year ago

number of links is dynamic based on number of folders. We can't use ids

Simon Davies Over a year ago

$(this).data('path') will relate to the currently click event/link so it will get the link that is clicked and not all.

|

Vishwas Singh Chouhan · Accepted Answer · 2016-01-23 19:15:11Z

0

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.

answered Jan 23, 2016 at 19:15

Vishwas Singh Chouhan

8916 silver badges11 bronze badges

1 Comment

Chandimal Harischandra Over a year ago

In this case inputs generated dynamically. No fixed number of inputs. So every time we have to write functions to track click event on each input

DiddleDot · Accepted Answer · 2016-01-23 19:15:55Z

0

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);
         }
      });
});

answered Jan 23, 2016 at 19:15

DiddleDot

7435 silver badges18 bronze badges

Collectives™ on Stack Overflow

Automatically get input ID value and pass using ajax

3 Answers 3

7 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related