Trying to get a value from a button using javascript

Question

So I have multiple delete buttons on a table and each button has there own unique id. I am trying to get this value via javascript but I can't get it to work at all.

Here is a section js that is working properly and loads the correct html (this is ran for each movie):

function createRow(movie) {
        movie.NewDate = new Date(movie.ReleaseDate);
        return '<tr><td><img class="movieImage" src="' +
            movie.ImageLink +
            '" alt="' +
            movie.Title +
            ' Image" style="width:50px;height:75px">' +
            '<td>' +
            movie.Title +
            '</td><td>' +
            movie.NewDate.toLocaleDateString("en-US") +
            '</td><td><button type="button" class="removeButton" value="' + movie.DVDID + '">Delete</button></td></tr>';
    }

And here is the js where I am trying to retrieve the id:

$(document)
.ready(function () {
    var deleteButtons = $(".removeButton");
    deleteButtons.each(function (index) {
        var currentButton = $(this);
        var buttonValue = currentButton.val();
        currentButton.click(function () {
            alert(buttonValue);
        });
    });
});

I found the last snippet via Click one of multiple buttons, put value in text input

Right now just getting a proper alert would be sufficient.

grinry · Answer 1 · 2016-06-18T18:17:47.287

0

Your javascript should look like this:

$(document).ready(function () {
    var deleteButtons = $(".removeButton");
    deleteButtons.on('click', function() {
        alert($(this).attr('value'));
    });
});

Also, since you adding these buttons dynamicly with javascript, you may need to rebind button click events after you add new row. Also binding should be done after loading button html to DOM.

edited Jun 18 '16 at 18:17

answered Jun 18 '16 at 18:12

grinry

421
1
7
17

Sorry i think i misread, you need to only read, or get value after clicking on it? – grinry Jun 18 '16 at 18:17
That is correct. And also to I didn't see your comment before on binding but this script is the last one in my scripts section I believe so the page should be completely loaded before it gets ran. – Tyler Howey Jun 18 '16 at 18:21
Do you get any empty `alert` or there is no action at all? – grinry Jun 18 '16 at 18:22
If you do get empty alert, try using this `alert($(this).attr('value'));`, as @Rahul suggested. – grinry Jun 18 '16 at 18:23
There is no response at all. It hits the break point of ($document).ready but nothing else inside of it – Tyler Howey Jun 18 '16 at 18:23
`console.log($('.removeButton'));` - will help to see if jquery able to find your buttons at all – grinry Jun 18 '16 at 18:26
That is what I get, I'm somewhat new to js so not sure what it means but it doesn't look like it found anything – Tyler Howey Jun 18 '16 at 18:33

score 0 · Accepted Answer · answered Jun 18 '16 at 18:28

0

Have you tried this approach: $("#tableId").on("click", ".removeButton", function(){ alert($(this).attr("value")); })

This "on" binds all the ".removeButton" elements with the given function when click is triggered.

answered Jun 18 '16 at 18:28

luckystars

1,704
12
12

score 0 · Answer 3 · answered Jun 18 '16 at 18:32

Since you are creating buttons dynamically, you won't be able to reach them properly because when the javascript was initiated they didn't exist in the DOM. So in order for you to be able to find the buttons, you'll have to look at the document scope and then find which button (class) you click on, like so:

$(document).on('click', '.removeButton', function(){
    console.log($(this).val())
})

See fiddle for complete example

Trying to get a value from a button using javascript

3 Answers3