CODEWITHSUNDEEP
javascriptjqueryhtml
NIKHIL RANE
NIKHIL RANE

Reputation: 4092

Jquery: get value of closest button

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

Upvotes: 1

Views: 1365

Answers (4)

pritam kale
pritam kale

Reputation: 75

Try using $(this).parent().closest('span').next('button.btn_chat').val();

Upvotes: 0

user2575725
user2575725

Reputation:

$(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>

Upvotes: 0

user786
user786

Reputation: 4364

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>

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388346

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');

Upvotes: 0

Related Questions