Member Avatar for nanna

hi,
I have 3 inputs for quantities to be entered by user, then when user enters a quantity , I should get 2 results ; one in the first add-on total input textfield which is the quantity entered by user multiply by the fixed price for the first add-on (eg.3.75). and the other result should appear in the last input textfield called (subtotal) which is the result of whatever user enter in quantity textfield multiply by the fixed price pluse the base price (eg.43.99).

<html dir="ltr">

<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Bear Toys</title>
<script type="text/javascript">

function alertInput1()
{
var qty1 = document.getElementById("input1").value;
if (qty1<0 )
{
alert("Quantity should be => 0");
return 0;
}else{
return qty1* 3.57();
}
}
function alertInput2()
{
var qty2 = document.getElementById("input2").value;
if (qty2<0 )
{
alert("Quantity should be => 0");
return 0;
}else{
 return qty2 *alertTot2();
}
}
function alertInput3()
{
var qty3 = document.getElementById("input3").value;
if (qty3<0 )
{
alert("Quantity should be => 0");
return 0;
}else{
return qty3 * alertTot3();
}
}
function alertTot1()
{
var tot1 = document.getElementById("input1").value;
 return input1 * 3.57;
 }
function alertTot2()
{
var tot2 = document.getElementById("input2").value;
 return input2 * 2.80;
 }
function alertTot3()
{
var tot3 = document.getElementById("input3").value;
 return input3 * 3.00;
}
function subTotal()
{
var sub = document.getElementById("sub").value;
 return 43.99() ;
 }
</script>
</head>
<body>

<form name="formInput" method="post" action="page33.jsp">
<p align="center">Bear Toys</p>
<p align="center">
<img border="0" src="bear2.jpg" width="156" height="167"></p>
<p align="center" dir="ltr">Base Price= $43.99</p>
<p align="center" dir="ltr">&nbsp;</p>
<p align="center">
&nbsp;</p>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
	<tr>
		<td width="178" align="center">
		<p>Add-on</td>
		<td width="213">
		<p align="center">Quantity</td>
		<td width="183" align="center">Add-on Price</td>
		<td>&nbsp;&nbsp;&nbsp; Add-on Total</td>
	</tr>
	<tr>
		<td width="178" align="center">Angel card game</td>
		<td width="213">
		<p align="center"><input type="text" name="input1"  onchange= "formInput.tot1.value = alertInput1(), formInput.sub.value = subTotal()"></td>
		<td width="183" align="center">$3.57 </td>
		<td><input type="text" name="tot1" value=""></td>
	</tr>
	<tr>
		<td width="178" align="center">Necklace kit&nbsp;</td>
		<td width="213">
		<p align="center"><input type="text" name="input2"  onchange="alertTot2()"></td>
		<td width="183" align="center">$2.80</td>
		<td><input type="text" name="tot2" value=""></td>
	</tr>
	<tr>
		<td width="178" align="center">Wood kit</td>
		<td width="213">
		<p align="center"><input type="text" name="input3"  onchange="alertTot3()"></td>
		<td width="183" align="center">&nbsp;$3.00</td>
		<td><input type= "text" name="tot3" value=""></td>
	</tr>
	<tr>
		<td width="178">&nbsp;</td>
		<td width="213">
		&nbsp;</td>
		<td width="183" align="center">Subtotals</td>
		<td><input type= "text" name="sub" ></td>
	</tr>
</table>
<p align="center">
&nbsp;</p>
<p align="center">
<input type="submit" value="Submit" name="buttonsubmit">
</p>
</form>
</body>

</html>
  • 2 Contributors
  • 3 Replies
  • 122 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by essential
Member Avatar for essential

You try this code:

<?xml version="1.0" encoding="utf-8"?>
<!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="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Language" content="en-us" />
<title>Bear Toys</title>
<style type="text/css">

html, body, div, img, table, td, th { border : none; }

html, body {
   text-align : center;
   width : auto; }

div, form {
   margin : 0;
   padding : 0; }

div#main {
  margin : 0% auto;
  text-align : left;
}

input[type="text"] {
   border : 1px solid #ccc;
   display : block;
   height: 20px;
   vertical-align : middle;
  text-align : center; }

table {
   border-collapse : collapse;
   margin : 10em auto;
   empty-cells : show;
   width : auto; }

input[type="submit"] {
   display : block;
   vertical-align : middle;
   text-align : center; }

td {
   border-bottom : 1px solid #ccc;
   padding : .250em 1em .250em 1em;
   vertical-align : middle;
   text-align : center;
   width : auto; }
td:first-child {
   text-align : left;
  background-color : #eee; }
  

.align-center { text-align : center; }

div.spacer {
   background-color : transparent;
   height : 20px;
   width : 100%;
}
 
</style>
<script type="text/javascript">
// <![CDATA[
var qty1, qty2, qty3, total1;

var calculate = function() {
function ids( elem, num ) {
if ( num ) 
return (( document.getElementById ) ? parseFloat( document.getElementById( elem ).value ) : parseFloat( document.all[elem].value ));

else
return elem = (( document.getElementById ) ? document.getElementById(elem) :  document.all[elem] );

}
 
   
ids("input1").onchange = function() {
qty1 = ids( this.id, true );
qty1 = ( qty1 <= 0 ) ? alert("Quantity should be => 0") : ids("tot1").value = ( qty1 * ids("val1", true ));
 };

ids("input2").onchange = function() {
qty2 = ids( this.id, true );
qty2 = ( qty2 <= 0 ) ? alert("Quantity should be => 0") : ids("tot2").value = qty2 * ids("val2", true);
 };

ids("input3").onchange = function() {
qty3 = ids( this.id, true );
qty3 = ( qty3 <= 0 ) ? alert("Quantity should be => 0") : ids("tot3").value = qty3 * ids("val3", true);
 };

ids("subtot").value = "$" + ((( ids("tot1", true )) + ids("tot2", true)) + ids("tot3", true));
 
};
window.onkeypress =  calculate;

// ]]> 
</script>
</head>
<body>
<div id="main">
<form id="formInput" method="post" action="page33.jsp">
<p class="align-center">Bear Toys</p>
<p class="align-center">
<img alt="bear2.jpg" src="bear2.jpg" width="156" height="167" /></p>
<p class="align-center" dir="ltr">Base Price= &#36;43.99</p>
<div class="spacer"></div>
<table summary="JavaScript Demo">
<tr>
<td>Add-on</td>
<td>Quantity</td>
<td>Add-on Price</td>
<td><pre>   Add-on Total</pre></td>
</tr>
<tr>
<td><label>Angel card game</label></td>
<td><input type="number" id="input1" name="input1" value="" size="6" /></td>
<td><input type="hidden" id="val1" name="val1" value="3.57" />&#36;3.57</td>
<td><input type="text" id="tot1" name="tot1" value="0" size="6" /></td>
</tr>
<tr>
<td><label>Necklace kit</label></td>
<td>
<input type="text" id="input2" name="input2" value="" size="6" /></td>
<td><input type="hidden" id="val2" name="val2" value="2.80" />&#36;2.80</td>
<td><input type="text" id="tot2" name="tot2" value="0" size="6" /></td>
</tr>
<tr>
<td><label>Wood kit</label></td>
<td>
<input type="text" id="input3" name="input3" value="" size="6" /></td>
<td><input type="hidden" id="val3" name="val3" value="3.00" />&#36;3.00</td>
<td><input type= "text" id="tot3" name="tot3" value="0" size="6" /></td>
</tr>
<tr>
<td style="background-color : #eee;"><input type="submit" value="Submit" id="buttonsubmit" name="buttonsubmit" /></td>
<td style="background-color : #eee;"></td>
<td style="background-color : #eee;"><label>Subtotals</label></td>
<td style="background-color : #eee;"><input type="text" id="subtot" name="subtot" value="0" size="15" /></td>
</tr>
</table>
<div class="spacer"></div>
<div>
</div>
</form>
</div>
</body>
</html>
Member Avatar for nanna

hi,
thanks for your effort, but I`de like to know why there are 2 tables with the same add-ons??
Additionally, when I enter a quantity and enter Tab, I get nothing in the following input textfield nor in the subtotal ????
I need validation for quantities input that prevent user from entering invalid number and force him to enter valid number. I use .focus() and .select() but they do not work ?????

Member Avatar for essential

It was based in your posted code! It's working fine in IE6 and Opera... Anyway, it's just the basic of the whole function, it can be expanded.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.