1

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.

Improve this question
2
  • Are you just trying to get the value stored in the value attribute? Commented Oct 1, 2015 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... Commented Oct 1, 2015 at 16:53

6 Answers 6

Reset to default
1

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/

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Good point, overlooked that detail, also updated my answer just for the sake of completeness.
0

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.

Improve this answer

Comments

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

Improve this answer

Comments

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.

Improve this answer

5 Comments

Shouldn't the class be update or the the code .updatebutton ?
@Lewis, yes you can, check stackoverflow.com/questions/5672903/…
@Lewis, it is valid, but probably not best practice.
$(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
Thanks! (I should test my answer next time first..)
0

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>

Improve this answer

1 Comment

Hello sir, What if we want the button values in one hidden input as "value='test1,test2,test3' " @LK-4D4
0

Hi there a few things wrong with your javascript there.

  1. 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...
  1. 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);

    });

});
Improve this answer

2 Comments

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.
I've up voted your question so it is no longer -1. Could I perhaps please get a correct answer on this? @Step29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.