jquery get value from fields in the same class

user_15166308 0
Viewed 103

I want to get value from each field when I click the button. The result I get is always the first one.

What I expect is that when I click another button it shows a different value. This is my code.

$('.btn').click(function(e) {
 e.preventDefault();
 var x = $('.input-class').val();
 alert(x)
})

<!-- assume the code inside loop !-->
<tr>
 <td><input type="text" value="1" class="input-class"></td>
 <td>
  <select name="animals" class="animals">
   <option value="cat">Cat</option>
   <option value="tiger">Tiger</option>
   <option value="lion">Lion</option>
  </select>
 </td>
 <td><button class="btn">Click</button></td>
</tr>
<tr>
 <td><input type="text" value="2" class="input-class"></td>
 <td>
  <select name="animals" class="animals">
   <option value="cat">Cat</option>
   <option value="tiger">Tiger</option>
   <option value="lion">Lion</option>
  </select>
 </td>
 <td><button class="btn">Click</button></td>
</tr>
<tr>
 <td><input type="text" value="3" class="input-class"></td>
 <td>
  <select name="animals" class="animals">
   <option value="cat">Cat</option>
   <option value="tiger">Tiger</option>
   <option value="lion">Lion</option>
  </select>
 </td>
 <td><button class="btn">Click</button></td>
</tr>
jquery javascript
2 Answers

The issue is because calling val() on a jQuery object containing multiple elements only reads the value from the first element in the collection.

To achieve what you require you can use DOM traversal to relate the clicked button to its related input. In this case using the this keyword to reference the element which raised the event along with prev() will work:

$('.btn').click(function(e) {
  e.preventDefault();
  var x = $(this).prev().val();
  console.log(x)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" value="1" class="input-class"> <button class="btn">Click</button>
<input type="text" value="2" class="input-class"> <button class="btn">Click</button>
<input type="text" value="3" class="input-class"> <button class="btn">Click</button>
<input type="text" value="4" class="input-class"> <button class="btn">Click</button>

Update:

Given your update to the HTML in the question, the logic to get the input from within the same table row is slightly more complex. You can achieve it instead by using closest() to get the nearest common tr parent, then find():

$('.btn').click(function(e) {
  e.preventDefault();
  var x = $(this).closest('tr').find('.input-class').val();
  console.log(x)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td><input type="text" value="1" class="input-class"></td>
    <td>
      <select name="animals" class="animals">
        <option value="cat">Cat</option>
        <option value="tiger">Tiger</option>
        <option value="lion">Lion</option>
      </select>
    </td>
    <td><button class="btn">Click</button></td>
  </tr>
  <tr>
    <td><input type="text" value="2" class="input-class"></td>
    <td>
      <select name="animals" class="animals">
        <option value="cat">Cat</option>
        <option value="tiger">Tiger</option>
        <option value="lion">Lion</option>
      </select>
    </td>
    <td><button class="btn">Click</button></td>
  </tr>
  <tr>
    <td><input type="text" value="3" class="input-class"></td>
    <td>
      <select name="animals" class="animals">
        <option value="cat">Cat</option>
        <option value="tiger">Tiger</option>
        <option value="lion">Lion</option>
      </select>
    </td>
    <td><button class="btn">Click</button></td>
  </tr>
</table>

user_5194130

$('.input-class') will gather all elements with that class name. maybe you want do a foreach loop and get value from .input-class one at a time.

user_159542840
Related