CODEWITHSUNDEEP
javascriptjquery
Saint Robson
Saint Robson

Reputation: 5525

jQuery .closest failed to find parent's input value

I have this HTML structure :

<input type="text" name="quantity" class="form-control quantity" value="1" min="1" max="10" maxlength="2" size="2">

<span class="input-group-btn">
  <button type="button" class="btn btn-default btn-number btn-plus p-l-10 p-r-10">
      <span class="glyphicon glyphicon-plus"></span>
  </button>
</span>

and also I have this jquery script :

<script>
    $(document).ready(function(){
        $(document).on("click", ".btn-plus", function() {
            event.preventDefault();
            var quantity = $( this ).closest( ".quantity" ).val();
            alert (quantity);
        });
    });
</script>

theoretically, I can get value of input text once the btn-plus is clicked, but I still get undefined value as result.

how to get the input value of .quantity using .closest? thank you

Upvotes: 0

Views: 78

Answers (3)

Ruben
Ruben

Reputation: 659

According to the JQuery website it appears as though the closest function acts similarly to the parents function in that it only looks at the ancestors of the element you are targeting.

https://api.jquery.com/closest/#entry-longdesc

As the input tag is not a parent of the button tag then the closest function will not find it.

Utilize a combination of parent and sibling or similar to target the input tag.

Upvotes: 0

guradio
guradio

Reputation: 15555

$(document).ready(function() {
  $(document).on("click", ".btn-plus", function(event) {
    event.preventDefault();
    var quantity = $(this).closest("span").prev().val();//use closest span and prev to get input
    alert(quantity);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="quantity" class="form-control quantity" value="1" min="1" max="10" maxlength="2" size="2">

<span class="input-group-btn">
  <button type="button" class="btn btn-default btn-number btn-plus p-l-10 p-r-10">
      <span class="glyphicon glyphicon-plus">asdasdasdas</span>
</button>
</span>

Use .closest() span to get the parent span. Since input is before span use .prev()

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388326

.closest() is used to find a matching ancestor element, in your case the input element is the previous sibling of the buttons parent

$(document).ready(function() {
  $(document).on("click", ".btn-plus", function(event) {
    event.preventDefault();
    var quantity = $(this).parent().prev(".quantity").val();
    alert(quantity);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="quantity" class="form-control quantity" value="1" min="1" max="10" maxlength="2" size="2">

<span class="input-group-btn">
  <button type="button" class="btn btn-default btn-number btn-plus p-l-10 p-r-10">
      <span class="glyphicon glyphicon-plus"></span>
</button>
</span>

Upvotes: 1

Related Questions