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

Navigation
0

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 well in the option change event of select . What I'm trying to do is get the value of the id that is in 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 not understand how to obtain the value of input . It always returns an indefinite value. How do I get the value of input ?

    
asked by Kenny Barrera 24.01.2018 в 19:02
source

4 answers

2

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

On the other hand, closest rises in the hierarchy of the DOM to find the indicated element (looking for its ancestor). In this case, you will never find the input as your ancestor. Therefore, we go up to tr and there we look for the input as 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>
    
answered by 24.01.2018 / 19:57
source
-1

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 Jquery's documentation for this case link

    
answered by 24.01.2018 в 19:12
-1

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

Also, it seems to me that the input will not be rendered where they should be if you add them as children of a tr . I would move them to the same td of select

    
answered by 24.01.2018 в 19:40
-2

The closest one does not work because the input is not the son of the select example: link

Try using using 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>
    
answered by 24.01.2018 в 19:41
Error in localhost mysql with xampp Query on sql server?