get value from correct input field-CodePudding

I have a html structure likes this:

<table>
   <tr>
     <td>
        <input class="text-center inputForSum" type="text" name="menge" value="1.00" />
     </td>
   </tr>
   <tr>
     <td>
        <input class="text-center inputForSum" type="text" name="menge" value="1.00" />
     </td>
   </tr>
   <tr>
     <td>
        <input class="text-center inputForSum" type="text" name="menge" value="1.00" />
     </td>
   </tr>
</table>

and a on change function:

$( ".inputForSum" ).change(function() {
   console.log(  $('.inputForSum').val()  )
});

But I need to know, WHICH input field with the class "inputForm" has changed. How can I realize this?

CodePudding user response：

Is the index of the tr parent an acceptable answer ?

$( ".inputForSum" ).change(function(ev) {
   console.log($(ev.target).closest("tr").index(), $(ev.target).val())
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
   <tr>
     <td>
        <input class="text-center inputForSum" type="text" name="menge" value="1.00" />
     </td>
   </tr>
   <tr>
     <td>
        <input class="text-center inputForSum" type="text" name="menge" value="1.00" />
     </td>
   </tr>
   <tr>
     <td>
        <input class="text-center inputForSum" type="text" name="menge" value="1.00" />
     </td>
   </tr>
</table>

CodePudding user response：

$( ".inputForSum" ).change(function() {
   console.log(  $(this).val()  )
   console.log($(this).closest('tr'))
});

<script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>
<table>
   <tr>
     <td>
        <input class="text-center inputForSum" type="text" name="menge" value="1.00" />
     </td>
   </tr>
   <tr>
     <td>
        <input class="text-center inputForSum" type="text" name="menge" value="1.00" />
     </td>
   </tr>
   <tr>
     <td>
        <input class="text-center inputForSum" type="text" name="menge" value="1.00" />
     </td>
   </tr>
</table>

You can use $(this) to get the input that changed

it s $(this).val()