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!
Jump to PostThats 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
Jump to PostGraphix is right!
and you can use something like jQuery, which makes JS programming easier.
Something like:
$(document).ready(function(){ // Your code here });
Jump to Posttry:
<!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> …
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
Graphix is right!
and you can use something like jQuery, which makes JS programming easier.
Something like:
$(document).ready(function(){
// Your code here
});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?
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...
I don't know how the update() function is formatted. Post your code else I can't help.
~G
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!
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>Thank you very much for helping me out.
I cannot try this now, i will try your code tomorrow and post my findings!
I couldn't wait till tomorrow!
Your code does exactly what it should Hielo, thanks a LOT!!
I couldn't wait till tomorrow!
LOL. Glad to help. Be sure tom mark the question solved.
Regards,
Hielo
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.