|
JavaScript - Form Calculations
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> Similar TutorialsI 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. 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. 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 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> 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. 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, 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 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. 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! 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
Hello I've been struggling trying to get a small order form to work the way I want it to. Here is a link to the live page: http://www.watphotos.com/introductio...otography.html And here is the code in question: Code: <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
var initial = 0
var total = 0;
var services = 0;
function addServices()
{
initial = 150
total = initial
services = 0;
$("input:checked").each(function(){
value = $(this).attr("value");
services += parseInt(value);
});
}
$(function()
{
addServices();
total += services;
$("form").before('<p class="price"></p>')
$("p.price").text("Total Price: US$" + total);
});
$("input:radio, input:checkbox").click(function () {
addServices();
total += services
$("p.price").text("Total Price: US$" + total);
});
});
</script>
I have two questions... Question 1 How can I make this piece of script act a little smarter. Look at the order form, I'm catering for up to 4 people and providing lunch for them. If they select 3 people and the spaghetti bol for lunch, it's only adding $10 where it should be adding $30. Obviously this is simple multiplication but since the values in my form are prices it makes it a little tricky. I'm guessing an onselect on the first part of the form which changes the pricing of the other items would be the way to go, but how do I do this? Question 2 The "Total Price" is placed before the <form> tag by the script. This is ok but it's not where I want it. How can I position this text elsewhere in the document? Thanks in advance! I've literally tried everything. Read 26 tutorials, interchanged code, etc. My validation functions all work. My AJAX functions work (tested manually using servlet URL's). The second servlet validates the reCaptcha form that's generated on my webpage. After the form is validated, even if everything's correct, nothing happens upon clicking submit. I even have an alert pop up if with the captcha result, just for middle-layer debugging purposes. I want to do all of my validation clientside; none serverside. However, going to be tough if I can't get my god damn form to submit. I've been puzzled by this for close to 36 hours straight. I can't see, and I'm going to get some rest and hope that there is some useful insight on my problem when I return. html form: Code: <form id="f1" name="form1" onsubmit="validate_form(this); return false;" action="register" method="post">
<table cellspacing="5" style="border: 2px solid black;">
<tr>
<td valign="top">
<table cellspacing="5">
<tr>
<td>*First name</td>
<td align="right"><span id="valid_one"></span></td>
<td><input type="text" style="width: 320px;" id="fn" name="fn" onBlur="validate_one();"></td>
</tr>
<tr>
<td align="left">*Last name</td>
<td align="right"><span id="valid_two"></span></td>
<td><input type="text" style="width: 320px;" id="ln" name="ln" onBlur="validate_two();"></td>
</tr>
<tr>
<td align="left">*Email address</td>
<td align="right"><span id="result"></span></td>
<td><input type="text" style="width: 320px;" id="mailfield" name="email" onBlur="startRequest();"></td>
</tr>
<tr>
<td align="left">*Phone number</td>
<td align="right"><span id="valid_three"></span></td>
<td><input type="text" style="width: 320px;" id="pn" name="pn" onBlur="validate_three();"></td>
</tr>
<tr>
<td align="left">*City/Town</td>
<td align="right"><span id="valid_four"></span></td>
<td><input type="text" style="width: 320px;" id="c" name="c" onBlur="validate_four();"></td>
</tr>
<tr>
<td></td>
<td></td>
<td>
<select name="s">
<option value="AL">Alabama
<option value="AK">Alaska
<option value="AZ">Arizona
<option value="AR">Arkansas
<option value="CA">California
<option value="CO">Colorado
<option value="CT">Connecticut
<option value="DE">Delaware
<option value="FL">Florida
<option value="GA">Georgia
<option value="HI">Hawaii
<option value="ID">Idaho
<option value="IL">Illinois
<option value="IN">Indiana
<option value="IA">Iowa
<option value="KS">Kansas
<option value="KY">Kentucky
<option value="LA">Louisiana
<option value="ME">Maine
<option value="MD">Maryland
<option value="MA">Massachusetts
<option value="MI">Michigan
<option value="MN">Minnesota
<option value="MS">Mississippi
<option value="MO">Missouri
<option value="MT">Montana
<option value="NE">Nebraska
<option value="NV">Nevada
<option value="NH">New Hampshire
<option value="NJ">New Jersey
<option value="NM">New Mexico
<option value="NY">New York
<option value="MC">North Carolina
<option value="ND">North Dakota
<option value="OH">Ohio
<option value="OK">Oklahoma
<option value="OR">Oregon
<option value="PA">Pennsylvania
<option value="RI">Rhode Island
<option value="SC">South Carolina
<option value="SD">South Dakota
<option value="TN">Tennessee
<option value="TX">Texas
<option value="UT">Utah
<option value="VT">Vermont
<option value="VA">Virginia
<option value="WA">Washington
<option value="WV">West Virginia
<option value="WI">Wisconsin
<option value="WY">Wyoming
</select>
</td>
</tr>
<tr>
<td>
<br>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td><span id="error"></span></td>
</tr>
<tr>
<td valign="top">*Anti-Spam Verification</td>
<td></td>
<td id="reCaptcha"></td>
</tr>
</table>
</td>
<td valign="top">
<table cellspacing="5">
<tr>
<td align="left">*Affiliation</td>
<td align="right"><span id="valid_five"></span></td>
<td><input type="text" style="width: 320px;" id="affl" name="affl" onBlur="validate_five();"></td>
</tr>
<tr>
<td align="left">*Research Area:</td>
<td align="right"><span id="valid_six"></span></td>
<td><input type="text" style="width: 320px;" id="ra" name="ra" onBlur="validate_six();"></td>
</tr>
<tr>
<td valign="top" align="left">*Research Overview</td>
<td align="right"><span id="valid_seven"></span></td>
<td><textarea cols="38" rows="6" id="ro" name="ro" onKeyDown="limitText(this.form.ro,this.form.countdown,500)" onKeyUp="limitText(this.form.ro,this.form.countdown,500)" onBlur="validate_seven();"></textarea></td>
</tr>
<tr>
<td></td>
<td></td>
<td><font size="1">You have <input readonly type="text" name="countdown" size="1" value="500"> characters remaining.</font></td>
</tr>
<tr>
<td align="left">*Talk Availability</td>
<td></td>
<td>
<input type="radio" name="ta" value="In person">In person
<input type="radio" name="ta" value="Online">Online
<input type="radio" name="ta" value="Both" checked>Both
</td>
</tr>
<tr>
<td align="left" valign="top">Links</td>
<td></td>
<td>
<table id="linkTable" border="0">
<td><input type="text" style="width: 320px;" name="link"></td>
<td><div id="result"></div></td>
</table>
</td>
<td align="left" valign="top"><input type="button" value="Add Link" onclick="addLink('linkTable')"></td>
</tr>
<tr>
<td></td>
<td><span style="color: red;"></span></td>
</tr>
</table>
</td>
</tr>
</table>
<br />
<input type="submit" id="submit" name="submit" value="Submit Form">
</form>
Javascript file: Code: /*
* script.js - ajax and table functions
*/
var xmlHttp; // global instance of XMLHttpRequest
var xmlHttp2; // second for captcha functions
var validAjax = new Boolean();
var validCaptcha = new Boolean();
var valid_one = new Boolean();
var valid_two = new Boolean();
var valid_three = new Boolean();
var valid_four = new Boolean();
var valid_five = new Boolean();
var valid_six = new Boolean();
var valid_seven = new Boolean();
function init() {
showRecaptcha('reCaptcha');
// Separate booleans for AJAX funcs
validAjax = false;
validCaptcha = false;
// Booleanse for fields that don't require servlet validation
valid_one = false;
valid_two = false;
valid_three = false;
valid_four = false;
valid_five = false;
valid_six = false;
valid_seven = false;
}
function showRecaptcha(element) {
Recaptcha.create("6Le1a8ESAAAAAGtxX0miZ2bMg0Wymltnth7IG-Mj", element, {theme: "red", callback: Recaptcha.focus_response_field});
}
function validate_form() {
if (valid_one && valid_two && valid_three && valid_four && validEmail) {
startCaptchaRequest();
if (validCaptcha) {
return true;
}
}
else {
alert("Submission contains errors. Please fill out all required fields before submitting.");
return false;
}
}
function validate_one() {
if (document.getElementById("fn").value == 0) {
valid_one = false;
document.getElementById("valid_one").innerHTML = "No";
}
else {
valid_one = true;
document.getElementById("valid_one").innerHTML = "";
}
}
function validate_two() {
if (document.getElementById("ln").value == 0) {
valid_two = false;
document.getElementById("valid_two").innerHTML = "No";
}
else {
valid_two = true;
document.getElementById("valid_two").innerHTML = "";
}
}
function validate_three() {
if (document.getElementById("pn").value == 0) {
valid_three = false;
document.getElementById("valid_three").innerHTML = "No";
}
else {
valid_three = true;
document.getElementById("valid_three").innerHTML = "";
}
}
function validate_four() {
if (document.getElementById("c").value == 0) {
valid_four = false;
document.getElementById("valid_four").innerHTML = "No";
}
else {
valid_four = true;
document.getElementById("valid_four").innerHTML = "";
}
}
function validate_five() {
if (document.getElementById("affl").value == 0) {
valid_five = false;
document.getElementById("valid_five").innerHTML = "No";
}
else {
valid_five = true;
document.getElementById("valid_five").innerHTML = "";
}
}
//
//function validate_six() {
// if (document.getElementById("ra").value == 0) {
// valid_six = false;
// document.getElementById("valid_six").innerHTML = "No";
// }
// else {
// valid_six = true;
// document.getElementById("valid_six").innerHTML = "";
// }
//}
//
//function validate_seven() {
// if (document.getElementById("ro").value == 0) {
// valid_seven = false;
// document.getElementById("valid_seven").innerHTML = "No";
// }
// else {
// valid_seven = true;
// document.getElementById("valid_seven").innerHTML = "";
// }
//}
function addLink(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "text";
element1.name = "link" + rowCount;
element1.style.width = "320px";
cell.appendChild(element1);
}
function limitText(limitField, limitCount, limitNum) {
if (limitField.value.length > limitNum) {
limitField.value = limitField.value.substring(0, limitNum);
}
else {
limitCount.value = limitNum - limitField.value.length;
}
}
function createXmlHttpRequest() {
if(window.ActiveXObject) {
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest) {
xmlHttp=new XMLHttpRequest();
}
}
function startRequest() {
createXmlHttpRequest();
var param1 = document.getElementById('mailfield').value;
if (param1 == "") {
validEmail = false;
document.getElementById("result").innerHTML = "Blank";
}
else {
xmlHttp.open("GET", "http://localhost:1979/PolarSpeakers/servlet/mailCheck.do?e=" + param1, true)
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.send(null);
}
}
function handleStateChange() {
if(xmlHttp.readyState==4) {
if(xmlHttp.status==200) {
var message =
xmlHttp.responseXML
.getElementsByTagName("valid")[0]
.childNodes[0].nodeValue;
if (message == "Unregistered") {
validEmail = true;
document.getElementById("result").style.color = "green";
}
else {
validEmail = false;
document.getElementById("result").style.color = "red";
}
document.getElementById("result").innerHTML = message;
}
else {
alert("Error checking e-mail address - " + xmlHttp.status +
" : " + xmlHttp.statusText);
}
}
}
function createCaptchaRequest() {
if(window.ActiveXObject) {
xmlHttp2=new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest) {
xmlHttp2=new XMLHttpRequest();
}
}
function startCaptchaRequest() {
alert('made it to captcha requeswt');
createCaptchaRequest();
var param1 = Recaptcha.get_challenge();
var param2 = Recaptcha.get_response();
xmlHttp2.open("POST", "http://localhost:1979/PolarSpeakers/servlet/captchaCheck.do?c=" + param1 + "&r=" + param2, true)
xmlHttp2.onreadystatechange = handleStateChangeCaptcha;
xmlHttp2.send(null);
}
function handleStateChangeCaptcha() {
if(xmlHttp2.readyState==4) {
if(xmlHttp2.status==200) {
var message =
xmlHttp2.responseXML
.getElementsByTagName("result")[0]
.childNodes[0].nodeValue;
if (message == "Valid") {
alert("captcha valid");
validCaptcha = true;
}
else {
document.getElementById("error").innerHTML = message;
validCaptcha = false;
}
}
else {
alert("Error checking captcha validity - " + xmlHttp2.status +
" : " + xmlHttp2.statusText);
}
}
}
Hi guys, Been stuck for a few days with this scenario. Any help? The alert box appears on an error. But the submitting won't stop. The details are submitted and the form is processed. Any help is greatly appreciated... Code: <html>
<head>
<script type="text/javascript" src="email_helper/jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
// General options
mode : "textareas",
theme : "simple"
});
</script>
<script language="javascript">
function MM_openBrWindow(theURL,winName,features) {
window.open(theURL,winName,features);
}
function err_check(){
var email = document.getElementById('to_email').value;
if(email.length==0){
alert('Please Enter Email Address');
return false;
}
var AtPos = email.indexOf("@")
var StopPos = email.lastIndexOf(".")
if (AtPos == -1 || StopPos == -1) {
alert("Please Enter Valid Email Address");
document.getElementById('email').focus();
return false;
}
email = document.getElementById('cc_email').value;
if(email.length != 0){
var AtPos = email.indexOf("@")
var StopPos = email.lastIndexOf(".")
if (AtPos == -1 || StopPos == -1) {
alert("Please Enter Valid Email Address");
document.getElementById('email').focus();
return false;
}
}
var answer = confirm ("Send E-Mail?");
if (!answer){
return false;
}
}
</script>
<!-- /TinyMCE -->
<style type="text/css">
body, table, td, th{
background-color:#CCCCCC;
font-family: Arial;
font-size:14px;
}
.que{
font-weight:bold;
}
</style>
</head>
<body>
<form method="post" enctype="multipart/form-data">
<?php
include 'library/database.php';
include 'library/opendb.php';
$query = mysql_query("SELECT email,contact,mobile FROM users WHERE user_id='$uid'") or die(mysql_error());
$row = mysql_fetch_row($query);
$from_email = $row[0];
$from_person = $row[1];
$from_mobile = $row[2];
$query = mysql_query("SELECT customer_id FROM campaign_summary WHERE camp_id='$camp_id'") or die(mysql_error());
$row = mysql_fetch_row($query);
$cusid = $row[0];
$query = mysql_query("SELECT email FROM client_info WHERE comp_id='$cusid'") or die(mysql_error());
$row = mysql_fetch_row($query);
$toer = $row[0];
include 'library/closedb.php';
?>
<table width="100%" border="0">
<tr><td rowspan="4"><input type="submit" name="send_email" id="send_email" style="height:50px; width:100px;" value="SEND" onClick="return err_check();" /></td><td><span class="que">From : </span></td><td colspan="3"><?php echo $from_email; ?><input type="hidden" name="from_mail" id="from_mail" /><input type="hidden" name="camp_id" id="camp_id" value="<?php echo $camp_id;?>"/></td></tr>
<tr><td><span class="que">To : </span></td><td colspan="3"><input name="to_email" id="to_email" style="width:250px;" value="<?php echo $toer;?>"/></td></tr>
<tr><td><span class="que">CC : </span></td><td colspan="3"><input name="cc_email" id="cc_email" style="width:250px;"/></td></tr>
<tr><td><span class="que">Subject : </span></td><td colspan="3"><input style="width:300px;" name="subject" id="subject" /></td></tr>
<tr><td rowspan="1" colspan="2"> </td><td><input type="checkbox" name="ori_pdf" id="ori_pdf" checked /> PDF Quotation</td><td> </td><td> </td></tr><tr><td colspan="2"><span class="que">Credit Application</span></td><td><input type="checkbox" name="corporate" id="corporate"/>Corporate</td><td><input type="checkbox" name="individual" id="individual" />Individual</td><td><input type="checkbox" name="cash" id="cash" />Cash Account</td>
</tr>
<tr>
<td colspan="2" rowspan="3"></td><td><input type="checkbox" name="tabloid" id="tabloid" />Tabloid Example</td>
<td><input type="checkbox" name="broadsheet" id="broadsheet" />Broadsheet Example</td></tr>
<tr><td><input type="checkbox" name="colmt" id="colmt" />Column Sizes Tabloid</td>
<td><input type="checkbox" name="colmb" id="colmb" />Column Sizes Broadsheet</td></tr>
<tr><td><input type="checkbox" name="maps" id="maps" />Maps / Distribution</td><td colspan="2" align="right">External Attachments <input id="upload_file" name="upload_file" type="file"/> </td></tr>
<tr><td colspan="2"><span class="que">Message :</span></td><td colspan="3">
<textarea id="elm1" name="elm1" rows="15" cols="80" style="width: 100%">
<?php
echo "<br><br><br>" . $from_person . "<br>" . $from_mobile;
?>
</textarea>
</td></tr>
</table>
</form>
</body>
</html>
I've set up a mock registration form page so I can learn a bit about javascript's form validation. (newbie) I want to try to attempt to style the border of a form field green when the user enters the correct info into the form text field and red on all other fields if the user doesnt enter any info into them. When i test it, enter the right info into the username field, leave the others blank, and hit the submit button it styles the username field green ok but it doesnt make the next fields (password and so on) red. Could someone please explain what I am doing wrong? here is my code so far... Note: just for testing purposes I've put return false on everything so it displays a message when everythings ok. Code: ....
<script type="text/javascript">
window.onload = function() {
document.forms[0].username.focus();
}
function validate(form)
{
var form = document.getElementById("reg");
var e = document.getElementById("error");
e.style.background = "red";
for(var i = 0; i < form.elements.length; i++)
{
var el = form.elements[i];
if(el.type == "text" || el.type == "password")
{
if(el.value == "")
{
e.innerHTML = "Please fill in all fields!";
el.style.border = "1px solid red";
el.focus();
return false;
} else {
el.style.border = "1px solid green";
return false;
}
}
}
var un = form.username;
un.value = un.value.replace(/^\s+|\s+$/g,"");
if((un.value.length < 3)|| (/[^a-z0-9\_]/gi.test(un.value)))
{
e.innerHTML = "Only letters,numbers and the underscore are allowed (no spaces) - 3-16 characters";
un.focus();
return false;
}
var pw = form.password;
pw.value = pw.value.replace(/^\s+|\s+$/g,"");
if((pw.value.length < 3) || (/[^a-z0-9]/gi.test(pw.value)))
{
e.innerHTML = "Only letters and numbers are allowed (no spaces) - 3-16 characters";
pw.focus();
return false;
}
e.innerHTML = "You filled in all the fields, well done!";
e.style.background = "green";
return false;
}
</script>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>My Cool Website</h1>
</div>
<div id="content">
<div class="padding">
<h2>Registration</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p>
<form id="reg" action="#" method="post" onsubmit="return validate(this)">
<div id="error"></div>
<div><label for="username">Username</label></div>
<div><input type="text" name="username" id="username" size="30" maxlength="16" /></div>
<div><label for="password">Password</label></div>
<div><input type="password" name="password" id="password" size="30" maxlength="16" /></div>
<div><label for="c_password">Confirm Password</label></div>
<div><input type="password" name="c_password" id="c_password" size="30" maxlength="16" /></div>
<div><label for="email">Email address</label></div>
<div><input type="text" name="email" id="email" size="30" maxlength="200" /></div>
<div><label for="c_email">Confirm Email address</label></div>
<div><input type="text" name="c_email" id="c_email" size="30" maxlength="200" /></div>
<div><label for="firstname">First name</label></div>
<div><input type="text" name="firstname" id="firstname" size="30" maxlength="100" /></div>
<div><label for="surname">Surname</label></div>
<div><input type="text" name="surname" id="surname" size="30" maxlength="100" /></div>
<div><label for="gender">Gender</label></div>
<div>
<div><input type="radio" name="gender" id="gender" value="m" checked="checked" />Male</div>
<div><input type="radio" name="gender" value="f" />Female</div>
</div>
<div><input type="submit" value="Register" name="submit" /></div>
</form>
</div>
</div>
<div id="footer">
<p>Copyright © 2009 My Cool Website</p>
</div>
</div>
</body>
</html>
I have a order form page and on submitting it opens a new web page that displays the order totals. Below is my code and most probably wrong but for me it seems logic. Please assist. Order Form: Code: <td colspan="1" height="120" align="left"> <select style="margin-left: 60px; background-color: #00FF77;" name="prod_bed_359" onchange="calculateValue(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> </select> R359</td></tr> New page I called a unction to print: Code: function itemsOrdered() {
var beds = document.forms[2].prod_bed_359.value;
document.write("<pre><strong>Description\t\tQuantity\tPrice</strong></pre>");
document.write("<pre>Doggie Bed\t\t" + beds + "</pre>");
}
This is still basic as I need to get this right before adding the prices and totals which is also extracted from the order page. |
|||||||