The issue of assigning Ajax data to jQuery inputs with identical classes is not being resolved correctly

Question

The issue of assigning Ajax data to jQuery inputs with identical classes is not being resolved correctly

I am currently developing an Invoicing System where the Rate(Amount) value changes automatically when the Product(Item) is changed.

The issue I am encountering is that when I change the first Product, all the other Product Rates change to the Rate of the first Item.

Below is the jQuery code snippet to change the Rate when a Product is selected:

//Values and Inputs
$(document).on('change', '.Item', function() {
    var Item = $('.Item').closest('.Item').val();
    $.ajax({
        type: 'GET',
        url: 'AjaxPrice.php',
        data: { Item: Item },
        success: function(response) {
            $('.Rate').val(response);
        }
    });
});

Here is the code snippet for the Predefined Table:

<tbody class="TableBody">
  <tr>
    <td style="width: 220px">
      <input type="text" class="form-control Item" name="Item" id="Item" placeholder="Product Name" required autocomplete="off">
    </td>
    <td>
      <input type="number" name="QTV" min="1" name="QTV" id="QTV" class="form-control text-right" placeholder="00" required>
    </td>
    <td>
      <input step="2" type="number" class="form-control text-right Rate" min="1" id="Rate" placeholder="0.00" readonly>
    </td>
    <td>
      <input step="any" id="Disc" name="Disc" type="number" min="0" name="" class="form-control text-right" placeholder="00">
    </td>
    <td>
      <input type="text" name="SubTotal" class="form-control text-right" id="Total" placeholder="Total" readonly>
    </td>
    <td>
      <button type="button" class="btn btn-danger DelRow">Delete</button>
    </td>
  </tr>

</tbody>

Below is the code snippet to Add a new Item:

$('#AddNewItem').click(function() { $('.TableBody').append(`
<tr>
  <td style="width: 220px">
    <input type="text" class="form-control Item" name="Item" id="Item" placeholder="Product Name" required autocomplete="off">
  </td>
  <td>
    <input type="number" name="QTV" min="1" name="QTV" id="QTV" class="form-control text-right" placeholder="00" required>
  </td>
  <td>
    <input step="2" type="number" class="form-control text-right Rate" min="1" id="Rate" placeholder="0.00" readonly>
  </td>
  <td>
    <input step="any" id="Disc" name="Disc" type="number" min="0" name="" class="form-control text-right" placeholder="00">
  </td>
  <td>
    <input type="text" name="SubTotal" class="form-control text-right" id="Total" placeholder="Total" readonly>
  </td>
  <td>
    <button type="button" class="btn btn-danger DelRow">Delete</button>
  </td>
</tr>
`); });

Any assistance with this issue would be greatly appreciated.

javascript jquery html css

Answer 1

Answer №1

Identify the specific input that belongs to the same row. This selection pertains to the initial input.

$(document).on('change', '.Item', function() {
    var item = this.value // access the updated item
    var row = $(this).closest("tr")  // obtain the table row associated with the item
    var rate = row.find(".rate") // locate the rate input within the row
    $.ajax({
        type: 'GET',
        url: 'AjaxPrice.php',
        data: { Item: Item },
        success: function(response) {
          rate.val(response);
        }
    });
});

Answer 2

Identify the specific input that belongs to the same row. This selection pertains to the initial input.

$(document).on('change', '.Item', function() {
    var item = this.value // access the updated item
    var row = $(this).closest("tr")  // obtain the table row associated with the item
    var rate = row.find(".rate") // locate the rate input within the row
    $.ajax({
        type: 'GET',
        url: 'AjaxPrice.php',
        data: { Item: Item },
        success: function(response) {
          rate.val(response);
        }
    });
});

Answer 3

Answer №2

It appears that both your predefined table and dynamic table-row are using the same classes and id's. This means that if you use $('.Rate').val(response);, it will update all elements with the class ".Rate".

To avoid this, you can consider adding an incrementing number to differentiate the elements:

$('#AddNewItem').click(function() {

var i = parseInt($('.TableBody').length)+1; 

$('.TableBody').append('
.
.
<td>
    <input step="2" type="number" class="form-control text-right Rate_'+i+'" min="1" id="Rate" placeholder="0.00" readonly>
</td>
.
.
');

});

You have the flexibility to use different class names as well.

To access this number after an ajax call, you can add it as a data attribute to the ".Item" element:

$('#AddNewItem').click(function() {

var i = parseInt($('.TableBody').length)+1; 

$('.TableBody').append('
.
.
<td>
    <input type="text" data-loop="'+i+'" class="form-control Item" name="Item" id="Item" placeholder="Product Name" required autocomplete="off">
</td>
.
.
<td>
    <input step="2" type="number" class="form-control text-right Rate_'+i+'" min="1" id="Rate" placeholder="0.00" readonly>
</td>
.
.
');

});

For your ajax function, consider the following:

$(document).on('change', '.Item', function() {
var Item = $('.Item').closest('.Item').val();
var loop_id = $(this).data('loop');
$.ajax({
    type: 'GET',
    url: 'AjaxPrice.php',
    data: { Item: Item },
    success: function(response) {
        $('.Rate_'+loop_id).val(response);
    }
});

});

It may be necessary to pass the loop_id with the ajax call to access it in the success function. Additionally, consider using JSON as the dataType:

$(document).on('change', '.Item', function() {
var Item = $('.Item').closest('.Item').val();
var loop_id = $(this).data('loop');
$.ajax({
    type: 'GET',
    url: 'AjaxPrice.php',
    dataType: 'JSON', 
    data: { Item: Item, loop_id:loop_id },
    success: function(response) {
        $('.Rate_'+response.loop_id).val(response.html);
    }
});

});

These suggestions aim to provide some assistance.

Answer 4

It appears that both your predefined table and dynamic table-row are using the same classes and id's. This means that if you use $('.Rate').val(response);, it will update all elements with the class ".Rate".

To avoid this, you can consider adding an incrementing number to differentiate the elements:

$('#AddNewItem').click(function() {

var i = parseInt($('.TableBody').length)+1; 

$('.TableBody').append('
.
.
<td>
    <input step="2" type="number" class="form-control text-right Rate_'+i+'" min="1" id="Rate" placeholder="0.00" readonly>
</td>
.
.
');

});

You have the flexibility to use different class names as well.

To access this number after an ajax call, you can add it as a data attribute to the ".Item" element:

$('#AddNewItem').click(function() {

var i = parseInt($('.TableBody').length)+1; 

$('.TableBody').append('
.
.
<td>
    <input type="text" data-loop="'+i+'" class="form-control Item" name="Item" id="Item" placeholder="Product Name" required autocomplete="off">
</td>
.
.
<td>
    <input step="2" type="number" class="form-control text-right Rate_'+i+'" min="1" id="Rate" placeholder="0.00" readonly>
</td>
.
.
');

});

For your ajax function, consider the following:

$(document).on('change', '.Item', function() {
var Item = $('.Item').closest('.Item').val();
var loop_id = $(this).data('loop');
$.ajax({
    type: 'GET',
    url: 'AjaxPrice.php',
    data: { Item: Item },
    success: function(response) {
        $('.Rate_'+loop_id).val(response);
    }
});

});

It may be necessary to pass the loop_id with the ajax call to access it in the success function. Additionally, consider using JSON as the dataType:

$(document).on('change', '.Item', function() {
var Item = $('.Item').closest('.Item').val();
var loop_id = $(this).data('loop');
$.ajax({
    type: 'GET',
    url: 'AjaxPrice.php',
    dataType: 'JSON', 
    data: { Item: Item, loop_id:loop_id },
    success: function(response) {
        $('.Rate_'+response.loop_id).val(response.html);
    }
});

});

These suggestions aim to provide some assistance.

The issue of assigning Ajax data to jQuery inputs with identical classes is not being resolved correctly

Answer №1

Answer №2

Similar questions

Steps for organizing values based on the selected value from the dropdown menu in a select option

Guide to importing a Kotlin/JS generated module into a separate npm-dependent project

Merge different $_GET parameters together before submitting

Arrange radio buttons vertically in a table

Methods for organizing an array of objects by a specific key in JavaScript, but in the case of duplicate values, the objects can be sorted by a different

In Vue3, have you ever wondered why the $emit function seems to work fine before a promise fetch,

Displaying Kartik's growling animation using AJAX within Yii2 framework

Synchronizing jQuery parameters

Adding a scrollable feature to a Bootstrap Modal seems to be generating additional unnecessary pages at the

Utilizing CSS nested spans and setting custom width attributes

move position when clicked-javascript animation

Error 400 occurs when attempting to make a PUT request on Firefox or IE, whereas it functions properly on Chrome and Opera

Delete the float attribute from the image when the inline-block is shifted to the bottom of the image

Customizing the appearance of input range in Firefox

Managing modules within the node_modules folder that have dependencies on .css files

Attempting to remove options in a Multiple Choice scenario by selecting the X icon beside each one

The functionality of a JQuery post within a PHP loop is not functioning optimally

applying hover effect to text within a table

Altering the text of dropdown items prior to the ASP.NET autopostback

Tips on retrieving specific information from PHP through jQuery AJAX