onChange() and Javascript
I have looked at this and for some reason it is not working. Please could you tell me if thier is anything missing from this code?
name="order" action="tune.php" method="POST"
table border="0"
Mp3 in your Cart
Cost per mp3 0.95p
# of singles:
<?php
$subtotal = $_POST['subtotal'];
$vat = $_POST['tax'];
$total = $_POST['total'];
echo "$subtotal";
echo "$vat";
echo "$total";
?>
decibel.places posted this at 15:10 — 12th February 2009.
He has: 1,494 posts
Joined: Jun 2008
You need to enclose code in the code tags, use the 3rd icon from the right in the toolbar:
<html>
<head>
<title>Untitled Document</title>
<script language="javascript" type="text/javascript">
<!--
function orderUpdate(){
const mp3 = 0.95;
const VAT = 0.015;
var mptune = parseInt(document.getElementById("songs").value);
if(isNaN(mptune))
mptune = 0;
var subTotal = mptune * mp3;
var taxes = subTotal * VAT;
var total = subTotal + taxes;
document.getElementById("subtotal").value = "£" + subTotal.toFixed(2);
document.getElementById("tax").value = "£" + taxes.toFixed(2);
document.getElementById("total").value = "£" + total.toFixed(2);
}
-->
</script>
</head>
<body>
<form name="order" action="tune.php" method="POST">
<table border="0">
<tr><td colspan="2" align="center">Mp3 in your Cart</td></tr><br/>
<tr><td colspan="2" align="center">Cost per mp3 0.95p</td></tr><br/>
<tr><td width="150"># of singles:</td><td><input type="text" name="mp" id="songs" value="" onChange="orderUpdate();" /></td></tr><br/>
<tr><td width="150">Sub Total:</td><td><input type="text" name="subtotal" id="subTot" value="" onChange="orderUpdate();" /></td></tr><br/>
<tr><td width="150">VAT:</td><td><input type="text" name="vat" id="tax" value="" onChange="orderUpdate();" /></td></tr><br/>
<tr><td width="150">Total:</td><td><input type="text" name="total" id="total" value="" onChange="orderUpdate();" /></td></tr><br/>
</table>
</form>
</body>
</html>
This is the PHP code for the <form>
<html>
<body>
<?php
$subtotal = $_POST['subtotal'];
$vat = $_POST['tax'];
$total = $_POST['total'];
echo "$subtotal";
echo "$vat";
echo "$total";
?>
</body>
</html>
decibel.places posted this at 15:19 — 12th February 2009.
He has: 1,494 posts
Joined: Jun 2008
two potential problems jump out:
1. if you place PHP code in a html page, make sure your server settings allow that PHP in HTML with .htaccess - you could also place the PHP code in a .php page
one way to test: add the phpinfo() function and see if you get the output:
<?phpphpinfo();
?>
2. your form field is named "vat" but your POST variable is for "tax"
<tr><td width="150">VAT:</td><td><input type="text" name="vat" id="tax" value="" onChange="orderUpdate();" /></td></tr><br/>
$vat = $_POST['tax'];
busman posted this at 16:11 — 12th February 2009.
They have: 20 posts
Joined: Dec 2008
Still I have no joy. I done the necessary changes and it just wont work. Please bear in mind that the PHP code is in a seperate file
busman posted this at 15:46 — 12th February 2009.
They have: 20 posts
Joined: Dec 2008
I have done changes and it wont work.
decibel.places posted this at 15:57 — 12th February 2009.
He has: 1,494 posts
Joined: Jun 2008
try removing const:
const mp3 = 0.95;const VAT = 0.015;
should be
mp3 = 0.95;VAT = 0.015;
I do not think "const" is valid JavaScript, it is "reserved for the future" in ECMA
Also if you declare a variable locally with "var" inside a function, it will wipe out previous instances/values every time the function is called. You can safely remove "var ".
If you need to initialize a variable, do it globally with var outside the function.
In JavaScript it is not necessary to declare variables with var, but it is considered good programming form.
busman posted this at 16:20 — 12th February 2009.
They have: 20 posts
Joined: Dec 2008
I did the changes and it work. The data in the form is not updating according to the orderUpdate() function. I feel that the code is write. I have tested the PHP info() code and it works perfectly.
decibel.places posted this at 17:19 — 12th February 2009.
He has: 1,494 posts
Joined: Jun 2008
You need to submit the form, either with a submit button or some event that triggers "order.submit()"
OnChange does not occur when the change is made, but rather when a change is made AND the field loses focus
1. you can add a listener that stores the quantity number and updates if it is changed - that is moderately advanced JS, involving timers and such
2. you could add an "Update" button that does not need to do anything really, just remove focus from the form field - this is the easiest solution
3. could use a drop-down list for the quantity, so when selected it would trigger onChange - working with select lists is intermediate JS
I would remove the onChange method from the other fields anyway - in fact, to prevent someone from changing the total, for example, I would add
onFocus="this.blur()"which pretty much prevents tampering with the text field
additionally, I would make the defaults show onload for 1 mp3 (set them in the value="")
other TWF members will now enlighten you about the need to verify and sanitize your form inputs... I agree, but that is another issue, once you have the damn thing working!
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.