How to get closest multiple input fields value in jQuery ajax

General
1

The table have multiple items like (apple, mango, orange) i want to get the qty table data closest multiple input values on separate inputs. But i receive only single input value from it. So i can’t send it in ajax properly. I am trying to get multiple input values of closest table row but i get only one value from it.

Any help will be appreciated.

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Mutiple Qty Values</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" charset="utf-8"></script>
</head>
<body>
<div class="alertContainer"></div>
<table>
    <thead>
        <tr>
            <td>Id</td>
            <td>Item</td>
            <td>Qty</td>
            <td>Action</td>
        </tr>
        <tbody>
            <form method="post">
            <tr>
                <td>1</td>
                <td>apple</td>
                <td>
                    <input type="hidden" name="multi_qty[]" value="10" class="qty">
                    <input type="hidden" name="multi_qty[]" value="20" class="qty">
                </td>
                <td><button type="submit" name="delete_qty" class="deleteBtn">Delete</button></td>
            </tr>
            <tr>
                <td>2</td>
                <td>mango</td>
                <td>
                    <input type="hidden" name="multi_qty[]" value="40" class="qty">
                    <input type="hidden" name="multi_qty[]" value="50" class="qty">
                </td>
                <td><button type="submit" name="delete_qty" class="deleteBtn">Delete</button></td>
            </tr>
            <tr>
                <td>3</td>
                <td>orange</td>
                <td>
                    <input type="hidden" name="multi_qty[]" value="70" class="qty">
                    <input type="hidden" name="multi_qty[]" value="80" class="qty">
                </td>
                <td><button type="submit" name="delete_qty" class="deleteBtn">Delete</button></td>
            </tr>
            </form>
        </tbody>
    </thead>
</table>
<div class="result">
    <input type="text" class="input_result">
    <input type="text" class="input_result">
</div>
<script>
  $(document).ready(function(){ 
    $('.deleteBtn').click(function(e){ 
      e.preventDefault();
      var qtyValue = $(this).closest('tr').find('.qty').val();
      $('.input_result').val(qtyValue);

     // ajax code start
      var inputResult = $('.input_result').val();
      $.ajax({
        url:'delete-item.php',
        type:'post',
        data:'inputResult='+inputResult,
        success:function(result){
            $('.alertContainer').html('item deleted');
        }
      })
    })
})
</script>
2

You’re encountering a common issue where $(this).closest('tr').find('.qty').val() only gets one value — the first .qty input — instead of all of them in the row. This is because .val() on a jQuery selection of multiple elements only returns the value of the first one.

Goal

You want to:

  1. Collect all .qty values from the same row as the clicked button.
  2. Pass them together in the AJAX request.

Fix (Updated JavaScript)

Replace your current JS block with the following:

$(document).ready(function(){ 
  $('.deleteBtn').click(function(e){ 
    e.preventDefault();

    // Collect all .qty values from the closest row
    var qtyValues = [];
    $(this).closest('tr').find('.qty').each(function(){
      qtyValues.push($(this).val());
    });

    // Optional: Show the values in the .input_result fields (for demo)
    $('.input_result').eq(0).val(qtyValues[0] || '');
    $('.input_result').eq(1).val(qtyValues[1] || '');

    // Send AJAX with array of values
    $.ajax({
      url: 'delete-item.php',
      type: 'POST',
      data: { inputResult: qtyValues },
      success: function(result){
        $('.alertContainer').html('Item deleted');
      }
    });
  });
});

On the PHP Side (delete-item.php)

Make sure to handle $_POST['inputResult'] as an array:

<?php
if (isset($_POST['inputResult']) && is_array($_POST['inputResult'])) {
    foreach ($_POST['inputResult'] as $qty) {
        // Do something with each qty value
        echo "Deleted qty: $qty<br>";
    }
} else {
    echo "No quantities received.";
}

Optional Improvement: HTML Fixes

  • Move the <form> tag outside the <tbody> — forms shouldn’t wrap <tr> elements.
  • If you’re not actually submitting the form, remove the <form> altogether and use JavaScript/AJAX only.