The total calculations for each row in Javascript and Ajax are experiencing glitches and are not functioning correctly

Question

The total calculations for each row in Javascript and Ajax are experiencing glitches and are not functioning correctly

Below is the script utilized by an AJAX library and JavaScript.

The total order column for total price is functioning correctly. However, the total calculations for the discount column and net price column are not working as expected.

<script type="text/javascript">
$(document).ready(function() {
    $('.row1').keyup(function(ev){

        var row1c = $(this).val() * 25;
        $('.row1c').html((row1c).toFixed(2));

    });
    $('.row1a').keyup(function(ev){

        var row1ac = $(this).val() * 15;
        $('.row1ac').html((row1ac).toFixed(2));

    });
    // Additional javascript functions...
});


</script>

<table border="2" cellpadding="5" cellspacing="2" align="center">


  <tr>
    <th>Cracker Name</th>
    <th>Cracker Photo</th>
    <th>Packing Model</th>
    <th>Retail Price</th>
    <th>You Save (Discount - 60%) <br /></th>

    <th>Selling Price<br /></th>

    <th>Quantity</th>
    <th>Total Order</th>
    <th>Discount</th>
    <th>Net Price</th>
  </tr>


  <tr>
    <td>3.5'' Laxmi</td>
    <td>--</td>
    <td>5 in 1 Packet</td>
    <td>25</td>
    <td>15</td>
    <td>10</td>
    <td>
      <input type="text" name="pages" class="row1 row1a row1b" />    </td>
    <td><span class="row1c">0.00</span>    </td>
      <td><span class="row1ac">0.00</span>    </td>
        <td><span class="row1bc">0.00</span>    </td>
  </tr>
  <tr>
    <td>3.5'' Laxmi</td>
    <td>--</td>
    <td>5 in 1 Packet</td>
    <td>45</td>
    <td>25</td>
    <td>20</td>
    <td>
      <input type="text" name="pages" class="row2 row2a row2b" />    </td>
    <td><span class="row2c">0.00</span>    </td>
      <td><span class="row2ac">0.00</span>    </td>
        <td><span class="row2bc">0.00</span>    </td>
  </tr>






  <tr>
    <td colspan="7" align="right">Total  </td>

    <td><span class="row5c">0.00</span>    </td>
     <td><span class="row55c">0.00</span>    </td>
      <td><span class="row555c">0.00</span>    </td>
  </tr>
</table>

javascript ajax

Answer 1

Answer №1

Update to your SCRIPT with the code provided below.

$(document).ready(function() {
    $('.row1').keyup(function(ev){

        var row1c = $(this).val() * 25;
        $('.row1c').html((row1c).toFixed(2));

    });
    $('.row1a').keyup(function(ev){

        var row1ac = $(this).val() * 15;
        $('.row1ac').html((row1ac).toFixed(2));

    });
    $('.row1b').keyup(function(ev){

        var row1bc = $(this).val() * 10;
        $('.row1bc').html((row1bc).toFixed(2));

    });

   $('.row2').keyup(function(ev){

        var row2c = $(this).val() * 45;
        $('.row2c').html((row2c).toFixed(2));

    });
    $('.row2a').keyup(function(ev){

        var row2ac = $(this).val() * 25;
        $('.row2ac').html((row2ac).toFixed(2));

    });
    $('.row2b').keyup(function(ev){

        var row2bc = $(this).val() * 20;
        $('.row2bc').html((row2bc).toFixed(2));

    });
  $('input[type=text]').keyup(function(){
    var total = 0;
    $('input[type=text]').each(function(){
      total += Number($(this).parent().next().find('span').text());
    })
    $('.row5c').text(total.toFixed(2));
  })


  $('input[type=text]').keyup(function(){
    var total = 0;
    $('input[type=text]').each(function(){
      total += Number($(this).parent().next().next().find('span').text());
    })
    $('.row55c').text(total.toFixed(2));
  })
   $('input[type=text]').keyup(function(){
    var total = 0;
    $('input[type=text]').each(function(){
      total += Number($(this).parent().next().next().next().find('span').text());
    })
    $('.row555c').text(total.toFixed(2));
  })
});

Updated two lines for discounts:

total += Number($(this).parent().next().next().find('span').text());

and for the net total:

Number($(this).parent().next().next().next().find('span').text());

DEMO

Answer 2

Update to your SCRIPT with the code provided below.

$(document).ready(function() {
    $('.row1').keyup(function(ev){

        var row1c = $(this).val() * 25;
        $('.row1c').html((row1c).toFixed(2));

    });
    $('.row1a').keyup(function(ev){

        var row1ac = $(this).val() * 15;
        $('.row1ac').html((row1ac).toFixed(2));

    });
    $('.row1b').keyup(function(ev){

        var row1bc = $(this).val() * 10;
        $('.row1bc').html((row1bc).toFixed(2));

    });

   $('.row2').keyup(function(ev){

        var row2c = $(this).val() * 45;
        $('.row2c').html((row2c).toFixed(2));

    });
    $('.row2a').keyup(function(ev){

        var row2ac = $(this).val() * 25;
        $('.row2ac').html((row2ac).toFixed(2));

    });
    $('.row2b').keyup(function(ev){

        var row2bc = $(this).val() * 20;
        $('.row2bc').html((row2bc).toFixed(2));

    });
  $('input[type=text]').keyup(function(){
    var total = 0;
    $('input[type=text]').each(function(){
      total += Number($(this).parent().next().find('span').text());
    })
    $('.row5c').text(total.toFixed(2));
  })


  $('input[type=text]').keyup(function(){
    var total = 0;
    $('input[type=text]').each(function(){
      total += Number($(this).parent().next().next().find('span').text());
    })
    $('.row55c').text(total.toFixed(2));
  })
   $('input[type=text]').keyup(function(){
    var total = 0;
    $('input[type=text]').each(function(){
      total += Number($(this).parent().next().next().next().find('span').text());
    })
    $('.row555c').text(total.toFixed(2));
  })
});

Updated two lines for discounts:

total += Number($(this).parent().next().next().find('span').text());

and for the net total:

Number($(this).parent().next().next().next().find('span').text());

DEMO

Answer 3

Answer №2

Add custom classes to your HTML elements like so :

<td><input type="text" name="pages" class="custom1 custom1a custom1b" /></td>
<td><span class="custom1c total1">0.00</span></td>
<td><span class="custom1ac total2">0.00</span></td>
<td><span class="custom1bc tota3">0.00</span></td>

Next, include the following :

<td><input type="text" name="pages" class="custom2 custom2a custom2b" /></td>
<td><span class="custom2c total1">0.00</span></td>
<td><span class="custom2ac total2">0.00</span></td>
<td><span class="custom2bc tota3">0.00</span></td>

Here are some sample functions for totaling:

$('input[type=text]').keyup(function() {
    var total = 0;
    $('.total1').each(function() {
        total += Number($(this).text());
    })
    $('.row5c').text(total.toFixed(2));
});

$('input[type=text]').keyup(function() {
    var total = 0;
    $('.total2').each(function() {
        total += Number($(this).text());
    })
    $('.row55c').text(total.toFixed(2));
});
$('input[type=text]').keyup(function() {
    var total = 0;
    $('total3').each(function() {
        total += Number($(this).text());
    })
    $('.row555c').text(total.toFixed(2));
});

Answer 4

Add custom classes to your HTML elements like so :

<td><input type="text" name="pages" class="custom1 custom1a custom1b" /></td>
<td><span class="custom1c total1">0.00</span></td>
<td><span class="custom1ac total2">0.00</span></td>
<td><span class="custom1bc tota3">0.00</span></td>

Next, include the following :

<td><input type="text" name="pages" class="custom2 custom2a custom2b" /></td>
<td><span class="custom2c total1">0.00</span></td>
<td><span class="custom2ac total2">0.00</span></td>
<td><span class="custom2bc tota3">0.00</span></td>

Here are some sample functions for totaling:

$('input[type=text]').keyup(function() {
    var total = 0;
    $('.total1').each(function() {
        total += Number($(this).text());
    })
    $('.row5c').text(total.toFixed(2));
});

$('input[type=text]').keyup(function() {
    var total = 0;
    $('.total2').each(function() {
        total += Number($(this).text());
    })
    $('.row55c').text(total.toFixed(2));
});
$('input[type=text]').keyup(function() {
    var total = 0;
    $('total3').each(function() {
        total += Number($(this).text());
    })
    $('.row555c').text(total.toFixed(2));
});

The total calculations for each row in Javascript and Ajax are experiencing glitches and are not functioning correctly

Answer №1

Answer №2

Similar questions

What is the best way to ensure an inline-block element spans the entire width?

Meteor JS failed to load the CSS file due to an unsupported MIME type

Tips for exporting a React Component without using ownProps in a redux setup with TypeScript

I have successfully deployed a basic nodejs application using Heroku, but encountering an error when attempting to open the URL

Preserving state values with the useState hook throughout various function invocations

There is no Api.js file in the Cordova iOS platform

how to check if a string has white spaces in a react application

Exporting a variable that is currently in use within a function being exported

Changing the color variable of an object using an onClick function in JavaScript

Implementing a feature that allows users to initiate a download window in a node.js express application

Navigate to error page from AJAX request in ASP.NET MVC

What are some steps I can take to diagnose why my Express server is not receiving POST requests from my HTML form?

Transform data from API arrays into a remapped object with updated keys and structure

"Two columns of identical width, each occupying 50% of the screen height

Unable to switch between navigation items and icons

Having trouble with Google Maps Places API autocomplete feature; it's not functioning properly

Can CSS be used for creating unique color combinations?

The navigation/hamburger icon vanishes after a click on a page link

Building multiple files in React allows developers to divide their code

Scroll automatically to the following div after a brief break