asked on

Auto compute part2

Hi experts, I'm trying to implement JQuery here ($("Qty").change();) where I can be able to compute the result between the two fields upon adding row on a table. My goal here is to have the result bet the two input, the id="Qty" and the id="rd". I want to have an auto answer to be filled in the result, id="utotal". The codes below won't work.., any help please! Thank you.

<!DOCTYPE html>
<html>
<style>
table,th,td {
  border : 1px solid black;
  border-collapse: collapse;
}
th,td {
  padding: 5px;
}
tfoot {color:red;}
</style>
<table id="Tab1">
<tr>
  <th>Quantity</th>
  <th>Price</th>
  <th>Total</th>
</tr>
</table>
<br/>
<button onclick="return AddNow()">Add row</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>
function AddNow() {
   var q = parseInt("2.00");
   var p = parseInt("2.50");
  
  var table = document.getElementById("Tab1");
  var row = table.insertRow(table.rows.length);
  
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);
  
  cell1.innerHTML = '<input type="text"  id="Qty" value="' + q + '"' + 'onchange="myRowTotalPOS(this.parentElement.parentElement)"/>';
  cell2.innerHTML = '<input type="text" id="rp"  value="' + p + '"' + ' readonly/>'; 
  cell3.innerHTML = '<input type="text" id="utotal" />';
}

function myRowTotalPOS( row )
    {
		Qty = row.cells[0].firstChild.value;
		if( Qty != '' && Qty != null ) Qty = Qty.replace( ',', '' ); 
       
    	Price = parseFloat(row.cells[1].firstChild.value.replace(/[^\d.]/g,"")).toFixed(2);
         row.cells[2].firstChild.value = ( Qty * Price).toFixed(2);
         $("Qty").change();
    }
</script>
</body>
</html>

Open in new window

Leonidas Dosas

You need only this to calculate the utotal of the new row:

function AddNow() {
   var q = parseInt("2.00");
   var p = parseInt("2.50");
  
  var table = document.getElementById("Tab1");
  var row = table.insertRow(table.rows.length);
  
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);
  
  cell1.innerHTML = '<input type="text"  id="Qty" value="' + q + '"' + 'onchange="myRowTotalPOS(this.parentElement.parentElement)"/>';
  cell2.innerHTML = '<input type="text" id="rp"  value="' + p + '"' + ' readonly/>'; 
  cell3.innerHTML = '<input type="text" id="utotal" value='+(q+p)+' />'; 
  
}

Open in new window

Whing Dela Cruz

ASKER

Hello Leonidas, I missed to mention on my post that I need to trigger the myRowTotalPOS function as there are some functions on it that needed on my project. So, I need to use Jquery but I'm not sure if it is possible. Thank you!

Leonidas Dosas

<script>
function AddNow() {
   var q = parseInt("2.00");
   var p = parseInt("2.50");
  
  var table = document.getElementById("Tab1");
  var row = table.insertRow(table.rows.length);
  
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);
  
  cell1.innerHTML = '<input type="text"  id="Qty" value="' + q + '"' + '/>';
  cell2.innerHTML = '<input type="text" id="rp"  value="' + p + '"' + ' readonly/>'; 
  cell3.innerHTML = '<input type="text" id="utotal" value='+(q+p)+' />'; 
  
}
function myRowTotalPOS( row )
    {
        
		Qty = row.cells[0].firstChild.value;
		if( Qty != '' && Qty != null ) Qty = Qty.replace( ',', '' ); 
       
    	Price = parseFloat(row.cells[1].firstChild.value.replace(/[^\d.]/g,"")).toFixed(2);
         row.cells[2].firstChild.value = ( Qty * Price).toFixed(2);
         
    }

$(document).on('keypress','#Qty',function (){    
    myRowTotalPOS($(this).parent().parent()[0]);
});
</script>

Open in new window

Whing Dela Cruz

ASKER

Hi Leonidas, Your answer is working very fine but would it be possible to trigger the myRowTotalPOS upon adding the row on a table?

Whing Dela Cruz

ASKER

Sorry for not explaining my goal clearly but what I need here is to trigger myRowTotalPOS every time I add the row on a table. I have no idea how possible is this. Thank you!

Leonidas Dosas

JQuery solution:

function AddNow() {
   var q = parseInt("2.00");
   var p = parseInt("2.50");
  
  var table = document.getElementById("Tab1");
  var row = table.insertRow(table.rows.length);
  
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);
  
  cell1.innerHTML = '<input type="text"  class="Qty" value="' + q + '"' + 'onchange="myRowTotalPOS(this.parentElement.parentElement)"/>';
  cell2.innerHTML = '<input type="text" id="rp"  value="' + p + '"' + ' readonly/>'; 
  cell3.innerHTML = '<input type="text" id="utotal" />';

  $('.Qty').each(function (){
      myRowTotalPOS($(this).parent().parent()[0]);
  });
  
}

Open in new window

JS only:

function AddNow() {
   var q = parseInt("2.00");
   var p = parseInt("2.50");
  
  var table = document.getElementById("Tab1");
  var row = table.insertRow(table.rows.length);
  
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);
  
  cell1.innerHTML = '<input type="text"  class="Qty" value="' + q + '"' + 'onchange="myRowTotalPOS(this.parentElement.parentElement)"/>';
  cell2.innerHTML = '<input type="text" id="rp"  value="' + p + '"' + ' readonly/>'; 
  cell3.innerHTML = '<input type="text" id="utotal" />';
  
  var totalRows=document.getElementsByClassName('Qty');
 
  for(var i=0;i<totalRows.length;i++){
     myRowTotalPOS(totalRows[i].parentElement.parentElement);
  }

  
}

Open in new window

The only change that I make in your input elements is that instead of id=Qty I am using class=Qty

Whing Dela Cruz

ASKER

Hi Leonidas, there was an error in the console that says; "myRowTotalPOS is not define". Which part of the program should I need to change please! (An error occured both JQuery and Js). Thanks!

ASKER CERTIFIED SOLUTION

Leonidas Dosas

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Whing Dela Cruz

ASKER

Thank you so much Leonidas, Its now working very fine. More power to you and God bless!