0

Hi everyone,

i have a piece of javascript that calculates 2 input fields (price * qty) whenever i type in the input field (qty) that uses this :

onkeyup="update(this);"

Now what i want is to execute this handling when the page loads, because sometimes there are already values (php & mysql) in the qty field, so the subtotal must already be there.

Any thoughts on how to accomplish this?

greetings piet!

4
Contributors
10
Replies
13
Views
7 Years
Discussion Span
Last Post by hielo
Featured Replies
  • Thats fairly easy: [CODE]<script type='text/javascript'>window.onload=function(){ update(document.getElementById('qty')); }</script>[/CODE] You should place this beneath the form HTML, so that the id already exists. ~G Read More

  • Graphix is right! and you can use something like jQuery, which makes JS programming easier. Something like: [code] $(document).ready(function(){ // Your code here }); [/code] Read More

  • 1

    try:[CODE] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>hielo</title> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> $(function(){ $('input[name^="qty"]').each(function(){ update(this); }); }); function update(el) { var tr = el.parentNode; while (tr.nodeName.toLowerCase() != 'tr'){ tr = tr.parentNode; } var qty= tr.cells[3].getElementsByTagName('input')[0].value; var price = tr.cells[2].getElementsByTagName('input')[0].value; var total = Math.round(qty*price*100); tr.cells[5].innerHTML … Read More

1

Thats fairly easy:

<script type='text/javascript'>window.onload=function(){ update(document.getElementById('qty')); }</script>

You should place this beneath the form HTML, so that the id already exists.

~G

Votes + Comments
Great helper
1

Graphix is right!

and you can use something like jQuery, which makes JS programming easier.

Something like:

$(document).ready(function(){
   // Your code here
});
0

Thanks a lot graphix!!!

this works as it should, however, the form is created "dynamically" i mean the row is in a php while, with your code it only updates the upper row in the form, is there a way to affect the entire while loop?

0

I tried to inlcude the script you gave me inside the while loop, but unfortunately this does not help.
Still only the upper row is being updated...

0

I don't know how the update() function is formatted. Post your code else I can't help.

~G

0

Here is the java in the header

function update(el)
{

var tr = el.parentNode;
while (tr.nodeName.toLowerCase() != 'tr'){
tr = tr.parentNode;
}


var qty= tr.cells[3].getElementsByTagName('input')[0].value;
var price = tr.cells[2].getElementsByTagName('input')[0].value;


var total = Math.round(qty*price*100);


tr.cells[5].innerHTML = cToD(total);


var rows = tr.parentNode.rows;
var i = rows.length;
var gTotal = 0;
while (i--){
gTotal += Math.round(rows[i].cells[5].innerHTML * 100);
}
document.getElementById('grandTotal').innerHTML = "<div class=\"field\"><input type=\"hidden\" size=\"3\" class=\"textbox\" id=\"total\" name=\"total\" value=\""+ cToD(gTotal) +"\"/></div>"+ cToD(gTotal) +"";
}


function cToD(c)
{
if (c<10) return '0.0' + c;
if (c<100) return '0.' + c;
c += '';
return (c.substring(0,c.length-2)) + '.'
+(c.substring(c.length-2));
}

Then in de form is this rule:

<td align=left ><input type=text name=qty[] size="5" maxlength="4" class="textbox" onkeyup="update(this);"></td>

At the end of the form is your new rule:

window.onload=function(){update(document.getElementById('qty[]')); }

Appreciate your help!

1

try:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>hielo</title>
	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
	<script type="text/javascript">
	$(function(){
		$('input[name^="qty"]').each(function(){
			update(this);
		});
	});

function update(el)
{
	var tr = el.parentNode;
	while (tr.nodeName.toLowerCase() != 'tr'){
		tr = tr.parentNode;
	}


	var qty= tr.cells[3].getElementsByTagName('input')[0].value;
	var price = tr.cells[2].getElementsByTagName('input')[0].value;

	var total = Math.round(qty*price*100);


	tr.cells[5].innerHTML = cToD(total);


	var rows = tr.parentNode.rows;
	var i = rows.length;
	var gTotal = 0;
	while (i--){
		gTotal += Math.round(rows[i].cells[5].innerHTML * 100);
	}
	document.getElementById('grandTotal').innerHTML = "<div class=\"field\"><input type=\"hidden\" size=\"3\" class=\"textbox\" id=\"total\" name=\"total\" value=\""+ cToD(gTotal) +"\"/></div>"+ cToD(gTotal) +"";
}


function cToD(c)
{
	if (c<10) return '0.0' + c;
	if (c<100) return '0.' + c;
	c += '';
	return (c.substring(0,c.length-2)) + '.'+(c.substring(c.length-2));
}
	</script>
	</head>
	<body>
	<!-- Your table stuff goes here -->
	</body>
</html>
Votes + Comments
Coding is spot on!
0

Thank you very much for helping me out.

I cannot try this now, i will try your code tomorrow and post my findings!

0

I couldn't wait till tomorrow!
Your code does exactly what it should Hielo, thanks a LOT!!

0

I couldn't wait till tomorrow!

LOL. Glad to help. Be sure tom mark the question solved.

Regards,
Hielo

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.