Getting value of closest input

Question

I have got this HTML :

<div class="kusy"><input value="{{ $array['summary'] }}" type="text" onchange="$(this).closest('form').submit(); return false;" onkeypress='return event.charCode >= 48 && event.charCode <= 57' class="kusy-input" name="summary"></div>

<div class="plus-minus">
  <input type="hidden" name="_token" value="{{ csrf_token() }}" />
  <input type="hidden" name="id" value="{{ $product->id }}" />
  <input type="hidden" name="action" value="edit-summary" />
  <input class="klik-plus" type="submit" value="+">
  <input class="klik-minus" type="submit" value="-">
</div>

And this Javascript :

$(document).ready(function(){

    $('.klik-plus').click(function(){
        alert($(this).closest('.kusy-input').val());
    });

});

When i click on the plus button, it shows me alert with message "undefined", in the value of the inputbox is number 4.

How can i get that value?

Answer 1

Closest will only look in the ancestors and siblings of the elements, so it can't reach your kusy-input.

What you could do would be to reach the parent element and then find your input

$(document).ready(function(){
    $('.klik-plus').click(function(){
        alert($(this).parents().find('.kusy-input').val());
    });
});