conan conan - 3 months ago 20
HTML Question

Trying to find previous DOM elements and get input value jquery

look at my code, I am trying to create a table that when a user click update, it will get the first and second input value. I am trying to use prev to find the first two DOM element and get the value, but fail, what should i do, appreciate.



$('.update_button').on("click",function(){
var update_val_1 = $(this).prev().find('input:first').val();
var update_val_2 = $(this).prev().find('input:nth-child(2)').val();

alert(update_val_1);
alert(update_val_2);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr class="gridtable">
<td><input type="text" value="apple" /></td>
<td><input type="text" value="one" /></td>
<td><button type="button" class="update_button">UPDATE</button></td>
</tr>
<tr class="gridtable">
<td><input type="text" value="banana" /></td>
<td><input type="text" value="three" /></td>
<td><button type="button" class="update_button">UPDATE</button></td>
</tr>
<tr class="gridtable">
<td><input type="text" value="berry" /></td>
<td><input type="text" value="ten" /></td>
<td><button type="button" class="update_button">UPDATE</button></td>
</tr>




Answer

The problem is that prev looks for sibling nodes. Your input elements are in different td's so they aren't siblings. Instead, you need to go to the parent row then grab the inputs from there.

Explicit example:

$('.update_button').on("click", function() {
  var $parentRow = $(this).closest('.gridtable');
  var $firstCell = $parentRow.find('td:first-child');
  var $secondCell = $parentRow.find('td:nth-child(2)');
  var $firstInput = $firstCell.find('input');
  var $secondInput = $secondCell.find('input');
  var update_val_1 = $firstInput.val();
  var update_val_2 = $secondInput.val();

  console.log(update_val_1);
  console.log(update_val_2);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr class="gridtable">
    <td>
      <input type="text" value="apple" />
    </td>
    <td>
      <input type="text" value="one" />
    </td>
    <td>
      <button type="button" class="update_button">UPDATE</button>
    </td>
  </tr>
  <tr class="gridtable">
    <td>
      <input type="text" value="banana" />
    </td>
    <td>
      <input type="text" value="three" />
    </td>
    <td>
      <button type="button" class="update_button">UPDATE</button>
    </td>
  </tr>
  <tr class="gridtable">
    <td>
      <input type="text" value="berry" />
    </td>
    <td>
      <input type="text" value="ten" />
    </td>
    <td>
      <button type="button" class="update_button">UPDATE</button>
    </td>
  </tr>
</table>

Simplified example:

$('.update_button').on("click", function() {
  var $parentRow = $(this).closest('.gridtable');
  var update_val_1 = $parentRow.find('td:first-child input').val();
  var update_val_2 = $parentRow.find('td:nth-child(2) input').val();

  console.log(update_val_1);
  console.log(update_val_2);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr class="gridtable">
    <td>
      <input type="text" value="apple" />
    </td>
    <td>
      <input type="text" value="one" />
    </td>
    <td>
      <button type="button" class="update_button">UPDATE</button>
    </td>
  </tr>
  <tr class="gridtable">
    <td>
      <input type="text" value="banana" />
    </td>
    <td>
      <input type="text" value="three" />
    </td>
    <td>
      <button type="button" class="update_button">UPDATE</button>
    </td>
  </tr>
  <tr class="gridtable">
    <td>
      <input type="text" value="berry" />
    </td>
    <td>
      <input type="text" value="ten" />
    </td>
    <td>
      <button type="button" class="update_button">UPDATE</button>
    </td>
  </tr>
</table>