如何使用Jquery在单击的div内获取输入标签的值？

Question

I have a following Ajax success function which prints the folder div in the DOM when user load the page or add the folder.

for(var i in output.dirs){
        //console.log(output.dirs[i]);
        var html = '<div class="col-sm-3 text-center" id="img-folder"><input type="hidden" id="folder-names" name="open-folder" value="'+output.dirs[i].name+'"/>';
            html+='<div class="mid-folder">  <i class="fa fa-folder fa-5x"></i>';
            html+='<h3 class="title-folder">'+output.dirs[i].name.substr(0,15)+".."+'</h3></div>';
            $(".folders").append(html);

And I want to add yet another Ajax request when each folder is clicked. I want to send the folder name of the folder that is being clicked and send it through the Ajax to the PHP controller, so that I could retrieve the images inside that folder. For that I attached an input tag with hidden attribute to print out the folder name as value, so that it could be easy for me to get the value using .val().

But the problem here is that how could I know which folder has been clicked and what's the value of the <input> tag which belongs to that div, since every div printed will have the same id "img-folder".

Looking at some alternatives, I found this:

$("#img-folder").each(function(i){
$(this).on("click",function(){
   // Now how would I select the <input> tag value here, so that I could    pass the value into the controller? 
});
});

What I want to do now is to catch the value/folder name of the folder that being clicked and send the value to my ajax function which is something like this:

// function for showing the images and contents inside the folders. 
  $(function(){
    $(document.body).on('click',"#img-folder",function(e){
     console.log($("#folder-names").val());
      //e.preventDefault();
      $.ajax({
        url:'<?php echo base_url("Welcome/show_image"); ?>',
        type:'POST',
        data:$('#folder-name').val(),
        success:function(data){
          console.log(data);

        },
      });
    })
  })

Any suggestion or any other logic to solve this problem? It would be great.

Answer 1

You are duplicating ids of element. IDs must be unique. You can rather give same class. like this:

for(var i in output.dirs){
    //console.log(output.dirs[i]);
    var html = '<div class="col-sm-3 text-center" class="img-folder"><input type="hidden" class="folder-names" name="open-folder" value="'+output.dirs[i].name+'"/>';
        html+='<div class="mid-folder">  <i class="fa fa-folder fa-5x"></i>';
        html+='<h3 class="title-folder">'+output.dirs[i].name.substr(0,15)+".."+'</h3></div>';
        $(".folders").append(html);

and then use class selector to find element with class folder-names in clicked img-folder :

 $(function(){
$(document.body).on('click',".img-folder",function(e){
 var folderval = $(this).find(".folder-names").val();
 console.log($(this).find(".folder-names").val());
  //e.preventDefault();
  $.ajax({
    url:'<?php echo base_url("Welcome/show_image"); ?>',
    type:'POST',
    data:folderval ,
    success:function(data){
      console.log(data);

    },
  });
 });
});

Answer 2

This is what you need -

Using jQuery this , you will get attribute value of that element. So, in your case it is input . You will store that attribute value and pass it in AJAX call.

$(this).on("click",function(){
   var inputValue = $(this).attr('value');
        $.ajax({
    url:'<?php echo base_url("Welcome/show_image"); ?>',
    type:'POST',
    data: inputValue ,
    success:function(data){
      console.log(data);

    },
  });
});