javascript - how to get the value from button on click - Stack Overflow

admin管理员组

文章数量:1326287

I am having some buttons which are created dynamically based on the number of phone numbers present.Suppose I have 3 names in DB so there will be three buttons.So when I click on the 1st button then it should give the value of first button,if 2nd is clicked then 2nd button value should display.This is simple jsfiddle which describes about my requirement.I thought of assigning the each button a different id which should be the phone number.In the jsfiddle when i am clicking on a particular button then alert pops but it does not give any value.

i did like this

$('.btn').click(function(){ 
var number1 = $('#s2').val();
alert(number1);
});

I am having some buttons which are created dynamically based on the number of phone numbers present.Suppose I have 3 names in DB so there will be three buttons.So when I click on the 1st button then it should give the value of first button,if 2nd is clicked then 2nd button value should display.This is simple jsfiddle which describes about my requirement.I thought of assigning the each button a different id which should be the phone number.In the jsfiddle when i am clicking on a particular button then alert pops but it does not give any value.

i did like this

$('.btn').click(function(){ 
var number1 = $('#s2').val();
alert(number1);
});

• javascript
• jquery
• html

Share Improve this question Follow asked Oct 23, 2013 at 11:37 SpringLearnerSpringLearner 13.9k2020 gold badges8181 silver badges117117 bronze badges 4

• Which value are you trying to retrieve? Your button doesn't have any value attribute. – Alvaro Commented Oct 23, 2013 at 11:39
• @Alvaro can I get the ID of each button – SpringLearner Commented Oct 23, 2013 at 11:40
• To get the id you should do: var number1 = $('#s2').attr('id'); – Alvaro Commented Oct 23, 2013 at 11:42
• @Alvaro thanks you should post it as answer so that i can upvote.Well in the jsfiddle I have textfield which accepts number.So if i click button1 then s1 will be displayed in the textfield,if button2 then s2 so that user will not be required to type the number.Can you please help me in this? – SpringLearner Commented Oct 23, 2013 at 11:53

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

You have to use event delegation using jQuery's on() method. From its documentation:

When a selector is provided, the event handler is referred to as delegated. The handler is not called when the event occurs directly on the bound element, but only for descendants (inner elements) that match the selector. jQuery bubbles the event from the event target up to the element where the handler is attached (i.e., innermost to outermost element) and runs the handler for any elements along that path matching the selector.

In your case, you'll need to delegate the .btn click event to an ancestor which exists prior to that element being dynamically added to the page:

$('body').on('click', '.btn', function() {
    var number1 = $('#s2').val();
    alert(number1);
});

The closer you get to the .btn element, the better, so unless your document's body is the nearest non-dynamic ancestor then you'll want to change this to something a bit closer.

---

Edit: Further question in ments:

can I get the ID of each button

To get the id of each button, simply use this.id:

$('body').on('click', '.btn', function() {
    var id = this.id;
    alert(id);
});

---

Edit 2: Further question in ments

So as I said,ID are numbers.So if i click button1 then it will print s1 in the inputfield.Can you please tell me how to do?

As your input has an id of "number", you can simply use jQuery's .val() method to set the value of the input to the id of the clicked button:

$('body').on('click', '.btn', function(){ 
    $('#number').val(this.id);
});

Working JSFiddle demo.

$(document).on('click', '.btn', function(){ 
   alert($(this).val()); 
});

Should work. The "on" is a way of working with dynamically placed elements.

Put value attribute in button input

  <button type="button" class="btn" value="test2" >test</button>
  <button type="button" class="btn" value="test1" id="s1">test</button>
  <button type="button" class="btn" value="test" id="s2">test</button>

And then use script

 $('.btn').on('click', function() {
       var number = $('#s2').val();//get value

 });

If you want to get the id of the clicked button you should use attr:

$('.btn').click(function(){ 
   var number1 = $('#s2').attr('id');
   alert(number1);
});

本文标签： javascripthow to get the value from button on clickStack Overflow