ok.
first:
Code:
document.forms["form"].elements["quantity"].value;
is invalid for a select element. IE support it, but it's not the correct way to get the value back.
Code:
var selElm=document.forms['form'].Quantity;
var el2=selElm.options[selElm.selectedIndex].value;
is the right way to go.
Second: You have included 2 times the section
Code:
<script language="javascript">
changenow();
</script>
So, you do 2 times all the operations.
Your error comes from the fact that the browser interpret javascript WHEN BUILDING THE PAGE. So, as the call is made after the declaration of "div id=join_auction_fee", it passes this without a hitch.
But, "div id=totalcost" has still not been rendered, so it don't find it.
Moving the changenow() at the end of the page, it will find the element, and solve your problem.
Third:
Normally, a variable in javascript has to be initialized with var {variable}={value or null}
Some browser can react in strange ways depending of the quircks mode is active or not if you don't declare them.
Too, even if you search for something, consider that you won't always find it.
Before processing it, test if to see if you have found it
Code:
var el=false;
if (document.getElementById) {
el = document.getElementById(obj) ;
}
else if (document.all){
el = document.all[obj];
}
else if (document.layers){
el = document.layers[obj];
}
if(el!==false){
el.innerHTML = "<b>$"+num+"</b>";//
}
else{
alert('Target element '+obj+' not found.');
}
In the same optic, don't blindly trust what the users gives you as an input.
Code:
var el1=document.forms["form"].elements["bid"].value;
...
var show2 = el1*el2;
What if the user don't enter a numeric value in the text field ?
Force the computing to get a numeric value with parseFloat(string)
Code:
var el1=parseFloat(document.forms["form"].elements["bid"].value);
...
var show2 = el1*el2;
This will ensure that the value of el1 is always a numeric or null value.
So you know, <script language=> is deprecated.
You should use
Code:
<script type="text/javascript">
And last thing, I have replaced the php variables with plain numbers for my tests, but take care of the operator order:
Code:
var show = show2*2+3;
this will be interpreted as
Code:
var show = (show2*2)+3;
and not
Code:
var show = show2*(2+3);
because like in "real" mathematics, the division and multiplication operators have a greater precedence over addition and substraction.
This is the file I ended up with:
HTML 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" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Testing Auction-Place Your Bid</title>
</head>
<body>
<script type="text/javascript">
function change_content(obj, num) {
var el=false;
if (document.getElementById) {
el = document.getElementById(obj) ;
}
else if (document.all){
el = document.all[obj];
}
else if (document.layers){
el = document.layers[obj];
}
if(el!==false){
el.innerHTML = "<b>$"+num+"</b>";//
}
else{
alert('Target element '+obj+' not found.');
}
}
function changenow(){
var el1 = document.forms["form"].elements["bid"].value;
var selElm=document.forms['form'].Quantity;
var el2=selElm.options[selElm.selectedIndex].value;
var show2 = el1*el2;
var show = show2*2+3;
show2 = show2+show;
show =Math.round(show*100)/100;
show2 =Math.round(show2*100)/100;
change_content('join_auction_fee',show);
change_content('totalcost',show2);
}
</script>
<?php
if ((!is_numeric($bid)) or ($bid<$minimum_price)){ $error.="You have entered an incorrect amount."; }
if ((!is_numeric($quantity)) or ($quantity>$maximum_quantity)){ $error.="Sorry, but you are not allowed to order so many copies for the same drawing."; }
if ($error){
errormessage($error);
} else {
mysql_query("INSERT INTO bids (...) VALUES('...')") or die(mysql_error());
successmessage("Thank you for your contribution!");
}
?>
<form name="form" method="post" action="index.php">
<table width=100% align=center cellpadding=1 cellspacing=1>
<tr align=left>
<td>Quantity:</td>
<td><select onChange="javascript:changenow();" name="Quantity">
<option value="1">1</option>
<option value="2">2</option>
</select></td>
</tr>
<tr align=left>
<td>Your bid amount:</td>
<td><input onkeyup="javascript:changenow();" name="bid" maxlength=3 type="text"></td>
</tr>
<tr align=left>
<td>Comments:</td>
<td><textarea style='width: 150px;' name="comments"></textarea></td>
</tr>
</table>
<table width=100% align=center cellpadding=1 cellspacing=1>
<tr>
<td align=center>Flat fee:</td>
<td>
<div id='join_auction_fee'></div>
</td>
</tr>
<tr>
<td>Total Cost:</td>
<td>
<div id='totalcost'></div>
</td>
</tr>
</table>
<br />
<br />
<div align=center><input type="submit" name="placebid" value="Place your Bid!"></div>
</form>
<script language="javascript">
changenow();
</script>
</BODY>
</HTML>
