PDA

View Full Version : Need to add price based on a input from a text box



Pompiuses
Sep 16th, 2004, 01:37 PM
I'm in the process of developing a small webshop.

I need a javascript which, on the fly, calculates the price of a product based on the quantity on the user enteres (in a text box).

Here's how I imagine it would look like:

<table border="1" width="100%">
<tr>
<td width="50%"><b>PRICE</b></td>
<td width="50%"><b>QUANTITY</b></td>
</tr>
<tr>
<td width="50%">12</td>
<td width="50%"><input type="text" name="quantity[id1]" size="5" value="0"></td>
</tr>
<tr>
<td width="50%">20</td>
<td width="50%"><input type="text" name="quantity[id2]" size="5" value="0"></td>
</tr>
<tr>
<td width="50%">SUM</td>
<td width="50%">sum automagically shows in this cell when users enter quantity</td>
</tr>
</table>

Can anyone help me out?

Dean Forant
Sep 16th, 2004, 07:07 PM
A couple of questions?

1) are the prices coming off a database??
2) I'm assuming that theres no definate number of items that will appear on the form field right..

I have a script that I will dig out and re-write for your case. and submit it here for you..

Pompiuses
Sep 16th, 2004, 08:01 PM
A couple of questions?

1) are the prices coming off a database??
2) I'm assuming that theres no definate number of items that will appear on the form field right..

I have a script that I will dig out and re-write for your case. and submit it here for you..

Yes the products are coming from a database, so there's no definate number of products. Every product has it's own unique id.

jamescover
Sep 16th, 2004, 09:03 PM
This should get you started:


<script type="text/javascript">
<!--

function getVal(){

var doc = document['oFrm'];
doc['tot'].value = ((doc['id1'].value)/1) + ((doc['id2'].value)/1);
}

//-->
</script>
<form name="oFrm">
<input name="id1" type="text" onkeyup="javascript:getVal();" onkeydown="javascript:getVal();" />
<input name="id2" type="text" onkeydown="javascript:getVal();" onkeyup="javascript:getVal();" />
<input name="tot" type="text" />
</form>

In javascript, the mathematical + operator is also a concatenation operator, but all text field values are of the type string, so adding 2 fields, like 2 + 2 would give you 22, not 4. The result of concatenating the 2 strings. So you can either use parseInt() to tell javascript that the result is an integer, or just use another mathematical operator, like /(div) or *(mult).

PHP:

$tot = $_GET['tot'];

Anyway, hopefully, the above will get you started in the right direction.


-james

Dean Forant
Sep 17th, 2004, 12:47 AM
Hopfully This will help you out This is basically how I'm doing it with an MySQL database not sure if your using that and ASP as a scripting language but this is based on that


you query the database and display the results using a while/wend and for each occurance of a record in the Quantitys field you add an onchnge event.

so basically you have these form fields..

<input type="text" name="Quantity[id]" value="1" ( this is assuming that a selected item defaults to a quantity of 1)

<input type="text" name="itemprice[id]" value = (whatever recordset field in your database

holds the price) readonly="true">

<input type="text" Name = "itemTotal[id]" value=(put the itemprice field from the database

table here)

now with the quantity form element make it like this

<input type ="Text" name="Quantity[id]" value = "1" onChange="{formName}.ItemTotal[id].value

= {formName}.Quantity[ID].value*{formName}.ItemPrice[ID].vlaue">



hears a quick example of a typical Table that populates items to change quantitys on you can

also add a checkbox if you wanted to to select the items I didn't include one. this is just

to give you a jist of how changing quantity is done

<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<form name="ItemDisplay" method="post" action="{page that processes order}">
<table width="100%" border=" ">
<tr>
<td>Description</td>
<td>Item Price</td>
<td>Quantity</td>
<td>Item Total</td>
</tr>
<%
' Set up recordset to display items (this is assuming you already have the database

connection open)
set rsMatchItems = Server.CreateObject(ADODB.Recordset)
rsMatchItems.open "select * from items",conn
' the con is what I have for a database connection variable yours may be different
while not rsMatchItems.eof
ItemID = rsMatchItems("ItemID")
%>
<tr>
<td><%response.write("Description")%></td>
<td><input type="text" name = "<%response.write "ItemPrice"&ItemID%>"

ReadOnly="true"></td>
<td><input type="text" name = "<%response.write "Qty"&ItemID%>"

onChange="ItemDisplay.<%response.write

"ItemTotal"&ItemID%>.value=this.value*ItemDisplay.<%response.write

"ItemPrice"&ItemID%>.value"></td>
<td><input type="text" name = "<%response.write "ItemTotal"&ItemID%>"</td>
</tr>
<%
rsMatchItems.MoveNext
wend
rsMatchItems.close
rsMatchItems = nothing
%>
</table>
</form>
</body>
</html>


this is assuming your using asp for you server side scripting..

Hop hope this helps and hopfully I'll be finishing my article on builing a simple shopping

cart soon and upload it somewhere