How to Get Closest Multiple Input Fields’ Values Using jQuery and AJAX

General
1

How to Get Closest Multiple Input Fields’ Values Using jQuery and AJAX
How to Get Closest Multiple Input Fields’ Values Using jQuery and AJAX506×506 257 KB

When building dynamic web forms, especially those that involve repeated sections like rows in a table or list items in a form, developers often need to target specific sets of input fields. This is particularly useful when triggering an AJAX call that needs to send only the values related to a specific item or group. jQuery makes it very easy to traverse the DOM and retrieve values of multiple inputs located nearby a button or link. In this blog, we’ll explore how to get the closest multiple input fields’ values using jQuery and AJAX in a clean, practical, and reusable way.

Why “Closest” Matters in jQuery

Imagine you have a list of items, each with its own set of input fields (e.g., name, price, quantity). You want to submit the data of only one row or item when the user clicks a “Save” or “Update” button in that section. Rather than scanning the entire document for all inputs, which would result in wrong or excessive data, you want to grab only the inputs closest to the clicked button.

jQuery provides powerful traversal methods like .closest(), .parents(), .find(), and .siblings() that make this possible. Combined with AJAX, you can collect values and send them to the server without reloading the page.

Use Case: Editable Rows in a Table

Let’s consider a practical example. You have a table where each row contains editable input fields for product details:

<table id="productTable">
  <tr>
    <td><input type="text" class="product-name" placeholder="Product Name"></td>
    <td><input type="number" class="product-price" placeholder="Price"></td>
    <td><input type="number" class="product-quantity" placeholder="Quantity"></td>
    <td><button class="save-btn">Save</button></td>
  </tr>
  <!-- More rows like the above -->
</table>

Each row has its own inputs and a “Save” button. Our goal is: when the user clicks the “Save” button, we should fetch values of only that row’s input fields and send them via AJAX.

Step-by-Step Solution Using jQuery

Step 1: Bind a Click Event to the Save Button

We start by binding a click handler to all .save-btn elements.

$(document).ready(function () {
  $('.save-btn').on('click', function () {
    // Logic goes here
  });
});

Here, this refers to the button that was clicked.

Step 2: Find the Closest Row

Use .closest('tr') to get the table row (<tr>) containing the button.

var row = $(this).closest('tr');

This ensures we are only working with the current context and not the entire DOM.

Step 3: Get the Input Values in the Row

Now, within that row, we can use .find() to get the input values.

var productName = row.find('.product-name').val();
var productPrice = row.find('.product-price').val();
var productQuantity = row.find('.product-quantity').val();

We now have all the values from that specific row.

Step 4: Send the Data via AJAX

With the values retrieved, we can send them to the server using jQuery’s $.ajax() method.

$.ajax({
  url: '/update-product', // Change this to your actual endpoint
  type: 'POST',
  data: {
    name: productName,
    price: productPrice,
    quantity: productQuantity
  },
  success: function (response) {
    alert('Product updated successfully!');
  },
  error: function () {
    alert('Error updating product.');
  }
});

Full jQuery Code

Here’s the complete JavaScript code in one place:

$(document).ready(function () {
  $('.save-btn').on('click', function () {
    var row = $(this).closest('tr');
    var productName = row.find('.product-name').val();
    var productPrice = row.find('.product-price').val();
    var productQuantity = row.find('.product-quantity').val();

    $.ajax({
      url: '/update-product',
      type: 'POST',
      data: {
        name: productName,
        price: productPrice,
        quantity: productQuantity
      },
      success: function (response) {
        alert('Product updated successfully!');
      },
      error: function () {
        alert('Error updating product.');
      }
    });
  });
});

Bonus: Adding a Loading Indicator

If you want to give users visual feedback while the request is processing, you can disable the button and show a loader:

$(this).prop('disabled', true).text('Saving...');

Then re-enable it after success or error:

success: function (response) {
  alert('Product updated successfully!');
  $(this).prop('disabled', false).text('Save');
}.bind(this),

error: function () {
  alert('Error updating product.');
  $(this).prop('disabled', false).text('Save');
}.bind(this)

The .bind(this) ensures that this still refers to the clicked button inside the AJAX callbacks.

Tips for Working with Closest Input Groups

  1. Use Classes Wisely: Assign specific classes to input fields so you can easily query them with jQuery.
  2. Scope Is Key: Always scope your queries (.find()) within the closest parent (.closest()) to avoid unexpected results.
  3. Validate Inputs Before Sending: Check for empty or invalid fields before sending the AJAX request.
  4. Handle Server Response Gracefully: Display meaningful success/error messages to users.
  5. Use Data Attributes for IDs: Store unique row identifiers in data-id attributes if you need to send row-specific identifiers.

Example:

<tr data-id="123">
  ...
</tr>

Then access it via:

var rowId = row.data('id');

Use Case Variants

1. Forms in Cards or Divs

If you’re not working with tables, but with a set of cards or divs, you can still use .closest('.card') or .closest('.form-container').

2. Dynamically Generated Rows

If rows are added dynamically (via JS or AJAX), make sure to use event delegation:

$('#productTable').on('click', '.save-btn', function () {
  // Same logic
});

This ensures the click handler works even for newly added rows.

Conclusion

Retrieving values from the closest input fields in jQuery and sending them via AJAX is a powerful and efficient technique for dynamic web applications. Whether you’re dealing with tables, lists, or custom layouts, the .closest() and .find() methods help you scope your data collection perfectly.

By following the approach in this article, you can ensure your form interactions are modular, user-friendly, and error-free, while keeping your backend calls clean and relevant.

Let us know in the comments if you’ve used a similar method in your projects—or if you want us to cover how to handle file uploads, nested forms, or even Vue/React integration with this kind of logic.