html help

johnkennykumar · 03-19-2009, 08:28 AM

Hi everyone,

The following code is working quite well.I need a small change though.When i click the button the corresponding amount gets displayed in a text box,iam struggling to display the amount like a plain text.Any help would be appreciated.thank you.

<html>
<head>
<title>hello</title>
<script type="text/javascript">
function calculateTotal(frm){
var total = 0;
if (frm.tablesponsor[0].checked) {total = 600}
if (frm.tablesponsor[1].checked) {total = 100}
total = total * (frm.individualtickets.value);
total = total.toFixed(2);
frm.total.value = "$" + total;
}
</script></head>
<body>
<td height="392" colspan="3"><form id="form1" name="form1" method="get" action="">
<table width="800" border="0" align="left" cellpadding="7" cellspacing="0">
<tr>
<td colspan="7" valign="top"><div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0">
<table width="800" height="19" border="0" cellpadding="7" cellspacing="0">
<tr>
<td width="116" valign="top">

<div align="center">
<input name="tablesponsor" type="radio" id="tablesponsor" tabindex="1" value="600" onClick="calculateTotal(this.form)" />
<input name="tablesponsor" type="radio" id="tablesponsor" tabindex="1" value="100" onClick="calculateTotal(this.form)" />
</div>
<div align="right"></td>
<td width="656"><span class="style5"><strong>2gb</strong></span><br />
</td>
<tr>
<div align="right"></div></td>
<td ><span class="style5"><strong>4gb</strong></span><br />
</td>
<tr>
</div>
</table>
</div>
<div class="CollapsiblePanelContent"> </div>
</div></td>
</tr><tr>
<td width="125" height="50" valign="top">
<div align="center">
<select name="individualtickets" id="individualtickets" value="50" tabindex="16" onChange="calculateTotal(this.form)" >
<option value "0" ># of Tickets</option>
<option value="1">1 Ticket</option>
<option value="2">2 Tickets</option>
<option value="3">3 Tickets</option>
<option value="4">4 Tickets</option>
<option value="5">5 Tickets</option>
<option value="6">6 Tickets</option>
<option value="7">7 Tickets</option>
<option value="8">8 Tickets</option>
<option value="20">20 Tickets</option>

</select>
</div></td>
</tr>

<tr>
<td height="32" colspan="7" valign="top" bgcolor="#FFFFCC"><div align="center">
<p> </p>
<p><strong>TOTAL AMOUNT DUE: <input type="text" name="total" readonly onfocus="this.blur()" value="$0.00" />
</strong></p>
<p> </p>
</div></td>
</tr>
</table>
</form>
</body>

abduraooft · 03-19-2009, 09:46 AM

Add an inline element, say

Code:

<span id="myelement"></span>

into your document and then at the end of your function add

Code:

var elm=document.getElementById(myelement);
elm.innerHTML="$" + total;

TinyScript · 03-19-2009, 10:48 PM

great script. I'm going to be using this in the near future. Here's my adaptation with the help from abduraooft.

Code:

<html>
<head>
<title>Hardwood Floors PDX Hardwood Floor Services Online Estimates</title>
<h1>Hardwood Floors PDX Online Estimator</h1>
<h2>Formulate an estimate for the cost your hardwood floor work.</h2>

<script type="text/javascript">

function calculateTotal(frm){
			var squarefootage=1;
			var total = 1;
if (frm.service[0].checked) {squarefootage = frm.footage.value;total = 1}   /*Premium service*/
if (frm.service[1].checked) {squarefootage = frm.footage.value;total = .85} /*Budget service*/
if (frm.service[2].checked) {squarefootage = frm.footage.value;total = .75} /*Rehab service*/

total = total * (frm.selectedservice.value)

if (total>5){squarefootage=1}
total = total*squarefootage;
total = total.toFixed(2);
var elm=document.getElementById("myelement");
elm.innerHTML=
"Your Estimate: $"	/*begining output text*/
 + total +
" . <br>Would you like to schedule the work? ";	/*ending output text*/
}

</script>
</head>
<body>
<form id="form1" name="form1" method="get" action="">
<div align="center">
	   <label for="footage">Enter your square footage</label><br>
<input type="text" id="footage" tabindex="1" value="0" onClick="calculateTotal(this.form)" />
<br>
<input name="service" type="radio" 
	id="Premium" tabindex="1" value="600" onClick="calculateTotal(this.form)" />
<label for="Premium">Premium service. Xtra fine sanding 3 coats included</label>
<br>
<input name="service" type="radio" 
	id="Budget" tabindex="1" value="100" onClick="calculateTotal(this.form)" />
<label for="Budget"> Budget service.  Fine sanding with 2 coats included </label>
<br>
<input name="service" type="radio" 
	id="Rehab" tabindex="1" value="100" onClick="calculateTotal(this.form)" />
<label for="Rehab">Rehab service. Ideal for rental units 2 coats included</label>
</div>
<div align="center">Sanding Options  <br>
<select id="selectedservice" value="50" tabindex="16" onChange="calculateTotal(this.form)">
<option value="1.50">Old floors Natural 3 coats $1.50 per foot</option>
<option value="1.75">Old floors Stain   3 coats $1.75 per foot</option>
<option value="1.25">New floors Natural 3 coats $1.25 per foot</option>
<option value="1.50">New floors Stain   3 coats $1.50 per foot</option>
<option value="250">Stairs with  ballisters $250/11 treads. Staining $50 extra</option>
<option value="200">Stairs w/out ballisters $200/11 treads. Staining included </option>
<option value=".60">Buff and recoat existing floors with  repairs $.60</option>
<option value=".35">Buff and recoat existing floors w/out repairs $.35</option>
</select>
<p><span id="myelement"></span>
</p>
</div>
</form>
</body>

johnkennykumar · 03-20-2009, 01:58 PM

Well i wrote this script and its doing fine.There are three quantity text boxes and as i select the quantity the price corresponding to the quantity gets added up.the help i need here is that i need to print the quantity of the three keys at the bottom ex:2 basic 3 pro 5 cor and the total price of all the three keys.Struggling a litle here any help, and i would be very thankful
Thank you
<code>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>AP3 - Encryption Redefined</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="ap3.css" type="text/css" rel="stylesheet" />
<link href="menu.css" type="text/css" rel="stylesheet" />
<link href="btn.css" type="text/css" rel="stylesheet" />

<script type="text/javascript">
function calculateTotal(frm){
var total = 0;
if (frm.tablesponsor[0].checked) {total = 100}
if (frm.tablesponsor[1].checked) {total = 200}
if (frm.tablesponsor[2].checked) {total = 300}
if (frm.tablesponsor[3].checked) {total = 400}
document.getElementById('divId1').innerHTML = "$" + total;
total = total * (frm.individualtickets.value);
total = total.toFixed(2);
document.getElementById('divId').innerHTML = "$" + total;
}
function calculateTotal1(frm){
var total = 0;
if (frm.tablesponsor1[0].checked) {total = 100}
if (frm.tablesponsor1[1].checked) {total = 200}
if (frm.tablesponsor1[2].checked) {total = 300}
if (frm.tablesponsor1[3].checked) {total = 400}
document.getElementById('divId2').innerHTML = "$" + total;
total = total * (frm.individualtickets1.value);
total = total.toFixed(2);
document.getElementById('divId3').innerHTML = "$" + total;
}
function calculateTotal2(frm){
var total = 0;
if (frm.tablesponsor2[0].checked) {total = 100}
if (frm.tablesponsor2[1].checked) {total = 200}
if (frm.tablesponsor2[2].checked) {total = 300}
if (frm.tablesponsor2[3].checked) {total = 400}
document.getElementById('divId4').innerHTML = "$" + total;
total = total * (frm.individualtickets2.value);
total = total.toFixed(2);
document.getElementById('divId5').innerHTML = "$" + total;
}

</script>

</head>
<body>
<div id="main">
<form id="form1" name="form1" method="get" action="">
<div id="top">
<div class="ts-1">

</div>
</div>
<div id="menu">

</div>

<div id="content">
<div id="bigboxgrad">

</div>
<div id="bigboxcont">
<div class="ts-5">

<div class="ts-5-4">
<div class="buynowtop">
<img height="68" alt="" src="img/buynow_toppic.jpg" width="676" />

</div>
</div>
<div class="ts-5-5"> </div>
<div class="ts-5-6">
<div class="ts-6">

</div>
</div>

</div>
<img height="10" alt="" src="img/s.gif" width="1" />
<div><img alt="" src="img/medbox_greytop.gif" /></div>
<div id="prodgrey">
<div><img height="4" alt="" src="img/medbox_whitetop.gif" width="908" /></div>
<div id="prodwhite">
<div class="ts-7">
<div class="ts-7-1"><img height="103" alt="" src="img/logo_basickey.gif" width="146" /></div>
<div class="ts-7-2"><img height="172" alt="Basic Key" src="img/prod_big_basic.jpg" width="145" /><br /></div>
<div class="ts-7-3">

<div id="btn_moreinfo">

</div>
<p></p>
</div>
<div class="ts-7-4">

<div class="ts-8">
<div class="ts-8-1"><img height="18" alt="" src="img/buynow_gb.gif" width="146" /></div>
<div class="ts-8-2">
<div class="ts-9">
<div class="ts-9-1">
<div align="center"><input id="tablesponsor" type="radio" checked="-1" name="radio" value="" onClick="calculateTotal(this.form)"/> </div>
</div>
<div class="ts-9-2">
<div align="center"><input id="tablesponsor" type="radio" name="radio" value="" onClick="calculateTotal(this.form)"/> </div>
</div>
<div class="ts-9-3">
<div align="center"><input id="tablesponsor" type="radio" name="radio" value="" onClick="calculateTotal(this.form)"/> </div>
</div>
<div class="ts-9-4">
<div align="center"><input id="tablesponsor" type="radio" name="radio" value="" onClick="calculateTotal(this.form)"/> </div>
</div>
</div>
</div>
<div class="prodbuy- ts-8-3" id= "divId1"><strong>$0</strong></div>
<div class="ts-8-4"><img height="20" alt="Quantity" src="img/topic_small_quantity.gif" width="57" /></div>
<div class="ts-8-5">
<div class="ts-10">
<div class="ts-10-1">
<div align="left">
<select id="individualtickets" name="select" class="input2" onclick="calculateTotal(this.form)">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
<option value="100">100</option>
<option value="200">200</option>
<option value="300">300</option>
<option value="400">400</option>
<option value="500">500</option>
<option value="1000">1000</option>
</select>
</div>
</div>
<div class="ts-10-2">
<div align="right" style="margin-top: 4px;" id= "divId"><strong>$0</strong></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div><img height="8" alt="" src="img/buynow_break.gif" width="908" /></div>
<div id="prodwhite">
<div class="ts-7">

<div class="ts-7-3">

<div id="btn_moreinfo">

</div>
<p></p>
</div>
<div class="ts-7-4">
<p><img height="17" alt="Choose Capacity" src="img/topic_small_cc.gif" width="98" /><br /><br /></p>
<div class="ts-8">
<div class="ts-8-1"><img height="18" alt="" src="img/buynow_gb.gif" width="146" /></div>
<div class="ts-8-2">
<div class="ts-9">
<div class="ts-9-1">
<div align="center">
<input id="tablesponsor1" type="radio" checked="checked" name="radio" value="" onclick="calculateTotal1(this.form)"/>
</div>
</div>
<div class="ts-9-2">
<div align="center">
<input id="tablesponsor1" type="radio" checked="checked" name="radio" value="" onclick="calculateTotal1(this.form)"/>
</div>
</div>
<div class="ts-9-3">
<div align="center">
<input id="tablesponsor1" type="radio" checked="checked" name="radio" value="" onclick="calculateTotal1(this.form)"/>
</div>
</div>
<div class="ts-9-4">
<div align="center">
<input id="tablesponsor1" type="radio" checked="checked" name="radio" value="" onclick="calculateTotal1(this.form)"/>
</div>
</div>
</div>
</div>
<div class="prodbuy- ts-8-3" id="divId2"><strong>$0</strong></div>
<div class="ts-8-4"><img height="20" alt="Quantity" src="img/topic_small_quantity.gif" width="57" /></div>
<div class="ts-8-5">
<div class="ts-10">
<div class="ts-10-1">
<div align="left">
<select id="individualtickets1" name="select" class="input2" onclick="calculateTotal1(this.form)">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
<option value="100">100</option>
<option value="200">200</option>
<option value="300">300</option>
<option value="400">400</option>
<option value="500">500</option>
<option value="1000">1000</option>
</select>
</div>
</div>
<div class="ts-10-2">
<div align="right" style="margin-top: 4px;" id="divId3"><strong>$0</strong></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div><img height="8" alt="" src="img/buynow_break.gif" width="908" /></div>
<div id="prodwhite">
<div class="ts-7">

<div class="ts-7-3">

<div id="btn_moreinfo">

</div>
<p></p>
</div>
<div class="ts-7-4">
<p><img height="17" alt="Choose Capacity" src="img/topic_small_cc.gif" width="98" /><br /><br /></p>
<div class="ts-8">
<div class="ts-8-1"><img height="18" alt="" src="img/buynow_gb.gif" width="146" /></div>
<div class="ts-8-2">
<div class="ts-9">
<div class="ts-9-1">
<div align="center">
<input id="tablesponsor2" type="radio" checked="check" name="radio" value="" onclick="calculateTotal2(this.form)"/>
</div>
</div>
<div class="ts-9-2">
<div align="center">
<input id="tablesponsor2" type="radio" checked="check" name="radio" value="" onclick="calculateTotal2(this.form)"/>
</div>
</div>
<div class="ts-9-3">
<div align="center">
<input id="tablesponsor2" type="radio" checked="check" name="radio" value="" onclick="calculateTotal2(this.form)"/>
</div>
</div>
<div class="ts-9-4">
<div align="center">
<input id="tablesponsor2" type="radio" checked="check" name="radio" value="" onclick="calculateTotal2(this.form)"/>
</div>
</div>
</div>
</div>
<div class="prodbuy- ts-8-3" id="divId4"><strong>$0</strong></div>
<div class="ts-8-4"><img height="20" alt="Quantity" src="img/topic_small_quantity.gif" width="57" /></div>
<div class="ts-8-5">
<div class="ts-10">
<div class="ts-10-1">
<div align="left">
<select id="individualtickets2" name="select" class="input2" onclick="calculateTotal2(this.form)">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
<option value="100">100</option>
<option value="200">200</option>
<option value="300">300</option>
<option value="400">400</option>
<option value="500">500</option>
<option value="1000">1000</option>
</select>
</div>
</div>
<div class="ts-10-2">
<div align="right" style="margin-top: 4px;" id="divId5"><strong>$0</strong></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<img height="4" alt="" src="img/medbox_whitebottom.gif" width="908" />
<br />
<br />
<div class="ts-17">
<div class="ts-17-1">
<div align="right" style="margin-top: 19px;">0 Basic , 0 Pro <strong>Total :$0</strong></div>
</div>
<div class="ts-17-2">

</div>
</div>
</div>
</div>
<div><img src="img/medbox_greybottom.gif" /></div>
</div>
<div id="bigboxbottom"></div>
</div>

</form>
</div>
</body>
</html>
</code>

abduraooft · 03-20-2009, 02:34 PM

Quote:

Well i wrote this script and its doing fine.

Please use [CODE][/CODE] tags to wrap your code while posting here. You may edit your above posts. Thanks.

johnkennykumar · 03-20-2009, 04:32 PM

I added the code tags..thank you

abduraooft · 03-20-2009, 04:55 PM

Quote:

Originally Posted by johnkennykumar

I added the code tags..thank you

but it's still not in the correct way. see http://www.codingforums.com/showthread.php?t=82672