Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7

Thread: html help

  1. #1
    New Coder
    Join Date
    Nov 2008
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts

    html help

    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>&nbsp;</p>
    <p><strong>TOTAL AMOUNT DUE: <input type="text" name="total" readonly onfocus="this.blur()" value="$0.00" />
    </strong></p>
    <p>&nbsp;</p>
    </div></td>
    </tr>
    </table>
    </form>
    </body>

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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;
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    TinyScript (03-19-2009)

  • #3
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    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>

  • #4
    New Coder
    Join Date
    Nov 2008
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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">&nbsp;</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>
    Last edited by johnkennykumar; 03-20-2009 at 03:16 PM. Reason: did not wrap the code

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #6
    New Coder
    Join Date
    Nov 2008
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I added the code tags..thank you

  • #7
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Quote Originally Posted by johnkennykumar View Post
    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
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •