CODEWITHSUNDEEP
javascriptjqueryfrontend
Pulkit Sharma
Pulkit Sharma

Reputation: 262

Jquery: calculation in each row of a table showing same result in each row

I have a table with dynamical functionality to add rows. That means user can add any number of results.

The rows have a select field and one text input field. When users select a value from select field, text input field is populated with result given by Ajax call multiplied with another input field on form.

I am getting the result but problem is that each text input in each row is populated with same result.

Here is my code: HTML

<table>
<tr class="items2"><td><select id="Account" value="1">ajax text</td><td><input  class "amount"/></td></tr>
<tr class="items2"><td><select id="Account-1" value="2">ajax text</td><td><input  class "amount"/></td></tr>
</table>

Jquery:

<script>
            $("select[id*='Account']").change(function(){
            subjectId=$(this).val();
            console.log(subjectId);
            var sale=$("#id_sale").val();
                        console.log(sale);

            request_url = '{% url "taxrate" pk=0 %}'.replace('0', subjectId);
            console.log( "request_url = " + request_url);
            $.ajax({
                            url: request_url,
                            type: "GET",
                            dataType: 'json',
                        }).done(function(data, textStatus, jqXHR) {

                        $.each(data, function(n, obj){



                        $("tr.items2").each(function () {
                        $('.amount',this).val( ((sale*obj.fields.rate)/100).toFixed(2));


                        })

                        })
                        })

            });

        </script>

What mistake is in my code? I am just a newbie at front end.

Image: In image you can see that text input is showing 140 in both boxes. But it should show amount only if i select another row select item. Amount should be calculated as per ajax value passed for the row. enter image description here

JSfiddle without ajax part:

https://jsfiddle.net/tL86dsmc/

$("select[id*='Account']").change(function(){
			subjectId=$(this).val();

			var sale=$("#id_sale").val();

						var tax_rate = ((sale * .10)).toFixed(2);

						$(".amount").val(tax_rate);
						
						 
			
			});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="id_sale" value=100>
<table>
  <tr class="items2">
    <td>
      <select id="Account-1" value="1">
        <option value="" selected="selected">---------</option>
        <option value="1">tax @18%</option>
        <option value="2">Tax @ 17%</option>
      </select>
    </td>
    <td>
      <input id="amount-2" class="amount">
    </td>
  </tr>
  <tr class="items2">
    <td>
      <select id="Account-2" value="1">
        <option value="" selected="selected">---------</option>
        <option value="1">tax @18%</option>
        <option value="2">Tax @ 17%</option>
      </select>
    </td>
    <td>
      <input id="amount-2" class="amount">
    </td>
  </tr>
</table>

Upvotes: 0

Views: 595

Answers (3)

RIYAJ KHAN
RIYAJ KHAN

Reputation: 15290

It should be,

 $(this).parent().next().find('input.amount')
.val(((sale * data[0].fields.rate) / 100).toFixed(2));

Remove this part 

 $.each(data, function(n, obj) {
      $("tr.items2").each(function() {
        $('.amount', this).val(((sale * obj.fields.rate) / 100).toFixed(2));
      })
    })

Issue

$('.amount',this).

will access every input element regardless select control that is changed.

Upvotes: 0

Abhishek Dhanraj Shahdeo
Abhishek Dhanraj Shahdeo

Reputation: 1356

Try it using class

<script>
$(".items2").change(function(){
subjectId=$(this).val();
console.log(subjectId);
var sale=$("#id_sale").val();
console.log(sale);

request_url = '{% url "taxrate" pk=0 %}'.replace('0', subjectId);
console.log( "request_url = " + request_url);
$.ajax({
    url: request_url,
    type: "GET",
    dataType: 'json',
}).done(function(data, textStatus, jqXHR) {

        $("tr.items2").each(function () {
            $(this).find('.amount').val(((sale*obj.fields.rate)/100).toFixed(2));
        })
    })

});
</script>

Upvotes: 0

srd091
srd091

Reputation: 55

you're getting the same result because of the attribute-contains-selector as every time the user adds row the script select the id with value=1, and its value gets inserted into the input text field. You can try changing the id selection in script with the class.

Upvotes: 0

Related Questions