Find value of multiple buttons with javascript

Question

I need to have multiple buttons on page (created through a PHP loop) - there's not fixed number of buttons as there'll be one for each record displayed. I'd like to get the value of that button with javascript when it is clicked.

So far the html looks like:

<button id="update[0]" value="test">Update</button>
<button id="update[1]" value="test">Update</button>
<button id="update[2]" value="test">Update</button>
etc....

and my script is:

$(document).ready("#update").click(function() {
    var updateId = $("#update").val
    alert(updateId);
});

So far the script detects when any #update[] button is clicked but how do I know the index of the particular button in order to get the value (i.e. if #update[38] is clicked how do I know it's #update[38] so I can find the value of that particular button?

Thanks.

Are you just trying to get the value stored in the `value` attribute? — Mike Cluck, Oct 01 '15 at 16:44
You can do this completely client-side with JSON objects, there is no need do it in PHP it just creates more load on your server... — Jordan Davis, Oct 01 '15 at 16:53

score 1 · Answer 1 · answered Oct 01 '15 at 16:52

You do not want to chain off the document ready like you are as its returning the document.

$(document).ready("#update").click(function() {

So you are capturing the document.click not not button.click so when you reference $(this).val() you will get document.value which does not exist.

Should be:

$(document).ready(function () {
    $("button").click(function () {
        //no reason to create a jQuery object just use this.value
        var updateId = this.value;
        alert(updateId);
    });
});

http://jsfiddle.net/SeanWessell/2Lf6c3fx/

Good point, overlooked that detail, also updated my answer just for the sake of completeness. — Niki van Stein, Oct 01 '15 at 16:58

score 0 · Answer 2 · edited May 23 '17 at 11:44

0

I believe you meant to use

var updateId = $("#update").val()

With jQuery you can use $(this).val()
You could also get the text of the button using .text()
With pure Javascript you could use .value if the button has a value attribute

See this: Javascript Get Element Value

edited May 23 '17 at 11:44

Community

1
1

answered Oct 01 '15 at 16:45

Erik

1
1

score 0 · Answer 3 · answered Oct 01 '15 at 16:45

Use the "this" key word.

$(document).ready("#update").click(function() {
    var updateId = $(this).val();
    alert(updateId);
});

The this keyword in javascript allows you to reference the particular instance of the object you are interacting with.

Also, add "()" to the end of val.

Niki van Stein · Answer 4 · 2015-10-01T16:59:39.690

0

I would suggest the following

<button id="0" class="updatebutton" value="test">Update</button>
<button id="1" class="updatebutton" value="test">Update</button>
<button id="2" class="updatebutton" value="test">Update</button>

Use a class to apply your click function.

$(document).ready(function () {
    $("updatebutton").click(function () {
        var updateId = this.id;
        alert(updateId);
    });
});

And use the id to specify the index of the button.

edited Oct 01 '15 at 16:59

answered Oct 01 '15 at 16:46

Niki van Stein

10,564
3
29
62

Shouldn't the class be update or the the code .updatebutton ? – brianlmerritt Oct 01 '15 at 16:47
@Lewis, yes you can, check http://stackoverflow.com/questions/5672903/can-i-have-a-div-with-id-as-number – Niki van Stein Oct 01 '15 at 16:48
@Lewis, it is valid, but probably not best practice. – garryp Oct 01 '15 at 16:48
$(this).id will be undefined as this is the jQuery object which doesn't have an id property. You can use this.id or $(this)[0].id – Sean Wessell Oct 01 '15 at 16:59
Thanks! (I should test my answer next time first..) – Niki van Stein Oct 01 '15 at 17:00

score 0 · Answer 5 · answered Oct 01 '15 at 17:03

The trick is to give all your buttons the same class and then use $(this) to find out which button was clicked. Once you know the button, then you can check for any of its attributes like id, value or name.

$(function() {

  $(".xx").on("click", function(evt) {
    var clicked_button = $(this);
    alert(clicked_button.attr("value"));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<button id="update_1" class="xx" value="test1">Button 1</button>
<button id="update_2" class="xx" value="test2">Button 2</button>
<button id="update_3" class="xx" value="test3">Button 3</button>

Hello sir, What if we want the button values in one hidden input as "value='test1,test2,test3' " @LK-4D4 — always-a-learner, Mar 14 '17 at 05:55

score 0 · Answer 6 · answered Oct 01 '15 at 17:14

Hi there a few things wrong with your javascript there.

You are attaching onClick to the document! The function ready returns the document.

Wrong:

$(document).ready("#update").click(function() {

Right:

$(document).ready(function () { $(valid_selector).click...

You are attempting to refetch the button with $('#update'), which 1 doesn't fetch anything, and two if it did would return all of the buttons. So use $(this) in the scope of the click function instead to refer to the button clicked.

Here is your javascript corrected:

https://jsfiddle.net/ffkekpmh/

//When the document is ready call this function
$(document).ready(function () {

    //Select all buttons whoes id starts with update
    //https://api.jquery.com/category/selectors/attribute-selectors/
    $('button[id^="update"]').click(function() {

        //Store the id attribute from the clicked button
        var updateId = $(this).attr("id");

        //Store the value attribute from the clicked button
        var value = $(this).attr("value");


        alert("You clicked button:"+updateId+" with value: "+value);

    });

});

Thanks Dave! Sean's answer worked too but triggered on every button on the page (rather than just the update buttons). Your solution works great for me. — Step29, Oct 01 '15 at 18:04
I've up voted your question so it is no longer -1. Could I perhaps please get a correct answer on this? @Step29 — Dave Thomas, Oct 01 '15 at 18:36

Find value of multiple buttons with javascript

6 Answers6