[SOLVED] Update Order Total w/o refresh

bhavin_85 · April 10, 2007

hey guys/gals

I have create an order form in php and i need to write some javascript that will automatically update the total without refreshing the page.

the price is carried over to the page by the url

http://www.site.com/page.php?id=1&price=15

as shown above.

there is only 1 item in each page so what i need the page to do is just update the total field when the user enters the quantity that they want

ive found examples online but they all have a fixed price nothing dynamic like this

any ideas?

paul2463 · April 10, 2007

have a button they push when they have entered the quantity required which runs this function

function setTotal()
{
var x=document.getElementById("quantity");
var y=document.getElementById("price");
var z = x*y;
document.getElementById("total").value = z;
}

bhavin_85 · April 10, 2007

ok im sorry but i am sooo shit with javascript

could u please tell me how to do it...ive attached my code

<?
session_start();
include('config.php');
$username = $_SESSION['username'];
$filmid = $_GET['itemid'];
$price = $_GET['price'];
?>
<html>
<head>
<title>Online DVD Shop</title>
<script>
function setTotal()
{
var x=document.getElementById("quantity");
var y=document.getElementById("price");
var z = x*y;
document.getElementById("total").value = z;
}
</script>
</head>
<body>
<table align="center" valign="top" width="700" cols="3">
<tr>
<td align="center" colspan="3">
<font size="+5">Online DVD Shop</font>
</td></tr>
<tr>
<td align="left" valign="top" colspan="3">
<?
$sql="SELECT customerid FROM regcustomer where username='$username'";
$query=mysql_query($sql);
$row=mysql_fetch_assoc($query);
$customerid=$row['customerid'];
$sql2="SELECT name FROM customer WHERE customerid='$customerid'";
$query2=mysql_query($sql2);
$row2=mysql_fetch_assoc($query2);
$name=$row2['name'];
if ( empty($_SESSION['username'])){
echo "<a href='login.php'>Login In or Register</a>";
}
else {
echo "Welcome to our online shop $name";
echo "<a href='logout.php'>Logout</a>";
}
?>
</td></tr>
<tr>
<td align="center"><a href="default.php">Home</a></td>
<td align="center"><a href="search.php">Search</a></td>
<td align="center"><a href="registration.php">Register</a></td>
</tr>
<tr>
<td colspan="4" align="center"><font size="+2">Purchase Confirmation</font></td>
</tr>
<tr>
<td><b>Title</b></td>
<td><b>Price</b></td>
<td><b>Quantity</b></td>
<td><b>Total</b></td>
</tr>
<form name="order" method="post" onSubmit="">
<tr>
<td>
<? 
$sql3 = "SELECT * FROM film WHERE filmid='$filmid'";
$query3 = mysql_query($sql3) or die(mysql_error());
$row3 = mysql_fetch_assoc($query3);
$title = $row3['title'];

echo $title;
?>
</td>
<td>
<input name="price" type="text" value="<? echo $price; ?>" readonly="readonly"></input>
</td>
<td>
<input name="" type="text" value="1" onChange=""></input>
</td>
<td>
<input name="total" type="text" readonly="readonly" value=""></input>
</td>
</tr>
<tr>
<td>
<input type="button" value="Update" onClick="return setTotal()"></input>
</td>
</tr>
</form>
</table>
</body>
</html>

thank you your help is really appreciated

nogray · April 10, 2007

add ids to your input fields

<input name="price" id="price" type="text" value="<? echo $price; ?>" readonly="readonly">

<input name="quantity" id="quantity" type="text" value="1" onChange="setTotal()">

<input name="total" id="total" type="text" readonly="readonly" value="">

and this should do it

bhavin_85 · April 10, 2007

ive jsut set the id's and it came up with NaN in the total field ??? atleast the onchange it working but its jsut not bringin up the right value

paul2463 · April 11, 2007

<input name="total" id="total" type="text" readonly="readonly" value="<? echo $price; ?>">

as the quantity defaults to 1 then the default total should also be the same as the price of one. I have included that in the above line

change the function to this one

function setTotal()
{
var x=Number(document.getElementById("quantity"));
var y=Number(document.getElementById("price"));
var z = x*y;
var ans = z.toFixed(2);
document.getElementById("total").value = ans;
}

I have cast the values of quantity and price as numbers, NaN means that one or both of the variables you are trying to do maths with is Not a Number. I have also added the line to format the number in the form of 2 decimal places (23.45)

bhavin_85 · April 11, 2007

hi paul

ive made the changes that you suggested, but it is still showing NaN in the total field ???

script

<script>
function setTotal()
{
var x=Number(document.getElementById("quantity"));
var y=Number(document.getElementById("price"));
var z = x*y;
var ans = z.toFixed(2);
document.getElementById("total").value = ans;
}
</script>

form

<form name="order" method="post" onSubmit="">
<input name="price" id="price" type="text" value="<? echo $price; ?>" readonly="readonly"></input>
</td>
<td>
<input name="quantity" id="quantity" type="text" value="1" onChange="setTotal()"></input>
</td>
<td>
<input name="total" id="total" type="text" readonly="readonly" value="<? echo $price; ?>"></input>
</form>

paul2463 · April 11, 2007

do me a favour and use this version of the function, it will put up an alert box for each of the values, you will find out if any of them is throwing the problem as they should all be numbers

<script>
function setTotal()
{
var x=Number(document.getElementById("quantity"));
alert("quantity = " + x);
var y=Number(document.getElementById("price"));
alert("price = " + y);
var z = x*y;
var ans = z.toFixed(2);
alert("total = " + ans);
document.getElementById("total").value = ans;
}
</script>

bhavin_85 · April 11, 2007

the first alert says quality = NaN

the second says price = NaN

the third says total = NaN

Do you think this might have something to do with the fact that i have set a value = 1 in the quantity field?

paul2463 · April 11, 2007

I think I may have made a mistake and missed out the value part try this one anyway please

<script>
function setTotal()
{
var x=Number(document.getElementById("quantity").value);
alert("quantity = " + x);
var y=Number(document.getElementById("price").value);
alert("price = " + y);
var z = x*y;
var ans = z.toFixed(2);
alert("total = " + ans);
document.getElementById("total").value = ans;
}
</script>

bhavin_85 · April 11, 2007

LEGEND

that works perfectly mate

thank you verrry much

paul2463 · April 11, 2007

bloody values......

just remove the alert boxes now then and if it does what you want it to do can you please click on the SOLVED button

Sign In

[SOLVED] Update Order Total w/o refresh

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information