HTML - Dynamic Calculator
I have no idea where to post this question. I want to create a calculator for my website, similar in function to an excel spreadsheet although it doesn't have to look like one. Anyone have any idea how I can go about doing this?
Similar TutorialsHi i feel quite cheeky asking this but here goes anyway Im new to html and im trying to make primitive calculator such that the user will enter in a room width and room length and i can work out the area with a 5% increase. I then want to divide this number by a number that can be chosen by the user in a dropdown box or something. I want to display the area and the number of times the area was divided I have attached a really rubbish image of what i hope to achieve in case my description here is not very good If anyone can help me, i would really appreciate it Thanks David Hi I tried to copy this script into my html site http://www.poker-business.net/calculator.html i took it from http://www.rakebrain.com/rakeback-calculator.php and it doesnt work when i click on GO button. If there is anyone that can fix this issue, please help thanks I have having a problem getting my answer in the calculator limit to 5 , It works in a few browsers but not in Firefox or IE - everything else works great but i get a answer that is to long. Help please... Thank you to all. <HTML> <HEAD> <TITLE>900 Number Profit Calculator</TITLE> <SCRIPT LANGUAGE="JavaScript"> function CalculateSum(Atext, Btext, Ctext, Dtext, Etext, Ftext, form) { var A = parseFloat(Atext); var B = parseFloat(Btext); var C = parseFloat(Ctext); var D = parseFloat(Dtext); var E = parseFloat(Etext); var F = parseFloat(Ftext); form.Answer.value = A * B * C * D - E - F ; } function ClearForm(form) { form.input_A.value = ""; form.Answer.value = ""; } </SCRIPT> </HEAD> <BODY> <tr> <P><FONT SIZE="+2">900 Number Profit Calculator</FONT></P> <html><div style="width:220px;height:390px;border:4px double blue;"> <FORM NAME="Calculator" METHOD="post"> <P><center>Price Per Minute: <INPUT TYPE=TEXT NAME="input_A" SIZE=5 MAXlength="5"></center></P> <P><center>- Bill Fee <INPUT TYPE=HIDDEN NAME="input_B" value=.85% SIZE=5</center></P> <P><center>- Tax Recovery Fee <INPUT TYPE=HIDDEN NAME="input_C"value=.97% SIZE="5"</center></P> <P><center>- License Fee <INPUT TYPE=HIDDEN NAME="input_D" Value=.97% SIZE="5"</center></P> <P><center>- Transport <INPUT TYPE=HIDDEN NAME="input_E" value=.31 Size="5"</center></P> <P><center>- Termination Fee <INPUT TYPE=HIDDEN NAME="input_F" Value=.25 SIZE="5"</center></P> <P><center <P><center><INPUT TYPE="button" VALUE="Calculate" name="AddButton" onClick="CalculateSum(this.form.input_A.value,this.form.input_B.value, this.form.input_C.value, this.form.input_D.value, this.form.input_E.value, this.form.input_F.value, this.form)"></center></P> <P><center><INPUT TYPE="button" VALUE="Clear Fields" name="ClearButton" onClick="ClearForm(this.form)"></center></P> <P><center>Profit Per Minute! = <INPUT TYPE=TEXT NAME="Answer" maxlength="5" size="5") ></br></center></P> </FORM> </tr> </BODY> </HTML> </table> </div> Hello all, New member here im trying to make an HTML calculator with 2 boxes 1 box is for Kills i get in a video game 2nd box for deaths i have a video game where my leaderboard kills a 90488 kills, and i have 54933 deaths, so my kill to death ratio is 1.647243 which is basically 1.65 and in order to get to 1.66 kill to death ratio i need 476 kills how can i write this script? im new to html Hi Folks, I need some help please as I do not know were else to turn. I am a newly self employed electrician, and I am building myself a website and I would like to put a " House Rewire Estimator" page on it. So what I need is someone who could write me the script for it. I need something with 4 columns The first column to say "Number of Items", the second to say "Item Description" the third to say " Cost " and the last to say "total" I want the user to enter there own amount in the first column, I want to have a fixed description in the second column, a fixed price in the third column and it to automaticly add them up in the last column with a "total cost" at the bottom of the 4th column. The only way I can describe it is just like a Microsoft Excel invoice sort of thing. I don't know if it's something someone can help me with or were to find a ready made one on the net. I just don't know how to get it. My website is just one of them free-css things, so you will have to tell me how to get it on there too. lol Eliminator Guy Hi, as you have probably realised i'm new to this forum and i was wondering does any one have a code for a calculator. i have found many basic calculators but they won't do what i want them to do, i need a calculator where a visitor types in a number in a box and it automatically subtracts it from a hidden number and displays in another box, many thanks DanielM8214 I need to make a calculator for a website. The user would have a couple of inputs, which would run through a formula, and have an output. I don't know where to start. You'd think there would be tutorials for something as simple as this sounds. Your help is appreciated. Hi all, I am looking to try to build a simple calculator in a separate page on a website. I want it to work by the user inputting a specific figures into two boxes and then they are given the answer. The maths would be done in the background and it would just be a tool that they could use to avoid making mistakes using an equation. Does anybody know if something like this is possible using HTML or would it involve something complicated than that? Thanks in advance, Tom Im setting up a website that needs to have a calculator similiar to this link: https://www.101incorporate.com/incorporation-order.htm The user need to be able to click on things and the calculator need to change according to the different packages and items they select. And the calculator will total it out. Can anyone help me? Please. Thanks! I need to put a loan calculator on a web page but can't find one "ready to go." Thanks for the help. Hi, I'm rather new to website building and this site so my apologies if I'm posting in the wrong area. I've built my first website and have obtained html code for a simple quantity X price calculator to put on my website. The problem is with some quantities entered the prices shows out to 7 or so decimal places. This should be a dollar amount so only 2 decimal places are needed. The website link is http://www.essaycorrect.com/index.php/prices/ and for example 789 words entered in top box comes back with price of 23.6699999. The coding is below. Any help would be very, very appreciated. Thanks, Tim. <script language="JavaScript"> <!-- function CalculateTotals(){ f=document.orderform; f.total1.value=parseInt(f.qty1.value)*.03; f.total2.value=parseInt(f.qty2.value)*.05; f.total3.value=parseInt(f.qty3.value)*.03; f.total4.value=parseInt(f.qty4.value)*.05; f.grandtotal.value=parseInt(f.total1.value) +parseInt(f.total2.value) +parseInt(f.total3.value) +parseInt(f.total4.value) +parseInt(f.sh.value);} //--> </script></head> <body> <form name="orderform" method="post" action="formprocessor"> <table border="3"><tr> <th>Word count</th><th>Service</th><th>Time</th> <th>Price per word</th><th>Price(A$)</th></tr> <tr><td> <input name="qty1" size="10" OnBlur="CalculateTotals()" /></td> <td>Standard</td><td>Below 5000 words=3days / Above 5000 words=7days </td> <td align="right">3 cents </td> <td><input name="total1" size="6" OnFocus="document.orderform.qty2.select(); document.orderform.qty2.focus();" /></td></tr> <tr><td> <input name="qty2" size="10" OnBlur="CalculateTotals()" /></td> <td>Express</td><td>Below 5000 words=1day / Above 5000 words=3days </td> <td align="right">5 cents </td> <td><input name="total2" size="6" OnFocus="document.orderform.qty3.select(); document.orderform.qty3.focus();" /></td></tr> </table> <input type="hidden" value="0" name="sh" /> </form> <script language="JavaScript"> <!-- f=document.orderform; f.qty1.value=0; f.qty2.value=0; f.qty3.value=0; f.qty4.value=0; f.total1.value=0; f.total2.value=0; f.total3.value=0; f.total4.value=0; f.sh.value=0; f.grandtotal.value=0; f.grandtotal.value=0; //--> </script> </body></html> Hello, I'm trying to put together an online signup form for a children's summer program. I'd like to have a calculator for the total price of classes at the bottom as well as a "submit" button that will email me all entered information. I had tried using cgiemail (http://web.mit.edu/wwwdev/cgiemail/), which was already installed on my server, but my problem was that it sends me information from the "value" fields, which are already used for the price calculator. For instance, the price of each class in my sample is $55, so I have the value field for each choice set to 55. Unfortunately, cgiemail also wants to use the value field, so I would receive a list of "55"s rather than class names. Does anyone have a suggestion for how to fix this? I am very much an amateur at all of this, so if you think there's a better way to set up, I am open to suggestions. Thank you for the help! Matt Code: <form name="classes" onclick="calculate()"> <b>Class Signup Form</b><br><br> <P> <b>Child Info:</b> <TABLE CELLPADDING="1" CELLSPACING="1" WIDTH="550"> <tr><td width="200">Name:</td><td width="350"><INPUT name="childname"></td></tr> <tr><td width="200">Date of Birth:</td><td width="350"><INPUT name="childage" value="mm/dd/yyyy" maxlength="10"></td></tr> <tr><td width="200">Age:</td><td width="350"><select name="childage" STYLE="width: 50px;"> <option value="age5" selected="selected">5</option> <option value="age6">6</option> <option value="age7">7</option> <option value="age8">8</option> <option value="age9">9</option> <option value="age10">10</option> <option value="age11">11</option> <option value="age12">12</option> <option value="age13">13</option> <option value="age14">14</option> </select></td></tr> <tr><td width="200">T-Shirt Size:</td><td width="350"><select name="childshirt" STYLE="width: 50px;"> <option value="shirtxs" selected="selected">XS</option> <option value="shirts">S</option> <option value="shirtm">M</option> <option value="shirtl">L</option> <option value="shirtxl">XL</option></td></tr> <tr><td width="200">Address:</td><td width="350"><INPUT name="childaddress1"></td></tr> <tr><td width="200"></td><td width="350"><INPUT name="childaddress2"></td></tr> <tr><td width="200">City:</td><td width="350"><INPUT name="childcity"></td></tr> <tr><td width="200">State:</td><td width="350"><INPUT name="childstate"></td></tr> <tr><td width="200">Zip:</td><td width="350"><INPUT name="childzip"></td></tr> </TABLE> </p> <p>Allergy/Medication Information:<br><textarea rows="5" cols="50"></textarea></p> <P> <b>Parent/Guardian Info:</b> <TABLE CELLPADDING="1" CELLSPACING="1" WIDTH="550"> <tr><td width="200">Parent 1 Name:</td><td width="350"><INPUT name="parent1name"></td></tr> <tr><td width="200">Daytime Phone:</td><td width="350"><INPUT name="parent1phone"></td></tr> <tr><td width="200">Cell Phone:</td><td width="350"><INPUT name="parent1cell"></td></tr> </TABLE><br> <TABLE CELLPADDING="1" CELLSPACING="1" WIDTH="550"> <tr><td width="200">Parent 2 Name:</td><td width="350"><INPUT name="parent2name"></td></tr> <tr><td width="200">Daytime Phone:</td><td width="350"><INPUT name="parent2phone"></td></tr> <tr><td width="200">Cell Phone:</td><td width="350"><INPUT name="parent2cell"></td></tr> </TABLE><br> <TABLE CELLPADDING="1" CELLSPACING="1" WIDTH="550"> <tr><td width="200">Billing Email:</td><td width="350"><INPUT name="billingemail"></td></tr> <tr><td width="200">Alternate Email:</td><td width="350"><INPUT name="alternateemail"></td></tr> </TABLE> </p> <P> <b>Week 1 Classes</b><br> <TABLE CELLPADDING="1" CELLSPACING="1" WIDTH="550"> <tr><td width="200">9:30 - 10:45</td><td width="350"> <select name="w1c1" STYLE="width: 200px;"> <option value="0" selected="selected">- No Class -</option> <option value="55" name="DoppClass">Mountain Biking</option> <option value="55" name="Class 3">Witchcraft</option> <option value="55" name="DoppClass">Nintendo</option> </select></td></tr> <tr><td width="200">10:45 - Noon</td><td width="350"> <select name="w1c2" STYLE="width: 200px;"> <option value="0" selected="selected">- No Class -</option> <option value="55">Running with Scissors</option> <option value="55">Trapeze</option> <option value="55">Dance</option> </select></td></tr> <tr><td width="200">1:00 - 2:15</td><td width="350"> <select name="w1c3" STYLE="width: 200px;"> <option value="0" selected="selected">- No Class -</option> <option value="55">Clock-Building</option> <option value="55">Monkeys with Hats</option> <option value="55">Trains</option> </select></td></tr> <tr><td width="200">2:15 - 3:30</td><td width="350"> <select name="w1c4" STYLE="width: 200px;"> <option value="0" selected="selected">- No Class -</option> <option value="55">Cricket</option> <option value="55">Crochet</option> <option value="55">Crocodiles</option> </select></td></tr> </TABLE> </p> <p><input type=button name=calculate value="Calculate Total Price" onClick="pricecalculate();"></P> <p>$<input type=text name=txtAnswer> </p> </form> <script language = "javascript"> function pricecalculate(){ var w1c1=eval(document.classes.w1c1.value); var w1c2=eval(document.classes.w1c2.value); var w1c3=eval(document.classes.w1c3.value); var w1c4=eval(document.classes.w1c4.value); document.classes.txtAnswer.value=w1c1 + w1c2 + w1c3 + w1c4; } </script> im wondering if any1 can help me figure out how i can keep my domain name and link it to my Apache Home Server with a Dyanmic IP i have tried no-ip.com but i dont like having sitename.no-ip.com i want sitename.com does any1 know a way to do this?? I also want to be able to make my website more interactive in this way: when I click on one table cell, another cell appears below, which can then be clicked on. Is there a way to do this with CSS and/or HTML, or will I have to resort to Flash? Well, I think that's what it would be considered. Anyways, I have a simple project where I'm making a website that has a drop down menu with a list of items. I also have a table which will define the items. What i want to know is how to change the text in one of the table boxes when a new item in the drop down menu is selected. This is the code i have so far... Code: <html> <head> <title> My Definitions </title> </head> <body> <script type="text/javascript"> var define= new array() define["Unicode"] = "unicoded" define["Hexadecimal"] = "hex" define["Binary"] = "bin" define["Compiler"] = "compil" define["Interpreter"] = "inter" define["Topology"] = "top" define["Server"] = "ser" define["Overflow Error"] = "of" define["Phishing"] = "phish" define["Network"] = "net" function definition(def) { } </script> Select a definition from the list: <select id="list"> <option>Unicode</option> <option>Hexadecimal</option> <option>Binary</option> </select> <br> <br> <table border="1" width="100" cellpadding="5"> <th>Definition:</th> <th>Pictu </th> <tr><td>two</td> <td>one</td></tr> </table> </body> </html> any help would be greatly appreciated. My apologies if this is in the wrong area, i have searched forum and could not find what i'm needing/doing wrong. I have a website that was in cold fusion, i am changing it to html/css. So i sliced it up and everything is good except the area i need to be dynamic for wordpress. Only half is stretching. The part where i want widgets to go is not stretching with rest. Sorry if my code is a mess, i'm just learning. Thanks for any advise or directions. 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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <link href="css.css" rel="stylesheet" type="text/css" /> </head> <body background="images/bg.jpg"> <body> <div id="wrapper"> <div id="header"> <div id="topleft"><!--start of content keep left --> </div> <div id="home"> </div> <div id="about"> </div> <div id="process"> </div> <div id="yachts"> </div> <div id="blog"> </div> <div id="news"> </div> <div id="contact"> </div> <div id="headbanner"> </div> </div><!--header --> <div id="contentwrap"> <div id="leftcontentwrap"> <div id="static"> </div> <div id="dynamic"> </div> </div><!--leftconentwrap --> <div id="rightcontentwrap"> <div id="sidebarwrap"> <div id="sidebar"> </div><!--end sidebar --> <div id="sidedynamic"> </div> </div><!--sidebarwrap --> </div> </div><!--contentwrap --> <div id="footwrap"> <div id="footer"> </div><!--footer --> </div><!--footer wrap --> </div> <!--wrapper --> </body> </html> CSS Code: @charset "utf-8"; /* CSS Document */ #header { height: 280px; width: 891px; } #headbanner { background-image: url(images/island_12.png); height: 203px; width: 891px; float: left; } #home { background-image: url(images/island_04.png); height: 77px; width: 63px; float: left; } #sidebarwrap { float: left; height: 348px; width: 200px; } #dynamic { background-image: url(images/island_15.png); width: 659px; min-height: 427px; } #contact { background-image: url(images/island_10.png); float: left; height: 77px; width: 140px; } #news { background-image: url(images/island_09.png); float: left; height: 77px; width: 55px; } #footer { background-image: url(images/island_16.png); height: 75px; width: 891px; float: left; } #sidedynamic { background-image: url(images/sidedynamic.jpg); float: left; height: 77px; width: 232px; min-height: 77px; } #rightcontentwrap { height: auto; width: auto; float: left; } #contentwrap { width: 891px; min-height: 348px; } #sidebar { background-image: url(images/island_14.png); height: 348px; width: 232px; } #static { background-image: url(images/island_13.png); float: left; height: 152px; width: 659px; } #process { background-image: url(images/island_06.png); float: left; height: 77px; width: 93px; } #about { background-image: url(images/island_05.png); height: 77px; width: 67px; float: left; } #blog { background-image: url(images/island_08.png); float: left; height: 77px; width: 61px; } #leftcontentwrap { width: 659px; min-height: 348px; float: left; } #topleft { background-image: url(images/island_03.png); height: 77px; width: 347px; float: left; } #yachts { background-image: url(images/island_07.png); float: left; height: 77px; width: 65px; } #wrapper { width: 891px; min-height: 800px; margin-right: auto; margin-left: auto; padding-top: 25px; padding-bottom: 0px; padding-left: 15px; padding-right: 0px; } Hi, Is there anyway to script in such a way that if i never enter a specify to a cell, and give it 100% instead, my cell below will go all the way to the bottom by putting my whole table as 100% too? |--------------------------| | | | 100% | | | |--------------------------| | 50px | | | |--------------------------| something like that. well, it actually work in firefox and not IE, and i cant solve the problem. Thanks in advance. Hello, I am using a loop to dynamically generate buttons using the <button> tag. The value for this button is populated using a variable. When I click on one of these buttons, I want the content of the button to be displayed on the text field. But, because it is in a loop and the because the value is a variable only the value of the 1st button comes in and then disappears from the text field. The javascript I am trying out to populate the text field is : function passButtonValue() { poitem= document.getElementById("poitem"); hiddenField = document.getElementById("hiddenField"); hiddenField.value = poitem.innerHTML; } I am using ABAP for getting the values and running the loop How can I reprogram it to overcome this problem? Thanks! I have 10 rows compose of 3 textbox per row. After pressing submit button, they are post to the next page to a table. But my problem is if only 3 rows have data the other rows is still shown in a table but blank with borders. So I want my table to show the rows who only have data |