Question 170061 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Can I get an ID or value from Dropify input when clicking the remove button if there’s a default value?

<input type="file" name="galleryImages{{ $key }}[]"
value="1"
data-default-file="{{ asset('storage/services/' . $service->slug . '/gallery/' . $key . '/' . $imageItem) }}"
class="dropify" data-id="{{ $key }}"
>

For each input field i want to get back the value of that clicked input.

enter image description here

   $(document).ready(function() {
        $('.dropify').dropify(); //initializing dropify

        //Handling click event on Remove button of dropify
        $('.dropify-clear').click(function(e) {
            e.preventDefault();
            console.log(e.target.value);
            alert('Remove Hit', ); //Here you can manage you ajax request to delete
            //file from database.
        });
    });
Tags:

2

Answers


  1. 0

    To get the ID or value of the Dropify input when clicking the remove button, you can use the following code:

    $(document).ready(function() {
    $('.dropify').dropify(); // Initializing dropify

    // Handling click event on Remove button of dropify
    $('.dropify-clear').click(function(e) {
        e.preventDefault();
        
        // Getting the value of the clicked input
        var inputValue = $(this).siblings('.dropify-wrapper').find('input[type="file"]').val();
        console.log(inputValue);

        // Getting the ID of the clicked input
        var inputId = $(this).siblings('.dropify-wrapper').find('input[type="file"]').attr('id');
        console.log(inputId);

        // Perform your desired actions with the value and ID
        // ...

        alert('Remove Hit'); // Here you can manage your ajax request to delete the file from the database.
    });
});

    In the code above, $(this) refers to the clicked remove button. By traversing the DOM, we can find the corresponding Dropify input element and retrieve its value using .val(). Similarly, the ID of the input element can be obtained using .attr('id').

    Please note that this solution assumes that the structure of your HTML and the classes used by Dropify remain unchanged. If there are any modifications to the structure or class names, you may need to adjust the code accordingly.

    Login or Signup to reply.
  2. 0

    To get the ID or value of the Dropify input on clicking the remove button (dropify-clear button), you can use the following code:

    $('.dropify-clear').click(function(e) {
      e.preventDefault();

      // Getting the default value of the clicked input
      var defaultValue = $(this).siblings('input[type="file"]').attr('data-default-file');
      console.log(defaultValue);

      // Getting the value of the clicked input
      var inputValue = $(this).siblings('input[type="file"]').val();
      console.log(inputValue);

      // Getting the ID (data-id) of the clicked input
      var inputId = $(this).siblings('input[type="file"]').attr('data-id');
      console.log(inputId);

      alert('Remove Hit'); // Here you can manage your code to perform anything what you want
  });

    In the code above, $(this) refers to the clicked remove button. we can find the corresponding Dropify input element and retrieve its default value using .attr('data-default-file'). Similarly, the ID of the input element can be obtained using .attr('data-id').

    Please note that we cann’t get the default value of the dropify input by .val() function because the default value is placed in the attribute (data-default-file)

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search