What is the best way to update the value of the nearest input field?

Question

What is the best way to update the value of the nearest input field?

I am working with a table that has multiple rows, all structured in the same way. I have created a DIV element that can be clicked. When a user clicks on the DIV, I want the value of the input field in the same row to change. However, with the current code, all input fields are changing to the same value. How can I modify the code so that JavaScript only changes the corresponding input?

<table>
<tr>
<td>
<input class="inp-hid">
</td>
<td>
<div class="acts-like-btn"></div>
</td>
</tr>
<tr>
<td>
<input class="inp-hid">
</td>
<td>
<div class="acts-like-btn"></div>
</td>
</tr>
<tr>
<td>
   <input class="inp-hid">
</td>
<td>
<div class="acts-like-btn"></div>
</td>
</tr>
</table>



<script>
$(this).parents().find('.inp-hid').val("yes");
</script>

javascript jquery dom onclick

Answer 1

Answer №1

Implement a click event on your button that selects the row it belongs to using closest('tr') and then locates the input within that row using find('input') in order to set its value.

$('.acts-like-btn').on('click', function () {
  $(this)
    .closest('tr')
    .find('input').val('yes');
});

Alternatively, in your code:

$(this).parents().find('.inp-hid').val("yes");

This method is targeting the window object first and then looking for all elements with the class .inp-hid, rather than focusing on the specific row.

For more information, refer to:

Answer 2

Implement a click event on your button that selects the row it belongs to using closest('tr') and then locates the input within that row using find('input') in order to set its value.

$('.acts-like-btn').on('click', function () {
  $(this)
    .closest('tr')
    .find('input').val('yes');
});

Alternatively, in your code:

$(this).parents().find('.inp-hid').val("yes");

This method is targeting the window object first and then looking for all elements with the class .inp-hid, rather than focusing on the specific row.

For more information, refer to:

What is the best way to update the value of the nearest input field?

Answer №1

Similar questions

Setting MUI input value within a loop using an array value in React JS: A step-by-step guide

issue encountered during resource provider setup

Angular functions are executed twice upon being invoked within the html file

Obtaining a value using the Node.js inquirer package

Determine the current iteration index within recurring tasks using BullJS

Tips for determining the zoom factor through mouse scrolling using jQuery

Issue with Kendo dropdown's optionLabel functionality malfunctioning

By default, the HTML table will highlight the specific column based on the current month using either AngularJS or JavaScript upon loading

Obtain the initial Firebase child element without a specific key

Hovering over the child element, instead of the parent

Selecting a webpage from a dropdown list to display its specific content within an iframe

Transform the componentDidUpdate method that uses prevProps into a custom hook integrated with Redux

Restricting Entry to a NodeJS Express Route

trigger an event once an element has completed cycling using cycle.js

Guide on implementing two submission options in an HTML form using JavaScript

How can you verify user identity in Firebase when making a call to a cloud function on a

Get connected to your favorite music on iTunes without the hassle of opening a new window by simply clicking on the

Solution: "The Mongoose Model.find method consistently provides an empty result set."

Extracting timestamped text data from a simulated chat interface

The continuation of unraveling the mystery of utilizing `overflow-y:scroll` in a horizontal slider