JavaScript - Performing Calculations In A Popup Box
This is a homework assignment I am trying to work on. Simple put my goal is to be able to click a "generate payslip" button and it should pop up "(firstname)(lastname), you will pay (var1*0.2) in federal taxes and (var2*0.1) in state taxes. Then i will add a reset button to the fields. I am NOT asking you to do this for me, i just need some help on what im doing wrong seeing as my teacher refuses to be of any help.
Here is what i got.. dont laugh. After literally spending hours on the computer trying to find help codes I took out the bulk of trash i had in there because it never worked, but at one point i had something like this var1 = num1 var2 = num2 var3 = num3 var answer= num3*0.2 var answer2= num3*0.1 Then i tried to include that in my alert box and even tweaked it over and over and either completely eliminated the alert box itself or include all the text in my equation. Either way, if someone can enlighten me on how to properfly perform a calculation in an alert box i would be ecstatic. <HTML> <HEAD> <center><b> Here is a pay slip generator that will determine your net annual salary. Simply type in your first and last name along with gross salary and hit calculate. Doing this will let you know how much you will end up paying in both Federal and State taxes. </center></b> <form action="" method="post" name="GPS"> <p> Enter your First Name: <input name="num1" type="text" id="num1" size="10" maxlength="10"> </p> <p> Enter your Last Name: <input name="num2" type="text" id="num2" size="10" maxlength="10"> </p> <p> Enter your gross salary: <input name="num3" type="#" id="num3" size="10" maxlength="10"> </p> Click this button to calulate your annual net pay! <script type="text/javascript"> function calculate() { alert("You type something"); } </script> <input type="button" onclick="calculate()" value="Generate Pay Slip" /> </FORM> </body> </html> </script> Similar TutorialsGood day all: I have an editable invoice that I have added a sales tax option with a js function doMath(). Prior to my modification with the sales tax option all worked well. the invoice which code is the following: Code: <textarea id="address" rows="6" cols="38" disabled="true">Website: Email: TaxID: </textarea > <div id="vehicleid"><label><strong><u>Vehicle Information</u></strong></label><p>Year: <?php echo $edit_caryear?></p><p>Type: <?php echo $dhtmlgoodies_categoryupdate?></p><p>Make: <?php echo $dhtmlgoodies_subcategoryupdate?></p><p>ClientID# <?php echo $edit_clientID?></p><p>Current Mileage <?php echo $edit_mileage?></p></div> <!--</div>--> <!--<div id="logo"> <div id="logoctr"> <a href="javascript:;" id="change-logo" title="Change logo">Change Logo</a> <a href="javascript:;" id="save-logo" title="Save changes">Save</a> | <a href="javascript:;" id="delete-logo" title="Delete logo">Delete Logo</a> <a href="javascript:;" id="cancel-logo" title="Cancel changes">Cancel</a> </div> <div id="logohelp"> <input id="imageloc" type="text" size="50" value="" /><br /> (max width: 540px, max height: 100px) </div> <img id="image" src="images/logo.png" alt="logo" width="280" height="33" /> </div>--> </div> <div style="clear:both"></div> <br> <div id="customer"> <?php echo $edit_firstname ?> <?php echo $edit_lastname?><p><?php echo $edit_address?></p><p><?php echo $edit_city?>, <?php echo $edit_state?>, <?php echo $edit_zipcode?></p> </div> <div id=invoicehead> <table id="meta"> <tr> <td class="meta-head">Invoice #</td> <td><textarea style="background: transparent;" name="invoicenum" id="invoicenun" disabled="true"><?php srand(time()); $random = (rand()%1000000); print("$random"); ?></textarea></td> </tr> <tr> <td class="meta-head">Date</td> <td><textarea name="date" id="date">December 15, 2009</textarea></td> </tr> <tr> <td class="meta-head">Amount Due</td> <td><div name="due" class="due">$0.00</div></td> </tr> </table> </div> <table id="items"> <tr> <th>Item</th> <th>Description</th> <th>Unit Cost</th> <th>Quantity</th> <th>Price</th> </tr> <tr class="item-row"> <td class="item-name"><div class="delete-wpr"> <!--<label for=\"dhtmlgoodies_category\">Make:</label>--> <?php echo $edit_servicearea?><br> <!--<SELECT NAME="edit_servicearea"> <OPTION>Select One <OPTION>Air Intake <OPTION>Brake <OPTION>Clutch <OPTION>Cooling System <OPTION>Driveshaft & Axle <OPTION>Engine Mechanical <OPTION>Exhaust <OPTION>Steering <OPTION>Suspension <OPTION>Transmission <OPTION>Other </SELECT>--> <a class="delete" href="javascript:;" title="Remove row">X</a></div></td> <td class="description"> <textarea name="servicedesc" cols="255" rows="20"><?php echo str_replace('<br/>', "\n", "$inputbox");?></textarea></td> <td><textarea name="cost" class="cost">$0.00</textarea></td> <td><textarea name="qty" class="qty">1</textarea></td> <td><span name="price" class="price">$0.00</span></td> </tr> <tr class="item-row"> <td class="item-name"><div class="delete-wpr"> <textarea name="Labor rate" cols="20" rows="3">Labor</textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div></td> <td class="description" wrap=virtual><textarea>Labor rate for the performance of work --excluding cost for parts.</textarea></td> <td><textarea class="cost">$75.00</textarea></td> <td><textarea class="qty" rows="2" cols="10">0</textarea></td> <td><span class="price">$0.00</span></td> </tr> <tr id="hiderow"> <td colspan="5"><a id="addrow" href="javascript:;" title="Add a row">Add a row</a></td> </tr> <tr> <td colspan="2" class="blank"> </td> <td colspan="2" class="total-line">Subtotal</td> <td class="total-value"><div id="subtotal">$0.00</div></td> </tr> <tr> <td colspan="2" class="blank"> </td> <td colspan="2" class="tax-line" style="text-align: left" valign="top">INCLUDE TAX? <input type = "checkbox" id = "taxbox" onclick = "doMath()"><br>DC 5.576%</td> <td class="total-value"><textarea class="tax" id="tax" >$0.00</textarea></td> </tr> <tr> <td colspan="2" class="blank"> </td> <td colspan="2" class="total-line">Total</td> <td class="total-value"><div id="total">$0.00</div></td> </tr> <tr> <td colspan="2" class="blank"> </td> <td colspan="2" class="total-line">Amount Paid</td> <td class="total-value"><textarea id="paid">$0.00</textarea></td> </tr> <tr> <td colspan="2" class="blank"> </td> <td colspan="2" class="total-line balance">Balance Due</td> <td class="total-value balance"><div class="due">$0.00</div></td> </tr> </table> </div> <!--<div id="terms"> <h5>Terms</h5> <textarea>NET 30 Days. Finance Charge of 1.5% will be made on unpaid balances after 30 days.</textarea> </div>--> </div> <div> <SCRIPT LANGUAGE="JavaScript"> document.write('<form><input type=button value="Refresh" onClick="history.go()"></form>') </script> </div><br> <div id="option"> <input type="button" id="button" value="Return to Main Menu" onclick="window.location='/andy/addentry.php' " /> <input type="hidden" name="servicedesc" value="<?php echo $_POST['servicedesc']; ?>"> <br> <p> <! I added this button, so that it returns us to the main Menu.> <INPUT TYPE="button" onClick="window.print()" value="Print" /><br> </p> <p><! The above button Clears all the Field's contents ><input type="submit" name="submit" value="Save Changes"> </div> </form> the section of the code higlighted in red is where my problem arises. To achieve the desired results(at least so that I thought), I included the following fuction in my js fuction file which is as follows: Code: function update_total() { var total = 0; $('.price').each(function(i){ price = $(this).html().replace("$",""); if (!isNaN(price)) total += Number(price); }); total =roundNumber(total,2); $('#subtotal').html("$"+total); $('#total').html("$"+total); //$('#tax').html("$"+total); update_balance(); } var taxRate = .0575; function doMath(){ //var subtotal = 0.00;//$('.price').each(function(i); var subtotal = ('#subtotal');//.html("$"+total); if (document.getElementById("taxbox").checked) { tax = subtotal* taxRate; //DC 5.576% tax = roundNumber(tax,2);//the 2 represent the number of digits to round numbers to after decimal point //tx = " Incl. 5.576%"; } document.getElementById("tax").value = "$" +tax; } function update_balance() { var due = $("#total").html().replace("$","") - $("#paid").val().replace("$",""); due = roundNumber(due,2); $('.due').html("$"+due); } function update_price() { var row = $(this).parents('.item-row'); var price = row.find('.cost').val().replace("$","") * row.find('.qty').val(); price = roundNumber(price,2); isNaN(price) ? row.find('.price').html("N/A") : row.find('.price').html("$"+price); update_total(); } function bind() { $(".cost").blur(update_price); $(".qty").blur(update_price); } $(document).ready(function() { $('input').click(function(){ $(this).select(); }); $("#paid").blur(update_balance); $("#addrow").click(function(){ $(".item-row:last").after('<tr class="item-row"><td class="item-name"><div class="delete-wpr"><SELECT NAME="edit_servicearea"><option>Select One<option>Air Intake<option>Brakes<option>Clutch<option>Cooling System<option>Driveshaft & Axle<option>Engine Mechanical<option>Exhaust<option>Steering<option>Suspension<option>Transmission<option>Other</select><a class="delete" href="javascript:;" title="Remove row">X</a></div></td><td class="description"><textarea>Description</textarea></td><td><textarea class="cost">$0</textarea></td><td><textarea class="qty">0</textarea></td><td><span class="price">$0</span></td></tr>'); if ($(".delete").length > 0) $(".delete").show(); bind(); }); $(".tax").blur(update_total);//binding tax //bind(); bind(); $(".delete").live('click',function(){ $(this).parents('.item-row').remove(); update_total(); if ($(".delete").length < 2) $(".delete").hide(); }); $("#cancel-logo").click(function(){ $("#logo").removeClass('edit'); }); $("#delete-logo").click(function(){ $("#logo").remove(); }); $("#change-logo").click(function(){ $("#logo").addClass('edit'); $("#imageloc").val($("#image").attr('src')); $("#image").select(); }); $("#save-logo").click(function(){ $("#image").attr('src',$("#imageloc").val()); $("#logo").removeClass('edit'); }); $("#date").val(print_today()); }); Again, here my sales tax is highlighted in red. My problem specifically is that I'm unable to: 1.) get the sales tax rate to calculate based on the value of the subtotal, and 2.) on selection for including taxes, to bind the sale tax amount to the total. I trust someone can provide some guidance! Mossa Hello, I am using BigInt.js javascript package for performing arithmetic operations on biginteger numbers. Following are some of the interfaces provided by this plugin: // Interfaces: // x = new BigInt("1234567890123456789012345678901234567890"); // y = new BigInt("0x123456789abcdef0123456789abcdef0"); // z = x.clone(); // z = bigint_uminus(x); // z = bigint_plus(x, y); // z = bigint_minus(x, y); // z = bigint_mul(x, y); // z = bigint_div(x, y); // z = bigint_mod(x, y); // cmp = bigint_cmp(x, y); /* return -1, 0, or 1 */ // num = bigint_number(x); /* convert normal number (may be floating) */ // From the above interfaces , I just need to use bigint_plus and bigint_minus functions for my code. But bigint_minus is not returning the proper subtraction for two big integers. Attached is the BigInt.txt file , before using please rename the file to BigInt.js.apart from bigint_minus functions other functions are working fine for me. Please let me know what is the problem with bigint_minus() function. Thanks, Dinesh hi there, I am trying to perform a calculation in JavaScript which allows me to select a radio box and multiply this with a figure entered in by the user so that the total is automatically displayed once the user clicks the submit button. However, am having huge amounts of trouble with the coding and wondering whether anyone can help. This is what I have at the moment: <form> <h2>Estimates</h2> <p> Will be entered in here </p> <p> One of our staff members will then contact you within three working days. However, it should be noted that estimates can vary depending on whether you would like more colours combined, various other features etc...... </p> <h3>Product Colour</h3> <input type="radio" name="colour of product" value="wine green" /> Wine green </input> <input type="radio" name="colour of product" value="beer green"/> Beer green </input> <input type="radio" name="colour of product" value="blue"/> Blue </input> <input type="radio" name="colour of product" value="red"/> Red </input> <input type="radio" name="colour of product" value="brown"/> Brown </input> <input type="radio" name="colour of product" value="clear"/> Clear </input> <br> <br> <h3>Product Resin</h3> <input type="radio" name="resin of product" value="black" /> Black </input> <input type="radio" name="resin of product" value="green"/> Green </input> <input type="radio" name="resin of product" value="white"/> White </input> <input type="radio" name="resin of product" value="red"/> Red </input> <input type="radio" name="resin of product" value="brown"/> Brown </input> <input type="radio" name="resin of product" value="clear"/> Clear </input> <input type="radio" name="resin of product" value="blue"/> Blue </input> <input type="radio" name="resin of product" value="yellow"/> Yellow </input> <p> Description here of what Resin is </p> <h3>Product Size</h3> <p> 1 is small grains of glass going up to 5 which are chunks as large as a penny. </p> <input type="radio" var x=300; name="size of product" value="1" /> 1 = £ 300 </input> <input type="radio" var x=320; name="size of product" value="2" /> 2 = £ 320 </input> <input type="radio" var x=360; name="size of product" value="3"/> 3 = £ 360 </input> <input type="radio" var x=400; name="size of product" value="4"/> 4 = £ 400 </input> <input type="radio" var x=500; name="size of product" value="5"/> 5 = £ 500 </input> <script type="text/javascript"> function updateAndCheck(size of product, total,) { size of product = document.getElementById(size of product); total = document.getElementById(total); if (!isNaN(parseInt(quant.value))) total.value = (parseInt(price.value) * parseInt(quant.value)); else { alert ("Numbers only please!") quant.value= ''; } </script> <input type="radio" var x=300; name="size of product" size="20" id="price" /> <input type="text" name="total" value="" onkeyup="updateAndCheck(this, 'price', 'total')" id="total" size="20" /> <br/> <br/> <label>Total: </label> <input type="text" name="total"size "30"var y= /> <p> <i>*Each price is per square metre of the product</i> </p> <br/> <p id="buttons"> <input type="submit" value="Get estimation" width="40" height="40"/> </p> <label>Estimated total for your surface: </label> <input type="text" name="total"size "30"/> <br/> <br/> <!-- User can click here to automatically send an e-mail --> <a href="mailto:unknown@aol.com">Alternatively contact us directly via e-mail by clicking on this link if you would like something more complicated which you cannot select from the list above. </a> </form> </div> Hello, This is my first try with Jquery and for some reason one of my form totals is always off by $100. It is the gr_total_dollars that is off, all others are calculating properly. Here is the code Code: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $(".TextBox").hover(function(){ $(this).toggleClass('TextBoxSelected'); },function(){ $(this).toggleClass('TextBoxSelected'); }).change(function(){ calculate(); }); }); function getFldValue(fldValue) { return isNaN(fldValue) ? 0 : parseFloat(fldValue); } function calculate() { var property_SPrice = getFldValue($('#property_SPrice').val()); var price = getFldValue($('#price').val()); var REO_sale_percentage = getFldValue($('#REO_sale_percentage').val()); var REO_sale_dollars = getFldValue($('#REO_sale_dollars').val()); var REO_sale_bonus_dollars = getFldValue($('#REO_sale_bonus_dollars').val()); var REO_sale_fixed_dollars = getFldValue($('#REO_sale_fixed_dollars').val()); var REO_sale_total_dollars = getFldValue($('#REO_sale_total_dollars').val()); var REO_list_percentage = getFldValue($('#REO_list_percentage').val()); var REO_list_dollars = getFldValue($('#REO_list_dollars').val()); var REO_list_bonus_dollars = getFldValue($('#REO_list_bonus_dollars').val()); var REO_list_fixed_dollars = getFldValue($('#REO_list_fixed_dollars').val()); var REO_list_total_dollars = getFldValue($('#REO_list_total_dollars').val()); var gr_comm_percentage = getFldValue($('#gr_comm_percentage').val()); var gr_comm_dollars = getFldValue($('#gr_comm_dollars').val()); var gr_bonus_dollars = getFldValue($('#gr_bonus_dollars').val()); var gr_fixed_dollars = getFldValue($('#gr_fixed_dollars').val()); var gr_total_dollars = getFldValue($('#gr_total_dollars').val()); $('#price').val(property_SPrice); $('#gr_comm_percentage').val(REO_list_percentage + REO_sale_percentage); $('#gr_comm_dollars').val(getFldValue(gr_comm_percentage/100*price)); $('#REO_list_dollars').val(getFldValue(REO_list_percentage/100*price)); $('#REO_sale_dollars').val(getFldValue(REO_sale_percentage/100*price)); $('#gr_fixed_dollars').val(getFldValue(REO_sale_fixed_dollars + REO_list_fixed_dollars)); $('#gr_bonus_dollars').val(getFldValue(REO_sale_bonus_dollars + REO_list_bonus_dollars)); $('#gr_total_dollars').val(getFldValue(gr_comm_dollars + gr_fixed_dollars + gr_bonus_dollars)); $('#REO_sale_total_dollars').val(getFldValue(REO_sale_dollars + REO_sale_fixed_dollars + REO_sale_bonus_dollars)); $('#REO_list_total_dollars').val(getFldValue(REO_list_dollars + REO_list_fixed_dollars + REO_list_bonus_dollars)); } </script> td><cfoutput><cfif #form.list_type# IS 1 OR #form.list_type# IS 2><b>*</b></cfif></cfoutput><b>Sold Price</b> </td> <td><input type="text" id="price" size="8" class="TextBox" onFocus="this.className='TextBoxSelected';select()" onBlur="this.className='TextBox'" onChange="calculate();" /></td> </tr> <tr><td colspan="2"><b>Commission Information</b> </td> </tr> <!---Form headings---> <tr><td> </td> <td colspan="2" align="center"><b>Main Commission</b></td> <td align="center"><b>Fixed</b></td> <td align="center"><b>Bonus/<br />Other</b></td> <td align="center"><b>Total</b></td> </tr> <tr> <td> </td> <td><b>%</b></td> <td><b>$</b></td> <td><b>$</b></td> <td><b>$</b></td> <td><b>$</b></td> </tr> <!---End form headings---> <tr><td><b>*</b>Gross Comm</td> <td><input type="text" id="gr_comm_percentage" size="1" class="TextBox" value="0"> </td> <td><input type="text" id="gr_comm_dollars" size="8" class="TextBox" value="0"> </td> <td><input type="text" id="gr_fixed_dollars" size="8" class="TextBox" value="0"> </td> <td><input type="text" id="gr_bonus_dollars" size="8" class="TextBox" value="0"> </td> <td><input type="text" id="gr_total_dollars" size="8" class="TextBox"> </td> </tr> <tr> <cfoutput> <cfif #form.list_type# IS 2> <td><b>*</b>REO List </td> <td><input type="text" id="REO_list_percentage" size="1" class="TextBox" value="0"> </td> <td><input type="text" id="REO_list_dollars" size="8" class="TextBox" value="0"> </td> <td><input type="text" id="REO_list_fixed_dollars" size="8" class="TextBox" value="0"> </td> <td><input type="text" id="REO_list_bonus_dollars" size="8" class="TextBox" value="0"> </td> <td><input type="text" id="REO_list_total_dollars" size="8" class="TextBox"> </td> <!---List type 1 begins here---> <cfelseif #form.list_type# IS 1 ><td><b>*</b>Amt Pd to O/B</td> <td><input type="Text" name="OB_percentage" size="1" class="TextBox" onFocus="this.className='TextBoxSelected';select()" onBlur="this.className='TextBox'">% </td> <td>$<input type="text" name="OB_dollars" size="8" class="TextBox" onFocus="this.className='TextBoxSelected';select()" onBlur="this.className='TextBox'" > </td> <cfelse><td>Amt Pd to O/B</td> <td><input type="Text" name="OB_percentage" size="1" class="TextBox" onFocus="this.className='TextBoxSelected';select()" onBlur="this.className='TextBox'">% </td> <td>$<input type="text" name="OB_dollars" size="8" class="TextBox" onFocus="this.className='TextBoxSelected';select()" onBlur="this.className='TextBox'"> </td> </cfif> </cfoutput> </tr> <tr> <cfoutput> <cfif #form.list_type# IS 2> <td><b>*</b>REO Sale </td><!---Comp. Dollar---> <td><input type="text" id="REO_sale_percentage" size="1" class="TextBox" value="0"> </td> <td><input type="text" id="REO_sale_dollars" size="8" class="TextBox" value="0"> </td> <td><input type="text" id="REO_sale_fixed_dollars" size="8" class="TextBox" value="0"> </td> <td><input type="text" id="REO_sale_bonus_dollars" size="8" class="TextBox" value="0"> </td> <td><input type="text" id="REO_sale_total_dollars" size="8" class="TextBox"> </td> <cfelse><td><b>*</b>REO Gross</td> <td><input type="Text" name="comp_percentage" size="1" class="TextBox" onFocus="this.className='TextBoxSelected';select()" onBlur="this.className='TextBox'">% </td> <td>$<input type="text" name="comp_dollars" size="8" class="TextBox" onFocus="this.className='TextBoxSelected';select()" onBlur="this.className='TextBox'"> </td> Can anyone tell me what I need to change? Thanks in advance for your assistance. This code does not want to add the text box to my calculations. I also tried to parseFloat() the tDelivery but then it gives a NaN, I also tried parseInt() same Nan then With the exact code below it encapsulates the two totals printing eg: R150 R35. All the other boxes works perfectly just the last one to add the delivery. Code: // Function to calculate order value function calculateValue(orders) { var orderValue = 0; // Run through all the product fields for(var i = 0; i < orders.elements.length; ++i) { // Get the current field var formField = orders.elements[i]; // Get the fields name var formName = formField.name; // Is it a "product" field? if (formName.substring(0,4) == "prod") { // Items price extracted from name var itemPrice = parseFloat(formName.substring(formName.lastIndexOf("_") + 1)); // Get the Quantity var itemQuantity = parseInt(formField.value); // Update the OrderValue if(itemQuantity >= 0) { orderValue += itemQuantity * itemPrice; } } } // Display the totals orders.totalExcl.value = "R " + orderValue.toLocaleString(); // function to calculate VAT at 15% as required and total inclusive. function calcTotals(oValue) { var vat = oValue * .15; var totalIncluding = oValue + vat; var tDelivery = orders.delivery.value; var theTotalOrder = totalIncluding + tDelivery; orders.vat.value = "R " + vat.toLocaleString(); orders.totalIncl.value = "R " + totalIncluding.toLocaleString(); orders.totalOrder.value = "R " + theTotalOrder.toLocaleString(); } return calcTotals(orderValue); } Code: <!-- Row 10, Col 1 Order Value exluding Vat --> <tr><td colspan="2" align="right">Order Value Excluding Vat:</td> <!-- Row 10, Col 2 Order Value exluding Vat Box--> <td colspan="1" align="left"> <input name="totalExcl" type="text" style="margin-left: 60px" size="10" onfocus="this.form.elements[0].focus()" /> </td></tr> <!-- Row 11, Col 1 Vat of 15% --> <tr><td colspan="2" align="right">Vat calculated at 15%:</td> <!-- Row 11, Col 2 Vat Value Box--> <td colspan="1" align="left"><input name="vat" style="margin-left: 60px" type="text" size="10" readonly="readonly" /> </td></tr> <!-- Row 12, Col 1 Total Order Value including Vat --> <tr><td colspan="2" align="right">Order Value Including Vat:</td> <!-- Row 12, Col 2 otal Order Value including Vat Box--> <td colspan="1" align="left"><input name="totalIncl" style="margin-left: 60px" type="text" size="10" readonly="readonly" /> </td></tr> <!-- Row 13, Col 1 Order Value --> <tr><td colspan="2" align="right">Delivery Options: <input type="radio" name="sapo" value="35" onclick="delivery.value='R ' + this.value" /> R35 - SA Post Office <input type="radio" name="sapo" value="80" onclick="delivery.value='R ' + this.value" /> R80 - Speed Services <input type="radio" name="sapo" value="150" onclick="delivery.value='R ' + this.value" /> R150 - Courier Services </td> <!-- Row 13, Col 2 Order Value Box--> <td colspan="1" align="left"><input name="delivery" style="margin-left: 60px" type="text" size="10" readonly="readonly" /> </td></tr> <!-- Row 14, Col 1 Total Order Value including Vat --> <tr><td colspan="2" align="right"><strong>Total Order Value:</strong></td> <!-- Row 14, Col 2 otal Order Value including Vat Box--> <td colspan="1" align="left"><input name="totalOrder" style="margin-left: 60px" type="text" size="10" readonly="readonly" /> </td></tr> Hello, I was given an assignment to change an existing form into one that will automatically perform calculations and since I have never done this before I am learning as I go. The form needs to do the following: gr_percentage = list_percentage + sale_percentage gr_comm_dollars = gr_percentage * price list_comm_dollars = list_percentage * price and so on. I also need to calculate the following gr_total_dollars = gr_comm_dollars + gr_fixed_dollars + gr_bonus_dollars (all of which will be calculated on entries for the sale and list portions). I though that I had it figured out but upon testing the form it does nothing. Please let me know what I need to change in order for the calculations to work properly. Thank you Code: <script type="text/javascript"> function calculate(Id) { var price = document.getElementById('price').value; var REO_list_percentage = document.getElementById('REO_list.percentage').value; var REO_sale_percentage = document.getElementById('REO_sale_percentage').value; var REO_sale_dollars = document.getElementById('REO_sale_dollars').value var REO_list_dollars = document.getElementById('REO_list_dollars').value var REO_sale_bonus_dollars = document.getElementById('REO_sale_bonus_dollars').value; var REO_list_bonus_dollars = document.getElementById('REO_list_bonus_dollars').value; var REO_sale_fixed_dollars = document.getElementById('REO_sale_fixed_dollars').value; var REO_list_fixed_dollars = document.getElementById('REO_list_fixed_dollars').value; var gr_comm_dollars = document.getElementById('gr_comm_dollars').value; var gr_bonus_dollars = document.getElementById('gr_bonus_dollars').value; var gr_fixed_dollars = document.getElementById('gr_fixed_dollars').value; document.getElementById('gr_comm_percentage').value=REO_list_percentage + REO_sale_percentage; document.getElementById('gr_comm_dollars').value=gr_comm_percentage/100*price; document.getElementById('reo_list_dollars').value=REO_list_percentage/100*price; document.getElementById('reo_sale_dollars').value=REO_sale_percentage/100*price; document.getElementById('gr_fixed_dollars').value=REO_sale_fixed_dollars + REO_list_fixed_dollars; document.getElementById('gr_bonus_dollars').value=REO_sale_bonus_dollars + REO_list_bonus_dollars; document.getElementById('gr_total_dollars').value=gr_comm_dollars + gr_fixed_dollars + gr_bonus_dollars; document.getElementById('REO_sale_total_dollars').value = REO_sale_comm_dollars + REO_sale_fixed_dollars + reo_sale_bonus_dollars; document.getElementById('REO_list_total_dollars').value = REO_list_comm_dollars + REO_list_fixed_dollars + reo_list_bonus_dollars; gr_comm_dollars = isNAN(gr_comm_dollars)?0:parseFloat(gr_comm_dollars,10); gr_fixed_dollars = isNAN(gr_fixed_dollars)?0:parseFloat(gr_fixed_dollars,10); gr_bonus_dollars = isNAN(gr_bonus_dollars)?0:parseFloat(gr_bonus_dollars,10); } </script> </head> //here is the form <tr > <td><cfoutput><cfif #form.list_type# IS 1 OR #form.list_type# IS 2><b>*</b></cfif></cfoutput><b>Sold Price</b> </td> <td><input type="text" id="price" size="8" class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'" onchange="calculate('gr_comm_dollars','REO_sale_dollars','REO_list_dollars')" /></td> </tr> <tr><td colspan="2"><b>Commission Information</b> </td> </tr> <!---Form headings---> <tr><td> </td> <td colspan="2" align="center"><b>Main Commission</b></td> <td align="center"><b>Fixed</b></td> <td align="center"><b>Bonus/<br />Other</b></td> <td align="center"><b>Total</b></td> </tr> <tr> <td> </td> <td><b>%</b></td> <td><b>$</b></td> <td><b>$</b></td> <td><b>$</b></td> <td><b>$</b></td> </tr> <!---End form headings---> <tr><td><b>*</b>Gross Comm</td> <td><input type="Text" id="gr_comm_percentage" size="1" class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'"onchange="calculate ('gr_comm_dollars')" > </td> <td><input type="text" id="gr_comm_dollars" size="8" class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'" onchange="calculate('gr_total_dollars')"> </td> <td><input type="text" id="gr_fixed_dollars" size="8" class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'"onchange="calculate ('gr_total_dollars')"> </td> <td><input type="text" id="gr_bonus_dollars" size="8" class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'"onchange="calculate('gr_total_dollars')"> </td> <td><input type="text" name="gr_total_dollars" size="8" class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'"> </td> </tr> <tr> <cfoutput> <cfif #form.list_type# IS 2> <td><b>*</b>REO List </td><!---Comp. Dollar---> <td><input type="Text" id="REO_list_percentage" size="1" class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'" onchange="calculate('gr_commission_percentage','REO_list_dollars')"> </td> <td><input type="text" id="REO_list_dollars" size="8" class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'" onchange="calculate ('REO_list_total_dollars')"> </td> <td><input type="text" id="REO_list_fixed_dollars" size="8" class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'" onchange="calculate ('REO_list_total_dollars')"> </td> <td><input type="text" id="REO_list_bonus_dollars" size="8" class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'" onchange="calculate ('REO_list_total_dollars')"> </td> <td><input type="text" id="REO_list_total_dollars" size="8" class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'"> </td> <!---List type 1 begins here---> <cfelseif #form.list_type# IS 1 ><td><b>*</b>Amt Pd to O/B</td> <td><input type="Text" name="OB_percentage" size="1" class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'">% </td> <td>$<input type="text" name="OB_dollars" size="8" class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'" > </td> <cfelse><td>Amt Pd to O/B</td> <td><input type="Text" name="OB_percentage" size="1" class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'">% </td> <td>$<input type="text" name="OB_dollars" size="8" class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'"> </td> </cfif> </cfoutput> </tr> <tr> <cfoutput> <cfif #form.list_type# IS 2> <td><b>*</b>REO Sale </td><!---Comp. Dollar---> <td><input type="Text" id="REO_sale_percentage" size="1" class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'" onchange="calculate('gr_commission_percentage','REO_sale_dollars')"> </td> <td><input type="text" id="REO_sale_dollars" size="8" class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'" onchange="calculate ('REO_sale_total_dollars')" > </td> <td><input type="text" id="REO_sale_fixed_dollars" size="8" class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'" onchange="calculate ('REO_sale_total_dollars')"> </td> <td><input type="text" id="REO_sale_bonus_dollars" size="8" class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'" onchange="calculate ('REO_sale_total_dollars')"> </td> <td><input type="text" id="REO_sale_total_dollars" size="8" class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'"> </td> <cfelse><td><b>*</b>REO Gross</td> <td><input type="Text" name="comp_percentage" size="1" class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'">% </td> <td>$<input type="text" name="comp_dollars" size="8" class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'"> </td> </cfif> </cfoutput> </tr> <tr> Hi. I am new to javascript programming so please go easy on me. I am creating a website for a flooring store and need to include a price calculator/estimator. What I need to do is allow the visitor to input the room size (length x width) and choose a flooring material from a pulldown list, and receive a price. The pulldown list would have flooring materials such as carpet, tile, wood, etc and each of these would have a fixed dollar amount associated with them (which would be hidden). So basically it is just a script that would multiply 3 numbers, with two of the numbers being input by the visitor, and the third being selected from the pulldown. Can this be done with Javascript, and can someone please educate me on how to do this? Hello all i'm new to JS and i would like some help doing something, if anyone can help i would appreciate it. i have a series of checkboxes [just for reference, these are ingredients you may put in a sandwich, charged by one] and to the bottom of them i have a line like "total: 0.00 EUR". i want everytime the user checks one of the boxes to update this line with the total price, so actually to add the price of each ingredient to the total price (and of course abstract it if the box gets unchecked). so far i have made the boxes: Code: <input type="checkbox" name="corn" value="corn" onClick="plus(0.5);">Corn (0,50) <input type="checkbox" name="olives" value="olives" onClick="plus(0.8);">Olives (0,80) .....bla bla bla Total: 0.00 EUR i thought plus(); would be the function to use to do my calculations thats why i put it there - but i kinda don't know how exactly to do it Hi! Its just a week I started using javascript. I have a form which takes input from user and the javascript is used to update the totals. I have done all the coding but, I could not figure out where did I mistake. The code below is not updating the totals. Someone please help me!!! The java script code validate.js Code: <script type = "text/javascript"> function CalculateTotal() { var bolt = document.getElementById('qnty1').value; var nut = document.getElementById('qnty2').value; var washer = document.getElementById('qnty3').value; document.getElementById("tot1").value = (bolt * 2.15).toFixed(2); document.getElementById("tot2").value = (nut * 0.45).toFixed(2); document.getElementById("tot3").value = (washer * 0.30).toFixed(2); document.getElementById("totqnty").value = ((bolt) + (nut) + (washer)).toFixed(2); document.getElementById("totamount").value = ((bolt * 2.15) + (nut * 0.45) + (washer * 0.30)).toFixed(2); } </script> The html page with form Code: <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" type="text/css" href="task2.css" /> <script type="text/javascript" src="calculate.js"> </script> <title>Nuts 'R' Us - Order</title> </head> <table class="table"> <tr><td><form id="myform"> <table class="table"> <tr><td colspan="2"><table class="table3"> <tr><th>Item</th> <th>Product Code</th> <th>Diameter</th> <th>Length</th> <th>Colour</th> <th>Unit</th> <th>Quantity</th> <th>Price</th></tr> <tr><td>Bolt</td><td>B113</td> <td>9</td><td>50</td> <td>Black</td> <td>2.15</td> <td class="td1"><input type ="text" name ="qnty1" size="3" onchange="CalculateTotal()" id="qnty1" /></td> <td class="td1"><input type ="text" name ="tot1" size ="3" id="tot1" /></td></tr> <tr><td>Nut</td> <td>N234</td> <td>5</td> <td>N/A</td> <td>Silver</td> <td>0.45</td> <td class="td1"><input type ="text" name ="qnty2" size ="3" onchange="CalculateTotal()" id="qnty2" /></td> <td class="td1"><input type ="text" name ="tot2" size ="3" id="tot2" /></td></tr> <tr><td>Washer</td> <td>W359</td> <td>8</td> <td>N/A</td> <td>Silver</td> <td>0.30</td> <td class="td1"><input type ="text" name="qnty3" size ="3" onchange="CalculateTotal()" id="qnty3" /></td> <td class="td1"><input type ="text" name ="tot3" size ="3" id="tot3" /></td></tr> <tr><td colspan = "6" class="td2">Grand Total: </td><td class="td1"><input type ="text" name ="totqnty" size ="3" id="totqnty" /></td> <td class="td1"><input type ="text" name ="totamount" size ="3" id="totamount" /></td></tr> </table></td></tr> <tr><td colspan="2" align="center"><input type = "reset" value = "Reset" /> <input type = "submit" value = "Submit" /></td></tr></table> </form> </td> </tr> </td> </tr> </table></body> </html> Hi, "I need editable table with calculations in javascript" "I have a table in that table i have 4 column like mark1,mark2 and total. if i give input to that specific cell the total is automatically calculate. Please send any code or any related links". I tried below code... <html> <head> <title>sample dynamic select list</title> <script language='javascript'> function changeContent(tablecell) { //alert(tablecell.firstChild.nodeValue); tablecell.innerHTML = "<INPUT type=text name=newname onBlur=\"javascript:submitNewName(this);\" value=\""+tablecell.innerHTML+"\">"; var u1=document.getElementById('m1').value; var u2=document.getElementById('m2').value; res=u1*u2; document.getElementById('t').innerHTML=res; tablecell.firstChild.focus(); } function submitNewName(textfield) {//alert(textfield.value); textfield.parentNode.innerHTML= textfield.value; // textfield.parentNode.innerHTML= res; } </script> </head> <body> Double click on any cell. Then enter your own text and then tab out or click on other place. <table border=1 bgcolor=gray> <tr> <th onDblClick="javascript:changeContent(this);">Mark1</th> <th onDblClick="javascript:changeContent(this);">Mark2</th> <th onClick="javascript:changeContent(this);">total</th> </tr> <tr> <td onDblClick="javascript:changeContent(this);" id="m1">10</td> <td onDblClick="javascript:changeContent(this);" id="m2">20</td> <td onClick="javascript:changeContent(this);" id="t"></td> </tr> </table> </body> </html> I got it editable table but i cannot able to add two cell and also assign result to total.. let u know please help me Thanks Hi all, Decided to start learning JavaScript, started 2 days ago. Anyway, I'm trying to create a simple script spits out a styled result based on a user input. Here is my JS: Code: function dispTable (form) { var userCost2 = form.venCost2.value * 1; marArray = new Array ("0.05", "0.1", ".15", "0.2", "0.25", "0.3", "0.35", "0.4", "0.45", "0.5", "0.55", "0.6", "0.65", "0.7", "0.75", "0.8"); for (var i=0; i<marArray.length; i++) { document.tableDiv.innerHTML = "<div>" document.tableDiv.innerHTML = userCost2; document.tableDiv.innerHTML = marArray[i]; document.tableDiv.innerHTML = + userCost2 * marArray[i]; document.tableDiv.innerHTML = "<\/div>"; } } Here is my HTML: Code: <div class="container"> <form name="lasoCalcTable"> <span>Enter Vendor Cost</span> <input class="textForm" name="venCost2" id="venCost2" type="text" size="8" /> <hr /> <input class="butForm" name="calcTblBut" type="button" value="Calculate" onclick="dispTable()" /><br /> </form> <div title="tableDiv" id="tableDiv"> </div> </div> The problem is that nothing is happening when I press the calculation button. What I would like to happen is to display a div element for each value in the array which displays the entered value from VenCost2, the current Margin %, and the result of VenCost2 * margin%. I want this to display on the same page and underneath the calculation button, preferably not having to reload the page. I thought this was going to be relatively easy but doesn't seem so! Thanks for your help I have a form which is used to calculate residential Floor Area Ratio (FAR). The form is structured into seven parts as follows: Part A: Maximum FAR and Floor Area: Part B: Gross Floor Area of the main floors of the main house: Part C: Gross Floor Area of the basement or cellar: Part D: Gross Floor Area of the attic: Part E. Gross Floor Area of all accessory structures except detached garages: (including cabanas, guest houses, caretaker's cottages, pool houses, sheds, barns, or other structures except a detached garage) Part F. Gross Floor Area of the garage: (not including basement garages) Part G: Total Floor Area: The Javascript involved in the calculations is as follows: [CODE] <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"> function checkAllInputFields(){ IsValidEntry(entireForm.A1.value) IsValidEntry(entireForm.A5.value) IsValidEntry(entireForm.A6.value) IsValidEntry(entireForm.A8.value) IsValidEntry(entireForm.A9.value) IsValidEntry(entireForm.B1.value) IsValidEntry(entireForm.B3.value) IsValidEntry(entireForm.B4.value) IsValidEntry(entireForm.B5.value) IsValidEntry(entireForm.C1.value) IsValidEntry(entireForm.C2.value) IsValidEntry(entireForm.C3.value) IsValidEntry(entireForm.D3.value) IsValidEntry(entireForm.D4.value) IsValidEntry(entireForm.D6.value) IsValidEntry(entireForm.D7.value) IsValidEntry(entireForm.D9.value) IsValidEntry(entireForm.D10.value) IsValidEntry(entireForm.D12.value) IsValidEntry(entireForm.D13.value) IsValidEntry(entireForm.D14.value) IsValidEntry(entireForm.D15.value) IsValidEntry(entireForm.E1.value) IsValidEntry(entireForm.F2.value) IsValidEntry(entireForm.F3.value) IsValidEntry(entireForm.F4.value) IsValidEntry(entireForm.F5.value) IsValidEntry(entireForm.F8.value) IsValidEntry(entireForm.F9.value) IsValidEntry(entireForm.F11.value) IsValidEntry(entireForm.F12.value) IsValidEntry(entireForm.F14.value) IsValidEntry(entireForm.F15.value) IsValidEntry(entireForm.F17.value) IsValidEntry(entireForm.F18.value) IsValidEntry(entireForm.F19.value) IsValidEntry(entireForm.F20.value) } function IsValidEntry(entry){ if(entry == "N/A to this property" || entry == "" || IsNumeric(entry)){ //do nothing } else{ alert(entry + " is not a number. Numbers must only contain digits and decimal points") } } function IsNumeric(sText){ var ValidChars = "0123456789."; var IsNumber=true; var Char; for (i = 0; i < sText.length && IsNumber == true; i++) { Char = sText.charAt(i); if (ValidChars.indexOf(Char) == -1) { IsNumber = false; } } return IsNumber; } //function which returns given number to 2 decimal places function roundTwo(x) { return (Math.round(x*Math.pow(10,2)))/Math.pow(10,2) } // function which returns given number to 4 decimal places function roundFour(x) { return (Math.round(x*Math.pow(10,4)))/Math.pow(10,4) } // function which calls calculation functions for all sections // this function is called whenever anything is changed on the form function calculateAll(){ checkAllInputFields() doZoneChange() doPartA() doPartB() doPartC() doPartD() doPartE() doPartF() doPartG() } //funtion that changes form according to zoning district function doZoneChange(){ if (entireForm.zone.value == "AA1"){ entireForm.A5.value = "N/A to this property" entireForm.A5.disabled = true entireForm.A6.value = "N/A to this property" entireForm.A6.disabled = true entireForm.A7.value = "---------------------" entireForm.A8.value = "N/A to this property" entireForm.A8.disabled = true entireForm.A9.value = "N/A to this property" entireForm.A9.disabled = true entireForm.A10.value = "---------------------" entireForm.A11.value = "---------------------" entireForm.A12.value = "---------------------" entireForm.A13.value = "---------------------" entireForm.A14.value = "N/A to this property" } else{ if (entireForm.A6.value == "N/A to this property"){ entireForm.A5.value = "" entireForm.A5.disabled = false entireForm.A6.value = "" entireForm.A6.disabled = false entireForm.A7.value = "" entireForm.A8.value = "" entireForm.A8.disabled = false entireForm.A9.value = "" entireForm.A9.disabled = false entireForm.A10.value = "" entireForm.A11.value = "" entireForm.A12.value = "" entireForm.A13.value = "" entireForm.A14.value = "" if (entireForm.zone.value == "A1"){ entireForm.A13.value = "1200" } else if (entireForm.zone.value == "A4" || entireForm.zone.value == "A5"){ entireForm.A13.value = "400" } else{ entireForm.A13.value = "700" } } else{ if (entireForm.zone.value == "A1"){ entireForm.A13.value = "1200" } else if (entireForm.zone.value == "A4" || entireForm.zone.value == "A5"){ entireForm.A13.value = "400" } else{ entireForm.A13.value = "700" } } } } function doPartA(){ // Calculates A2 var lotArea = entireForm.A1.value if(lotArea < 5000){ entireForm.A2.value = .43 } else if(lotArea < 10000){ entireForm.A2.value = (.43-(((lotArea-5000)/1000)*.016)) } else if(lotArea < 15000){ entireForm.A2.value = (.35-(((lotArea-10000)/1000)*.012)) } else if(lotArea < 30000){ entireForm.A2.value = (.29-(((lotArea-15000)/1000)*.006)) } else if(lotArea < 35000){ entireForm.A2.value = (.20-(((lotArea-30000)/1000)*.0045)) } else if(lotArea < 40000){ entireForm.A2.value = (.1775-(((lotArea-35000)/1000)*.003)) } else if(lotArea < 45000){ entireForm.A2.value = (.1625-(((lotArea-40000)/1000)*.002)) } else if(lotArea < 50000){ entireForm.A2.value = (.1525-(((lotArea-45000)/1000)*.0015)) } else if(lotArea < 76231){ entireForm.A2.value = .145 } else { entireForm.A2.value = 0 } entireForm.A2.value = roundFour(entireForm.A2.value) // Calculates A4 if(lotArea < 76231){ var maxFar = entireForm.A2.value entireForm.A4.value = (roundTwo(lotArea * maxFar)) } else{ entireForm.A4.value = 15000 } // Calculates A7 & A10 var RRightSetBack = entireForm.A5.value var PRightSetBack = entireForm.A6.value var RLeftSetBack = entireForm.A8.value var PLeftSetBack = entireForm.A9.value entireForm.A7.value = (PRightSetBack - RRightSetBack) if(entireForm.A7.value <= 0){ entireForm.A7.value = 0 } entireForm.A10.value = roundFour(PLeftSetBack - RLeftSetBack) if(entireForm.A10.value <= 0){ entireForm.A10.value = 0 } leftResult = entireForm.A10.value rightResult = entireForm.A7.value // Calculates A11 entireForm.A11.value = roundFour(Number(leftResult) + Number(rightResult)) // Calculates A12 entireForm.A12.value = roundFour(entireForm.A11.value * 100) // Calculates A14 if(entireForm.zone.value == "AA1"){ entireForm.A14.value = "0" } else{ var formA13 = entireForm.A13.value var formA12 = entireForm.A12.value if(Number(formA13) < Number(formA12)){ entireForm.A14.value = formA13 } else{ entireForm.A14.value = formA12 } } // Calculates A15 entireForm.A15.value = (Number(entireForm.A14.value) + Number(entireForm.A4.value)) } function doPartB(){ //------------------------------------- // Calculates B2 & B6 //-------------------------------------- var formB2 = (entireForm.B1.value * 2) var formB3 = entireForm.B3.value var formB4 = entireForm.B4.value var formB5 = entireForm.B5.value entireForm.B2.value = formB2 entireForm.B6.value = roundTwo(Number(formB2) + Number(formB3) + Number(formB4) + Number(formB5)) } var firstTimeThrough = 0 function doPartC(){ //------------------------------------- // Calculates C4 //-------------------------------------- var tallestPoint = entireForm.C1.value if( !(entireForm.C1.value == "") ){ firstTimeThrough = 1 } if ( (tallestPoint < 3) && (firstTimeThrough == 1) ){ entireForm.C2.value = "N/A to this property" entireForm.C2.disabled = true entireForm.C3.value = "N/A to this property" entireForm.C3.disabled = true entireForm.C4.value = "0" } else{ if (entireForm.C2.value == "N/A to this property"){ entireForm.C2.value = "" entireForm.C2.disabled = false entireForm.C3.value = "" entireForm.C3.disabled = false entireForm.C4.value = "" } else{ entireForm.C4.value = roundTwo(entireForm.C3.value * entireForm.C2.value) } } } function doPartD(){ if(entireForm.D1.value == "No" || entireForm.D2.value == "No"){ entireForm.D3.value = "N/A to this property" entireForm.D3.disabled = true entireForm.D4.value = "N/A to this property" entireForm.D4.disabled = true entireForm.D5.value = "---------------------" entireForm.D6.value = "N/A to this property" entireForm.D6.disabled = true entireForm.D7.value = "N/A to this property" entireForm.D7.disabled = true entireForm.D8.value = "---------------------" entireForm.D9.value = "N/A to this property" entireForm.D9.disabled = true entireForm.D10.value = "N/A to this property" entireForm.D10.disabled = true entireForm.D11.value = "---------------------" entireForm.D12.value = "N/A to this property" entireForm.D12.disabled = true entireForm.D13.value = "N/A to this property" entireForm.D13.disabled = true entireForm.D14.value = "N/A to this property" entireForm.D14.disabled = true entireForm.D15.value = "N/A to this property" entireForm.D15.disabled = true entireForm.D16.value = "0" } else if(entireForm.D3.value == "N/A to this property"){ entireForm.D3.value = "" entireForm.D3.disabled = false entireForm.D4.value = "" entireForm.D4.disabled = false entireForm.D5.value = "" entireForm.D6.value = "" entireForm.D6.disabled = false entireForm.D7.value = "" entireForm.D7.disabled = false entireForm.D8.value = "" entireForm.D9.value = "" entireForm.D9.disabled = false entireForm.D10.value = "" entireForm.D10.disabled = false entireForm.D11.value = "" entireForm.D12.value = "" entireForm.D12.disabled = false entireForm.D13.value = "" entireForm.D13.disabled = false entireForm.D14.value = "" entireForm.D14.disabled = false entireForm.D15.value = "" entireForm.D15.disabled = false entireForm.D16.value = "" } else{ //------------------------------------- // Calculates D5 //-------------------------------------- if(entireForm.D3.value == "0"){ entireForm.D4.value = "0" entireForm.D5.value = "0" } else{ entireForm.D5.value = roundFour((entireForm.D4.value / entireForm.D3.value)*100) } //------------------------------------- // Calculates D8 //-------------------------------------- if(entireForm.D6.value == "0"){ entireForm.D7.value = "0" entireForm.D8.value = "0" } else{ entireForm.D8.value = roundFour((entireForm.D7.value / entireForm.D6.value)*100) } //------------------------------------- // Calculates D11 //-------------------------------------- if(entireForm.D9.value == "0"){ entireForm.D10.value = "0" entireForm.D11.value = "0" } else{ entireForm.D11.value = roundFour((entireForm.D10.value / entireForm.D9.value)*100) } if(entireForm.D12.value == "0"){ entireForm.D13.value = "0" } if(entireForm.D4.value == ""){ entireForm.D5.value = "NMI" } if(entireForm.D7.value == ""){ entireForm.D8.value = "NMI" } if(entireForm.D10.value == ""){ entireForm.D11.value = "NMI" } //------------------------------------- // Calculates D16 //-------------------------------------- if(entireForm.D5.value < 30 && entireForm.D8.value < 30 && entireForm.D11.value < 30 && entireForm.D12.value >= 5 && entireForm.D13.value >= 5){ entireForm.D14.value = "N/A to this property" entireForm.D14.disabled = true entireForm.D15.value = "N/A to this property" entireForm.D15.disabled = true entireForm.D16.value = "N/A to this property" } else if (entireForm.D14.value == "N/A to this property"){ entireForm.D14.value = "" entireForm.D14.disabled = false entireForm.D15.value = "" entireForm.D15.disabled = false entireForm.D16.value = "" } if (!(entireForm.D14.value == "") && !(entireForm.D15.value == "") && !(entireForm.D15.value == "N/A to this property") && !(entireForm.D15.value == "N/A to this property")){ entireForm.D16.value = (entireForm.D14.value - entireForm.D15.value) } } } function doPartE(){ //------------------------------------- // Calculates E2 //-------------------------------------- entireForm.E2.value = entireForm.E1.value } function doPartF(){ if(entireForm.F0.value == "No"){ entireForm.F3.value = "0" entireForm.F3.disabled = true entireForm.F4.value = "0" entireForm.F4.disabled = true entireForm.F5.value = "0" entireForm.F5.disabled = true entireForm.F6.value = "No" entireForm.F6.disabled = true entireForm.F7.disabled = true } else if(entireForm.F0.value == "Yes" && entireForm.F3.value == "0"){ entireForm.F3.value = "" entireForm.F3.disabled = false entireForm.F4.value = "" entireForm.F4.disabled = false entireForm.F5.value = "" entireForm.F5.disabled = false entireForm.F6.value = "Yes" entireForm.F6.disabled = false entireForm.F7.disabled = false } if(entireForm.F1.value == "No"){ entireForm.F2.value = "0" entireForm.F2.disabled = true } else if(entireForm.F1.value == "Yes" && entireForm.F2.value == "0"){ entireForm.F2.value = "" entireForm.F2.disabled = false } if(entireForm.F6.value == "No" || entireForm.F7.value == "No"){ entireForm.F8.value = "N/A to this property" entireForm.F8.disabled = true entireForm.F9.value = "N/A to this property" entireForm.F9.disabled = true entireForm.F10.value = "---------------------" entireForm.F11.value = "N/A to this property" entireForm.F11.disabled = true entireForm.F12.value = "N/A to this property" entireForm.F12.disabled = true entireForm.F13.value = "---------------------" entireForm.F14.value = "N/A to this property" entireForm.F14.disabled = true entireForm.F15.value = "N/A to this property" entireForm.F15.disabled = true entireForm.F16.value = "---------------------" entireForm.F17.value = "N/A to this property" entireForm.F17.disabled = true entireForm.F18.value = "N/A to this property" entireForm.F18.disabled = true entireForm.F19.value = "N/A to this property" entireForm.F19.disabled = true entireForm.F20.value = "N/A to this property" entireForm.F20.disabled = true entireForm.F21.value = "0" } else if(entireForm.F8.value == "N/A to this property"){ entireForm.F8.value = "" entireForm.F8.disabled = false entireForm.F9.value = "" entireForm.F9.disabled = false entireForm.F10.value = "" entireForm.F11.value = "" entireForm.F11.disabled = false entireForm.F12.value = "" entireForm.F12.disabled = false entireForm.F13.value = "" entireForm.F14.value = "" entireForm.F14.disabled = false entireForm.F15.value = "" entireForm.F15.disabled = false entireForm.F16.value = "" entireForm.F17.value = "" entireForm.F17.disabled = false entireForm.F18.value = "" entireForm.F18.disabled = false entireForm.F19.value = "" entireForm.F19.disabled = false entireForm.F20.value = "" entireForm.F20.disabled = false entireForm.F21.value = "0" } else{ //------------------------------------- // Calculates F10 //-------------------------------------- if(entireForm.F8.value == "0"){ entireForm.F9.value = "0" entireForm.F10.value = "0" } else{ entireForm.F10.value = roundFour((entireForm.F9.value / entireForm.F8.value)*100) } //------------------------------------- // Calculates F13 //-------------------------------------- if(entireForm.F11.value == "0"){ entireForm.F12.value = "0" entireForm.F13.value = "0" } else{ entireForm.F13.value = roundFour((entireForm.F12.value / entireForm.F11.value)*100) } //------------------------------------- // Calculates F16 //-------------------------------------- if(entireForm.F14.value == "0"){ entireForm.F15.value = "0" entireForm.F16.value = "0" } else{ entireForm.F16.value = roundFour((entireForm.F15.value / entireForm.F14.value)*100) } if(entireForm.F17.value == "0"){ entireForm.F18.value = "0" } if(entireForm.F9.value == ""){ entireForm.F10.value = "NMI" } if(entireForm.F12.value == ""){ entireForm.F13.value = "NMI" } if(entireForm.F15.value == ""){ entireForm.F16.value = "NMI" } //------------------------------------- // Calculates F21 //-------------------------------------- if(entireForm.F10.value < 30 && entireForm.F13.value < 30 && entireForm.F16.value < 30 && entireForm.F17.value >= 5 && entireForm.F18.value >= 5){ entireForm.F19.value = "N/A to this property" entireForm.F19.disabled = true entireForm.F20.value = "N/A to this property" entireForm.F20.disabled = true entireForm.F21.value = "N/A to this property" } else if (entireForm.F19.value == "N/A to this property"){ entireForm.F19.value = "" entireForm.F19.disabled = false entireForm.F20.value = "" entireForm.F20.disabled = false entireForm.F21.value = "" } if (!(entireForm.F19.value == "") && !(entireForm.F20.value == "") && !(entireForm.F20.value == "N/A to this property") && !(entireForm.F20.value == "N/A to this property")){ entireForm.F21.value = roundTwo(entireForm.F19.value - entireForm.F20.value) } } //------------------------------------- // Calculates F23 //-------------------------------------- entireForm.F22.value = entireForm.A1.value if(entireForm.F22.value <= 10000){ entireForm.F23.value = 250 } else{ entireForm.F23.value = 400 } //------------------------------------- // Calculates F24 & F25 //-------------------------------------- entireForm.F24.value = roundFour(Number(entireForm.F2.value) + Number(entireForm.F3.value)) entireForm.F25.value = roundFour(entireForm.F24.value - entireForm.F23.value) //------------------------------------- // Calculates F26 //-------------------------------------- if(entireForm.F25.value < 0){ entireForm.F25.value = 0 } entireForm.F26.value = roundTwo(Number(entireForm.F4.value) + Number(entireForm.F5.value) + Number(entireForm.F21.value) + Number(entireForm.F25.value)) } function doPartG(){ //------------------------------------- // Calculates G1 & G2 //-------------------------------------- entireForm.G1.value = roundTwo(Number(entireForm.B6.value) + Number(entireForm.C4.value) + Number(entireForm.D16.value) + Number(entireForm.E2.value) + Number(entireForm.F26.value)) entireForm.G2.value = entireForm.A15.value //------------------------------------- // Calculates G4 & G5 //-------------------------------------- if (entireForm.G1.value > entireForm.G2.value){ entireForm.G3.value = "Yes" entireForm.G4.value = roundTwo(entireForm.G1.value - entireForm.G2.value) } else{ entireForm.G3.value = "No" entireForm.G4.value = "Not exceeded" } } </SCRIPT> [CODE] I have attached the html file as a .txt file for reference, and I have attached a .txt document including all the values I used for testing. Why is it showing NaN values? Any help would be greatly appreciated. Thank You. I want to refresh the calculations on a form without submitting the form. I have tried two different JavaScript button codes, and I'm wondering if there is a reason for using one over the other, and if there is something else better for cross-browser use. 1) [ICODE] _doClick('$Refresh', this, '_self') 2) [ICODE] _doClick('$Refresh', this, null, null) Sorry if I missed the answer to this by searching, but I did try. Advice is welcome. Dear expert (Ok, i am new to this and should maybe not address this as a letter ) I hope someone can help me ... this is what i want to achieve (I am using frontpage) I want to create a table (this i can do!) that require a user input (number of guests). It then has SEVERAL options: - Select an option from a drop down list, and a price is then loaded from somewhere to create a total for that option and display it in the table (And keep that total for adding later) - Check a box, and if checked it creates a further calculation, displaying and storing the number for further calculation. a number of the above options, and a grand total on the bottom. I found more or less a page on a site that does what i am looking for, but after looking at the code, i have even LESS of an idea how it works Can someone PLEASE help me, or point me in the right direction? (I am not looking for someone to just write the code for me, as this will not teach me anything, and i want to learn) Below is a link to the example .. http://www.ouma-se-kombuis.co.za/test.html Thank you! Hey, I'm looking for some help with something I have been developing over the last day or so. Basically, I have a form with some input boxes in it, and I am trying to use some javascript to do a calculation with these input boxes. The problem is that when I go to click on the "calculate" button nothing happens. The fields where the value should go to I have made visible instead of hidden to make sure that something is going there but nothing is appearing. I've checked various parts of my syntax with online checkers and other javascript examples and I'm stuck as to what has gone wrong. If anyone can shed some light on the problem and possible solutions that would be awesome. I am using Macromedia Dreamweaver MX2004 to develop this. I have added the code below for the entire test html page: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> #calc_container { padding-right: 25px; padding-left: 25px; width: 900px; } .calculator_text1 { color: #FFFFFF } </style> <script type="text/javascript"> function Combat() { var Attack = (document.Combat_Calculator.Combat_Attack.value); var Strength = (document.Combat_Calculator.Combat_Strength.value); var Defence = (document.Combat_Calculator.Combat_Defence.value); var Constitution = (document.Combat_Calculator.Combat_Constitution.value); var Magic = (document.Combat_Calculator.Combat_Magic.value); var Ranged = (document.Combat_Calculator.Combat_Ranged.value); var Prayer = (document.Combat_Calculator.Combat_Prayer.value); var Summoning = (document.Combat_Calculator.Combat_Summoning.value); var Sum_Melee = parseInt(0.25 * ((1.3 * (Attack + Strength)) + Defence + Constitution + (0.5 * Prayer))); var Sum_Magic = parseInt(0.25 * ((1.3 * (2 / 3 * Magic)) + Defence + Constitution + (0.5 * Prayer))); var Sum_Ranged = parseInt(0.25 * ((1.3 * ( 2 / 3 * Ranged)) + Defence + Constitution + (0.5 * Prayer))); document.Combat_Calculator.Combat_Sum_Melee.value = (Sum_Melee); document.Combat_Calculator.Combat_Sum_Magic.value = (Sum_Magic); document.Combat_Calculator.Combat_Sum_Rangedr.value = (Sum_Ranged); } function MM_callJS(jsStr) { return eval(jsStr) } </script> </head> <body> <div id="calc_container" onselectstart="return false"> <form action="" method="post" name="Combat_Calculator" id="Combat_Calculator"> <table width="822" border="10" bordercolor="#2E2E2E" bgcolor="2E2E2E"> <tr bgcolor="2E2E2E"> <td width="87" height="15"></td> <td width="146" height="15"></td> <td width="122" height="15"></td> <td width="145" height="15"></td> <td width="37" height="15" bgcolor="2E2E2E"></td> <td width="179" height="15"></td> <td width="56" height="15"></td> </tr> <tr> <td height="58" colspan="7" bgcolor="#FFFFFF"><div align="right"></div> <div align="center">Your combat level is:<input name="Free_Player" type="text" id="Free_Player" maxlength="3" disabled="disabled" style="background-color:#FFFFFF; border:none;"> +<input name="Member" type="text" id="Member" maxlength="2" disabled="disabled" style="background-color:#FFFFFF; border:none;"> </div><div align="right"></div><div align="center"></div><div align="right"></div><div align="center"></div></td> </tr> <tr> <td height="15"><div align="right" class="calculator_text1">Attack:</div></td> <td height="15" bgcolor="2E2E2E"><input name="Combat_Attack" maxlength="2" type="text" id="Combat_Attack"></td> <td height="15"><div align="right" class="calculator_text1">Magic:</div></td> <td height="15" bgcolor="2E2E2E"><input name="Combat_Magic" maxlength="2" type="text" id="Combat_Magic"></td> <td width="37" height="15" bgcolor="2E2E2E"></td> <td height="15" bgcolor="2E2E2E"></td> <td height="15" bgcolor="2E2E2E"></td> </tr> <tr> <td height="15"><div align="right" class="calculator_text1">Strength:</div></td> <td height="15" bgcolor="2E2E2E"><input name="Combat_Strength" maxlength="2" type="text" id="Combat_Strength"></td> <td height="15"><div align="right" class="calculator_text1">Ranged:</div></td> <td height="15" bgcolor="2E2E2E"><input name="Combat_Range" maxlength="2" type="text" id="Combat_Range"></td> <td width="37" height="15" bgcolor="2E2E2E"></td> <td height="15" bgcolor="2E2E2E"><div align="center"> <input name="Combat_Calculate" type="button" id="Combat_Calculate" onClick="MM_callJS('Combat();')" value="Calculate"></div></td> <td height="15" bgcolor="2E2E2E"></td> </tr> <tr> <td height="15"><div align="right" class="calculator_text1">Defence:</div></td> <td height="15" bgcolor="2E2E2E"><input name="Combat_Defence" maxlength="2" type="text" id="Combat_Defence"></td> <td height="15"><div align="right" class="calculator_text1">Prayer:</div></td> <td height="15" bgcolor="2E2E2E"><input name="Combat_Prayer" maxlength="2" type="text" id="Combat_Prayer"></td> <td width="37" height="15" bgcolor="2E2E2E"></td> <td height="15" bgcolor="2E2E2E"></td> <td height="15" bgcolor="2E2E2E"></td> </tr> <tr> <td height="15"><div align="right" class="calculator_text1">Constituion:</div></td> <td height="15" bgcolor="2E2E2E"><input name="Combat_Constitution" maxlength="2" type="text" id="Combat_Constitution"></td> <td height="15"><div align="right" class="calculator_text1">Summoning:</div></td> <td height="15" bgcolor="2E2E2E"><input name="Combat_Summoning" maxlength="2" type="text" id="Combat_Summoning" ></td> <td width="37" height="15" bgcolor="2E2E2E"></td> <td height="15" bgcolor="2E2E2E"></td> <td height="15" bgcolor="2E2E2E"></td> </tr> </table> <p><input name="Combat_Sum_Melee" type="text" id="Combat_Sum_Melee">Melee</p> <p><input name="Combat_Sum_Magic" type="text" id="Combat_Sum_Magic">Magic</p> <p><input name="Combat_Sum_Range" type="text" id="Combat_Sum_Range">Range</p> </form> </div> </body> </html> Edit: I have edited the code to remove/change the things that "Philip M" kindly pointed out were not needed and a bit of re-designing the page. I still can't get the javascript to put the answer value in the correct place on the click of the button. I'm under the impression it has something to do with the button rather than the javascript code but I might be wrong. My problem is that i have multiple math calculations within different functions that have multiple switch statements that get calculated with an onclick="functionOne()" for each radio button and before i can calculate the outcome for some reason i must fully insert a value for every input as well as check every raidio button before i get to the end of my list. I wish to simply allow the user to fill out as many fields as he wishes leaving some bank without being restricted to do every single one.. Thank you in advance
Hi, I'm kinda hoping this is possible but haven't found any reference to it... I have a parent page that opens a popup on click that launches a sidebar navigation on the right of the screen and resizes the parent page. What I am wanting to do is create a second popup (approx 250px high) that opens below the navigation (which is only around 600px high) but I have noticed that even when you have no status bar in the popup windows, they can still end up overlapping because of additional tools or plugins that the viewer has in their browser. Is there any way to get the popups to butt up against each other instead of overlapping? More like a relative popup? Any assistance would be appreciated. :-) I found this popup window, and it works for my project, now i would like to include a close option to the popup window. Either "close", a button, or click aywhere. Here is the coding I am currently using: <script type="text/javascript"> function openWin(image, w, h){ var wh='width='+w+',height='+h var tmpPage=window.open('','',wh) tmpPage.document.write('<body style="margin:0;padding:0;"><img src="'+image+'" width="'+w+'" height="'+h+'">') tmpPage.document.close() } </script> <a href="1379_files/image296.jpg" target="_blank" onclick="openWin(this.href, 1253, 940);return false;"><img src="1379_files/image296.jpg" width="348" height="261" border="0"></a> <a href="1379_files/image298.jpg" target="_blank" onclick="openWin(this.href, 1253, 940);return false;"><img src="1379_files/image298.jpg" width="348" height="261" border="0"></a> <p> <a href="1379_files/image300.jpg" target="_blank" onclick="openWin(this.href, 1253, 940);return false;"><img src="1379_files/image300.jpg" width="348" height="261" border="0"></a> This opens 3 pictures, that when clicked opens the popup of the same picture, only full screen. Is there a way to make a popup appear behind the current window?
Okay, first it should be noted I am a complete, 100% neophyte with javascript. I know HTML code pretty well, and I can do quite a bit of PHP as well, but it is all self-taught, so I am hardly an expert... and as I said, java is like French to me. I have a very simple website I've built, nothing complicated or dynamic - but we want to add one feature to this website which I have to say I am at a complete loss about. Basically, I want to have the main page of this website to have a popup form that somebody can plug in their name, email and zipcode load the first time somebody loads the page (which would obviously dump into a database or something), and then the next time the person goes to that page, that popup does not come up again. In other words, I want the feature to behave exactly like this: http://gopleader.gov/ Grey out the background, popup form, place a cookie so that in the future the popup doesn't load again, and that is it. I honestly am no kidding when I say I don't know javascript at all... so I would appreciate somebody helping me out with that in mind (in other words, don't just assume I know where I need to input my own custom values). Does anyone have any ideas here? |