Home / Questions / 133451
Accepted
Kenny Barrera
Asked: 2020-01-25 10:02:14 +0800 CST 2020-01-25 10:02:14 +0800 CST

How to get the value of an input using closest in Jquery?

  • 772

I have a table, in which I have hundreds of rows, and in which each row looks something like this (with different information for each row, of course)

<tr>
    <input class="prodId" hidden value="<?php echo $product['id']; ?>">
    <td class="thead"><?php echo $product['prod_name']; ?></td>
    <td class="thead"><?php echo $product['prod_price']; ?></td>
    <td class="thead"><?php echo $product['prod_qty']; ?></td>
    <td class="thead">
        <select class="availability-options">
        </select>
    </td>
</tr>

Everything is working fine in the option change event of the select. What I am trying to do is get the value of the id that is in the input. i'm trying this

$(".availability-options").on("change", function(){
    let optionSelected = $(this).val();
    let _id = $(this).closest("input .prodId").val();
    ....

And also try this

let _id = $(this).parent().parent().children(".prodId").val();

I understand that both selectors return a Jquery type object, but I can't figure out how to get the one valuefrom the input. It always returns an undefined value. How do I get the value of input?

html

4 Answers

  1. Best Answer

    In the input: you declare it as hidden, the correct thing is type="hidden". I tried it as you have it and it marked me undefined as you say.

    On the other hand, closestit goes up the DOM hierarchy to find the indicated element (by looking for its ancestor). In this case, you will never find the inputas your ancestor. Therefore, we ascend to trand there we look for the inputas a child:

    $(".availability-options").on("change", function(){
    let optionSelected = $(this).val();
    var id = $(this).closest("tr").children("input.prodId").val();
    console.log(id);
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
    <input class="prodId" type="hidden" value="xvalue">
    <td class="thead">name</td>
    <td class="thead">price</td>
    <td class="thead">qti</td>
    <td class="thead">
        <select class="availability-options">
          <option value="0">0</option>
          <option value="1">1</option>
          <option value="2">2</option>
        </select>
    </td>
</tr>
</table>

    • 2

  2. Try as follows:

    var value = $('.prodId').val();
console.log(value);
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<input class="prodId" disable hidden value="<?php echo $product['id']; ?>">

    I leave you the Jquery documentation for this case http://api.jquery.com/val/

    • -1

  3. Try removing the space in the selector$(this).closest("input.prodId")

    Also, it seems to me that the inputwon't render where they should if you add them as children of a tr. I would move them to the tdsameselect

    • -1

  4. The closest does not work because the input is not a child of the select example: https://www.w3schools.com/jquery/traversing_closest.asp

    Try to use via a function

    function getId(value){
  console.log(value);
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


<tr>
    <!--<input class="prodId" disable hidden value="<?php echo $product['id']; ?>">-->
    <td class="thead"><?php echo $product['prod_name']; ?></td>
    <td class="thead"><?php echo $product['prod_price']; ?></td>
    <td class="thead"><?php echo $product['prod_qty']; ?></td>
    <td class="thead">
        <!--<select class="availability-options" onClick="getId('<?php echo $product['id']; ?>')">-->
        <select class="availability-options" onClick="getId(2)">
        </select>
    </td>
</tr>

    • -2