CODEWITHSUNDEEP
javascriptjqueryhtml
Shiva Krishna Bavandla
Shiva Krishna Bavandla

Reputation: 26678

get the actual clicked button attributes in jquery

Actually I am trying to preview an image before uploading it to server, so below is the html code

<html>
<script>
function readURL(input) {
    if (input.files && input.files[0]) 
    {.......}}

$("#selectedFile").change(function(){
    readURL(this);
}); 
</script>

<body>

  <input id="selectedFile" type="file" name="banner_image"/>

  <input type="button" value="Upload image"   onclick="document.getElementById('selectedFile').click();" class="btn btn-large big_btn"/>

</body>
</html>

According to my form design functionality I need to click a button to upload a file to server as above and from that I am clicking the input file field value and sending that file field data to readURL() function above.

So when I tried to get the id, name, value attributes in change function I am getting the attributes of input file field, so can I able to get the values of button attributes in the change function?

Upvotes: 0

Views: 111

Answers (1)

Lee Bailey
Lee Bailey

Reputation: 3624

One option is to store the clicked button in a global variable 


var clickedBtn = null;

function readURL(input) {
    if (input.files && input.files[0]) 
    {
        alert(input);
    }
}

$("#selectedFile").change(function(){
    if (clickedBtn != null)
    {
        alert(clickedBtn.attr('class')); // get the class attribute, for example
    }
    readURL(this);
}); 


$('.file-upload-btn').click(function(){
    clickedBtn = $(this);
    $("#selectedFile").click();
});

Then in your HTML you should remove the onclick attribute from your buttons and add the file-upload-btn class

Upvotes: 2

Related Questions