Jquery: get value of closest button

Question

Here its my html code

<div class="panel-footer">
<div class="input-group">
<input id="btn-input" class="form-control input-sm chat_input message" type="text" placeholder="Write your message here..." ng-model="messageToSend">
<span class="input-group-btn">
<button id="btn_chat" class="btn btn-primary btn-sm btn_chat" value="79">Send</button>
</span>
</div>

<div class="input-group">
<input id="btn-input" class="form-control input-sm chat_input message" type="text" placeholder="Write your message here..." ng-model="messageToSend">
<span class="input-group-btn">
<button id="btn_chat" class="btn btn-primary btn-sm btn_chat" value="80">Send</button>
</span>
</div>
</div>

And here its my jquery code

$(document).on('keypress', '.message', function (e) {
    if (e.which == 13) {
    var msg = $(this).val();
    var id = $(this).closest('span').next('button.btn_chat').val();
    alert(msg);
    alert(id);
}
e.preventDefault();
}); 

stuck on id it shows always undefine.

how can I get button value

Answer 1

I have inserted code. here it is with id not giving undefined

 $(document).on('keypress', '.message', function (e) { if (e.which == 13) { var msg = $(this).val(); var id = $(this).next('span').find('button.btn_chat').val(); alert(msg); alert(id); } e.preventDefault(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="panel-footer"> <div class="input-group"> <input id="btn-input" class="form-control input-sm chat_input message" type="text" placeholder="Write your message here..." ng-model="messageToSend"> <span class="input-group-btn"> <button id="btn_chat" class="btn btn-primary btn-sm btn_chat" value="79">Send</button> </span> </div> <div class="input-group"> <input id="btn-input" class="form-control input-sm chat_input message" type="text" placeholder="Write your message here..." ng-model="messageToSend"> <span class="input-group-btn"> <button id="btn_chat" class="btn btn-primary btn-sm btn_chat" value="80">Send</button> </span> </div> </div> 

Answer 2

the span is the next sibling and the button is a descendant of the span so using closest and next will not work.

The closest() is used to find a ancestor element and next() to find the next sibling element.

In your case you should use .next() to find the span and use .find() to find the descendant button

var id = $(this).next('span').find('button.btn_chat').val();

Demo: Fiddle

---

Another easier solution is to use a data-* attribute to store the value in the input element itself like

<input id="btn-input" class="form-control input-sm chat_input message" type="text" placeholder="Write your message here..." ng-model="messageToSend" data-id="79">

then

var id = $(this).data('id');

Answer 3

$(this).closest('span') will search for the nearest parent span tag of the text box, instead you need adjacent span tag. Try using next() with find() :

 $(function() { $('input:text.message').on('keypress', function(e) { if (13 !== e.which) return; var btn = $(this).next().find('.btn_chat'); console.log(this.value, btn.val()); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="panel-footer"> <div class="input-group"> <input id="btn-input" class="form-control input-sm chat_input message" type="text" placeholder="Write your message here..." ng-model="messageToSend"> <span class="input-group-btn"> <button id="btn_chat" class="btn btn-primary btn-sm btn_chat" value="79">Send</button> </span> </div> <div class="input-group"> <input id="btn-input" class="form-control input-sm chat_input message" type="text" placeholder="Write your message here..." ng-model="messageToSend"> <span class="input-group-btn"> <button id="btn_chat" class="btn btn-primary btn-sm btn_chat" value="80">Send</button> </span> </div> </div> 

Answer 4

尝试使用$（this）.parent（）。closest（'span'）。next（'button.btn_chat'）。val（）;