|
JavaScript - Help To Calculate Sum Of Multiple Input And Show Total
Hi, please help. I've been trying to check what I did wrong in my code but still the total doesn't show. Below is my javascript function:
Code: function CalculateTotal(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r)
{
var tota= document.getElementById('a');
var totb= document.getElementById('b');
var totc= document.getElementById('c');
var totd= document.getElementById('d');
var tote= document.getElementById('e');
var totf= document.getElementById('f');
var totg= document.getElementById('g');
var toth= document.getElementById('h');
var toti= document.getElementById('i');
var totj= document.getElementById('j');
var totk= document.getElementById('k');
var totl= document.getElementById('l');
var totm= document.getElementById('m');
var totn= document.getElementById('n');
var toto= document.getElementById('o');
var totp= document.getElementById('p');
var totq= document.getElementById('q');
var totr= document.getElementById('r');
var grandTotal = tota + totb +totc + totd + tote + totf + totg + toth + toti +totj + totk + totl + totm + totn + toto + totp +totq + totr; document.getElementById('Total').value = grandTotal.toFixed(2);
}
Below is my textbox where there are more than 10 textboxes for user to enter donation amount. I'd like to calculate all the donation amount entered then show total in the bottom. Code:
<fieldset id="fieldset-in_registration">
<table>
<tr>
<td style="width:390px;text-align:left"><label for="a" style="font-weight:bold">A. Aloha United Way Community Care Fund </label></td>
<td style="float:right"> <input id="a" name="a" class="text" type="text" value="$<?php safeEcho($form['a'])?>" style="width:100px;" onChange="CalculateTotal()" />
<?php helper_error('a');?> </td>
</tr>
<tr>
<td style="width:390px;text-align:left"><label for="b">211 Information and Referral Services </label></td>
<td style="float:right"> <input id="b" name="b" class="text" type="text" value="$<?php safeEcho($form['b'])?>" style="width:100px;" onChange="CalculateTotal()" />
<?php helper_error('b');?> </td>
</tr>
<tr>
<td style="width:390px;text-align:left"><label for="c">Volunteer Hawaii/Gifts-in-Kind</label></td>
<td style="float:right"> <input id="c" name="c" class="text" type="text" value="$<?php safeEcho($form['c'])?>" style="width:100px;" onChange="CalculateTotal()"/>
<?php helper_error('c');?> </td>
</tr>
</table>
</fieldset>
<fieldset id="fieldset-in_registration">
<label for="impact" style="font-weight:bold">B. Impact Areas</label>
<table>
<tr>
<td style="width:390px;text-align:left"><label for="d">Crime and Drug Use</label></td>
<td style="float:right"> <input id="d" name="d" class="text" type="text" value="$<?php safeEcho($form['d'])?>" style="width:100px;" onChange="CalculateTotal()"/>
<?php helper_error('d');?> </td>
</tr>
<tr>
<td style="width:390px;text-align:left"><label for="e">Early Childhood Development</label></td>
<td style="float:right"> <input id="e" name="e" class="text" type="text" value="$<?php safeEcho($form['e'])?>" style="width:100px;" onChange="CalculateTotal()" />
<?php helper_error('e');?> </td>
</tr>
<tr>
<td style="width:390px;text-align:left"><label for="f">Emergency and Crisis Services</label></td>
<td style="float:right"> <input id="f" name="f" class="text" type="text" value="$<?php safeEcho($form['f'])?>" style="width:100px;" onChange="CalculateTotal()" />
<?php helper_error('f');?> </td>
</tr>
<tr>
<td style="width:390px;text-align:left"><label for="g" >Financial Stability and Independence</label></td>
<td style="float:right"> <input id="g" name="g" class="text" type="text" value="$<?php safeEcho($form['g'])?>" style="width:100px;" onChange="CalculateTotal()"/>
<?php helper_error('g');?> </td>
</tr>
<tr>
<td style="width:390px;text-align:left"><label for="h" >Homelessness</label></td>
<td style="float:right"> <input id="h" name="h" class="text" type="text" value="$<?php safeEcho($form['h'])?>" style="width:100px;" onChange="CalculateTotal()"/>
<?php helper_error('h');?> </td>
</tr>
</table>
</fieldset>
<fieldset id="fieldset-in_registration">
<p>D. <b>Agency/Program Support ($48 MINIMUM PER CHOICE)</b></p>
<p>My gift is designated to one or more specific agencies or programs. Processing fee may apply.
<p style="color:#FF0000">(Note: Agency Name is intentionally shorten/cut-off and indented to the next line to fit in the page. Choose either one of the indented line will give the same code.)</p>
<div class="formfield">
<table>
<tr>
<td>
<select id="designation_list1" name="designation_list1" size="1" style="overflow-x:scroll; width:390px; ">
<?php foreach ($designation_list as $descode => $prompt) : ?>
<option value="<?php echo $descode; ?>" ><?php safeEcho($descode); ?>
</option>
<?php endforeach; ?>
</select>
</td>
<td>
<input id="i" name="i" class="text" type="text" value="$<?php safeEcho($form['i'])?>" style="width:100px;" onChange="CalculateTotal()""/>
</td>
</tr>
<tr>
<td>
<select id="designation_list2" name="designation_list2" size="1" style="overflow-x:scroll; width:390px; ">
<?php foreach ($designation_list as $descode => $prompt) : ?>
<option value="<?php echo $descode; ?>" ><?php safeEcho($descode); ?>
</option>
<?php endforeach; ?>
</select>
</td>
<td>
<input id="j" name="j" class="text" type="text" value="$<?php safeEcho($form['j'])?>" style="width:100px;" onChange="CalculateTotal();"/>
</td>
</tr>
<tr>
<td>
<select id="designation_list3" name="designation_list3" size="1" style="overflow-x:scroll; width:390px; ">
<?php foreach ($designation_list as $descode => $prompt) : ?>
<option value="<?php echo $descode; ?>" ><?php safeEcho($descode); ?>
</option>
<?php endforeach; ?>
</select>
</td>
<td>
<input id="k" name="k" class="text" type="text" value="$<?php safeEcho($form['k'])?>" style="width:100px;" onChange="CalculateTotal()"/>
</td>
</tr>
<tr>
<td>
<select id="designation_list4" name="designation_list4" size="1" style="overflow-x:scroll; width:390px; ">
<?php foreach ($designation_list as $descode => $prompt) : ?>
<option value="<?php echo $descode; ?>" ><?php safeEcho($descode); ?>
</option>
<?php endforeach; ?>
</select>
</td>
<td>
<input id="l" name="l" class="text" type="text" value="$<?php safeEcho ($form['l'])?>" style="width:100px;" onChange="CalculateTotal()"/>
</td>
</tr>
<tr>
<td>
<select id="designation_list5" name="designation_list5" size="1" style="overflow-x:scroll; width:390px; ">
<?php foreach ($designation_list as $descode => $prompt) : ?>
<option value="<?php echo $descode; ?>" ><?php safeEcho($descode); ?>
</option>
<?php endforeach; ?>
</select>
</td>
<td>
<input id="m" name="m" class="text" type="text" value="$<?php safeEcho($form['m'])?>" style="width:100px;" onChange="CalculateTotal();"/>
</td>
</tr>
<tr>
<td>
<select id="designation_list6" name="designation_list6" size="1" style="overflow-x:scroll; width:390px; ">
<?php foreach ($designation_list as $descode => $prompt) : ?>
<option value="<?php echo $descode; ?>" ><?php safeEcho($descode); ?>
</option>
<?php endforeach; ?>
</select>
</td>
<td>
<input id="n" name="n" class="text" type="text" value="$<?php safeEcho($form['n'])?>" style="width:100px;" onChange="CalculateTotal()"/>
</td>
</tr>
<tr>
<td>
<select id="designation_list7" name="designation_list7" size="1" style="overflow-x:scroll; width:390px; ">
<?php foreach ($designation_list as $descode => $prompt) : ?>
<option value="<?php echo $descode; ?>" ><?php safeEcho($descode); ?>
</option>
<?php endforeach; ?>
</select>
</td>
<td>
<input id="o" name="o" class="text" type="text" value="$<?php safeEcho($form['o'])?>" style="width:100px;" onChange="CalculateTotal()"/>
</td>
</tr>
<tr>
<td>
<select id="designation_list8" name="designation_list8" size="1" style="overflow-x:scroll; width:390px; ">
<?php foreach ($designation_list as $descode => $prompt) : ?>
<option value="<?php echo $descode; ?>" ><?php safeEcho($descode); ?>
</option>
<?php endforeach; ?>
</select>
</td>
<td>
<input id="p" name="p" class="text" type="text" value="$<?php safeEcho($form['p'])?>" style="width:100px;" onChange="CalculateTotal()"/>
</td>
</tr>
<tr>
<td>
<select id="designation_list9" name="designation_list9" size="1" style="overflow-x:scroll; width:390px; ">
<?php foreach ($designation_list as $descode => $prompt) : ?>
<option value="<?php echo $descode; ?>" ><?php safeEcho($descode); ?>
</option>
<?php endforeach; ?>
</select>
</td>
<td>
<input id="q" name="q" class="text" type="text" value="$<?php safeEcho($form['q'])?>" style="width:100px;" onChange="CalculateTotal()"/>
</td>
</tr>
<tr>
<td>
<select id="designation_list10" name="designation_list10" size="1" style="overflow-x:scroll; width:390px; ">
<?php foreach ($designation_list as $descode => $prompt) : ?>
<option value="<?php echo $descode; ?>" ><?php safeEcho($descode); ?>
</option>
<?php endforeach; ?>
</select>
</td>
<td>
<input id="r" name="r" class="text" type="text" value="$<?php safeEcho($form['r'])?>" style="width:100px;" onChange="CalculateTotal()"/>
</td>
</tr>
<tr>
<td style="text-align:right;"><b>TOTAL GIFT(S) DESIGNATED (A-D)</b><BR /> (Must not exceed donation amount)</td>
<td><input name="Total" id="Total" type="text" maxlength="10" readonly="true" onChange="CalculateTotal(this.value)" /></td>
</tr>
</table>
Please help. I tried for how many days using the javascript calculations and still didn't work. I have a form with the same calculations and it does work but this one doesn't. Please help. Thanks a lot. Hope to hear from you soon. Similar TutorialsI have a small price quote calculator/contact information form. I want the customer to fill out the whole form submit it, and get his/her estimated price based on selections in the form. I am using asp, and I have a javascript for the quote calculations. My question is how would I take this js and execute it when the user hits submit, and then display that quote price on the next page. Here is the javascript that I'm working with: Code: var practice_field = new Array();
practice_field["None"]=0;
practice_field["Allergy and Immunology"]=4400;
practice_field["Endocrinology"]=4400;
practice_field["Pathology"]=4400;
practice_field["Dermatology"]=4400;
practice_field["Geriatrics"]=4400;
practice_field["Physical Rehabilitation"]=4400;
practice_field["Family Practice"]=6900;
practice_field["General Practice"]=6900;
practice_field["Internal Medicine"]=6900;
practice_field["Oncology"]=6900;
practice_field["Oral Surgery"]=6900;
practice_field["Radiology"]=6900;
practice_field["Gastroenterology"]=6900;
practice_field["Infectious Disease"]=6900;
practice_field["Nephrology"]=6900;
practice_field["Ophthalmology"]=6900;
practice_field["Pediatrics"]=6900;
practice_field["Urology"]=6900;
practice_field["Anesthesiology"]=9000;
practice_field["Cosmetic Surgery"]=9000;
practice_field["General Surgery"]=9000;
practice_field["Neurology"]=9000;
practice_field["Otolaryngology"]=9000;
practice_field["Plastic Surgery"]=9000;
practice_field["Vascular Surgery"]=9000;
practice_field["Cardiology"]=9000;
practice_field["Emergency Medicine"]=9000;
practice_field["Gynecology"]=9000;
practice_field["Orthopedic Surgery"]=9000;
practice_field["Pain Management"]=9000;
practice_field["Pulmonary Surgery"]=9000;
practice_field["Neurological Surgery"]=9900;
practice_field["Obstetrics"]=9900;
var society_member= new Array();
society_member["None"]=null;
society_member["BCMA"]=0.10;
society_member["DCMA"]=0.10;
society_member["FOGS"]=0.10;
society_member["FNS"]=0.10;
society_member["PBCMS"]=0.10;
society_member["FSPS"]=0.10;
function getPracticeField()
{
var docPracticeField=0;
var theForm = document.forms["quoteform"];
var selectedPracticeField = theForm.elements["practice"];
docPracticeField = practice_field[selectedPracticeField.value];
return docPracticeField;
}
function getSelectedSociety()
{
var docSelectedSociety=0;
var theForm = document.forms["quoteform"];
var selectedSociety = theForm.elements["society"];
docSelectedSociety = society_member[selectedSociety.value];
return docSelectedSociety;
}
function bareDefensePrice()
{
var defensePrice=0;
var theForm = document.forms["quoteform"];
var includeDefense = theForm.elements["baredefense"];
if(includeDefense.checked==true)
{
defensePrice=0;
}
return defensePrice;
}
function insuranceDefensePrice()
{
var insuranceDefense=0;
var theForm = document.forms["quoteform"];
var includeMoreDefense = theForm.elements["insureddefense"];
if(includeMoreDefense.checked==true){
insuranceDefense=0;
}
return insuranceDefense;
}
function calculateTotal()
{
var defensePrice = getPracticeField() + null - (getPracticeField() * getSelectedSociety()) + bareDefensePrice() + insuranceDefensePrice();
var divobj = document.getElementById('totalPrice');
divobj.style.display='block';
divobj.innerHTML = "Your Pre-Paid Legal Defense Fee Will Be Around $"+defensePrice;
}
function hideTotal()
{
var divobj = document.getElementById('totalPrice');
divobj.style.display='none';
}
here is the html: Code: <body onload='hideTotal()'>
<div id="wrap">
<form action="" id="quoteform" onsubmit="">
<div>
<div class="cont_order">
<fieldset>
<legend>How Much Will My Pre-Paid Legal Defense Cost?</legend>
<label >Choose Your Practice Field</label>
<select id="practice" name='practice' onchange="calculateTotal()">
<option value="None">Select Field</option>
<option value="Allergy and Immunology">Allergy and Immunology</option>
<option value="Endocrinology">Endocrinology</option>
<option value="Pathology">Pathology</option>
<option value="Dermatology">Dermatology</option>
<option value="Geriatrics">Geriatrics</option>
<option value="Physical Rehabilitation">Physical Rehabilitation</option>
<option value="Family Practice">Family Practice</option>
<option value="General Practice">General Practice</option>
<option value="Internal Medicine">Internal Medicine</option>
<option value="Oncology">Oncology</option>
<option value="Oral Surgery">Oral Surgery</option>
<option value="Radiology">Radiology</option>
<option value="Gastroenterology">Gastroenterology</option>
<option value="Infectious Disease">Infectious Disease</option>
<option value="Nephrology">Nephrology</option>
<option value="Ophthalmology">Ophthalmology</option>
<option value="Pediatrics">Pediatrics</option>
<option value="Urology">Urology</option>
<option value="Anesthesiology">Anesthesiology</option>
<option value="Cosmetic Surgery">Cosmetic Surgery</option>
<option value="General Surgery">General Surgery</option>
<option value="Neurology">Neurology</option>
<option value="Otolaryngology">Otolaryngology</option>
<option value="Plastic Surgery">Plastic Surgery</option>
<option value="Vascular Surgery">Vascular Surgery</option>
<option value="Cardiology">Cardiology</option>
<option value="Emergency Medicine">Emergency Medicine</option>
<option value="Gynecology">Gynecology</option>
<option value="Orthopedic Surgery">Orthopedic Surgery</option>
<option value="Pain Management">Pain Management</option>
<option value="Pulmonary Surgery">Pulmonary Surgery</option>
<option value="Neurological Surgery">Neurological Surgery</option>
<option value="Obstetrics">Obstetrics</option>
</select>
<br/>
<p>
<label >Are You Affiliated With Any of the Following Medical Societies</label>
<select id="society" name='society' onchange="calculateTotal()">
<option value="None">Select Society</option>
<option value="None">No, I am not</option>
<option value="BCMA">Broward County Medical Association</option>
<option value="DCMA">Dade County Medical Association</option>
<option value="FOGS">Florida Obstetrics & Gynecology Society</option>
<option value="FNS">Florida Neurological Society</option>
<option value="PBCMS">Palm Beach County Medical Society</option>
<option value="FSPS">Florida Society of Plastic Surgeons</option>
</select>
</p>
<br/>
<label >What Type of Defense Are You Interested In?</label>
<br />
<label for='baredefense' class="inlinelabel">Bare Defense</label>
<input type="checkbox" id="baredefense" name='baredefense' onclick="calculateTotal()" />
<br />
<label class="inlinelabel" for='insureddefense'>Insured Defense</label>
<input type="checkbox" id="insureddefense" name="insureddefense" onclick="calculateTotal()" />
</p>
<div id="totalPrice"></div>
</fieldset>
</div>
<div class="cont_details">
<fieldset>
<legend>Contact Details</legend>
<label for='name'>Name</label>
<input type="text" id="name" name='name' />
<br/>
<label for='address'>Address</label>
<input type="text" id="address" name='address' />
<br/>
<label for='phonenumber'>Phone Number</label>
<input type="text" id="phonenumber" name='phonenumber'/>
<br/>
</fieldset>
</div>
<input type='submit' id='submit' value='Calculate Rate' onclick="calculateTotal()" />
</div>
</form>
</div><!--End of wrap-->
Good day! I am new in javascript function. I have Javascript code for auto calculate here is the code: Code: <script type="text/javascript" language="javascript">
function autocalearn(oText)
{
if (isNaN(oText.value)) //filter input
{
alert('Numbers only!');
oText.value = '';
}
var field, val, oForm = oText.form, TotEarn = a = 0;
for (a; a < arguments.length; ++a) //loop through text elements
{
field = arguments[a];
val = parseFloat(field.value); //get value
if (!isNaN(val)) //number?
{
TotEarn += val; //accumulate
}
}
var tot=Number(TotEarn) + Number(document.getElementById('Amount').value);
oForm.TotEarn.value = tot.toFixed(2);
//oForm.TotEarn.value = TotEarn.toFixed(2); //out
}
</script>
<!--Total Deduction AutoCompute-->
<script type="text/javascript" language="javascript">
function autocalded(oText)
{
if (isNaN(oText.value)) //filter input
{
alert('Numbers only!');
oText.value = '';
}
var field, val, oForm = oText.form, TotalDed = a = 0;
for (a; a < arguments.length; ++a) //loop through text elements
{
field = arguments[a];
val = parseFloat(field.value); //get value
if (!isNaN(val)) //number?
{
TotalDed += val; //accumulate
}
}
//oForm.TotalDed.value = TotalDed.toFixed(2); //out
var totded=Number(TotalDed) + Number(document.getElementById('Deductions').value);
oForm.TotalDed.value = totded.toFixed(2);
}
</script>
and now my problem is...I have a textbox for the overall total, and i want it automatic subtract the total earn and total deduction.. I will attach my codes for further understanding. Thank you in advance I have created a function but it only half works. I can get the number of contributers to add up but not the total amount of dollars they contributed. I am not sure if my function is wrong or if I am just confused with what variable to output for the dollar amount total. Please assist. My Function: <script type="text/javascript"> function amountTotal() { total = 0; for (var i=0; i<=amount.length; i++) { total+=amount[i]; } return total; } </script> My output files: <div id=totals> <script type="text/javascript"> document.write("<table border=1' cellspacing=1'>"); document.write("<tr><th id=sumTitle colspan=2'>Summary</th></tr>"); document.write("<tr><th>Contributors</th>"); document.write("<td>"+[i]+"</td>"); document.write("</tr>"); document.write("<tr><th>Amount</th>"); document.write("<td>$ +[total]+</td></tr>"); document.write("</table>"); </script> Hi, I am thinking of how to write the code for this: There are 4 textboxes, 3 of which allow you to enter any number (e.g. 1000, 2500, 12345, 100.10, etc.). So whenever I entered a number in one of them (or two or all of them), the 4th read-only textbox will automatically shows the total of the values in the 3 textboxes. So...can anyone give me any references to this? Thanks. Need help please asap. It might be simple but i couldn't work out the script. help! ---------------- Formfield.anzahl1 = number entered by customer Formfield.Price1 = Ergebnisfeld1 e.g. Anzahl1= 1 Price = 270 *if Anzahl1 = 2 then Price = 270*2 I need to do this for two form option. 2nd field would be as follows Formfield.Anzahl2= number entered by customer Formfield.Price2 = Ergebnisfeld2 Then Formfield.Total = Ergebnisfeld1 + Ergebnisfeld2 ------------------- How can I convert these above to javascript? Hi, I'm trying to add the total number of costs depending on the rows added to return the subtotal then later add the service charge which gives the total grand amount. I also need to add the item number when a new row is added. Can any1 help? Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>untitled</title>
<script type="text/javascript">
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
//alert(newcell.childNodes);
switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
break;
case "checkbox":
newcell.childNodes[0].checked = false;
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
break;
}
}
}
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
if(rowCount <= 1) {
alert("Cannot delete all the rows.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
}
</script>
</head>
<body >
<form action="#" id="calcForm" method="post">
<table border="0" width="680" cellpadding="0" cellspacing="0">
<tr>
<td width="60" align="left" valign="top"><b>Item No</b></td>
<td width="3"> </td>
<td width="290" align="left" valign="top"><b>Description</b></td>
<td width="3"> </td>
<td width="210" align="left" valign="top"><b>Part No.</b></td>
<td width="3"> </td>
<td width="50" align="left" valign="top"><b>QTY</b></td>
<td width="3"> </td>
<td width="63" align="left" valign="top"><b>Cost</b></td>
</tr>
</table>
<table id="parts" border="0" width="680" cellpadding="0" cellspacing="0">
<tr>
<td width="60" align="left" valign="top"><INPUT type="checkbox" name="chk"/> <b>1</b></td>
<td width="3"> </td>
<td width="290" align="left" valign="top">
<input type="text" name="partdesc[]" size="40" value="<?=$info['partdesc'][$x]?>">
</td>
<td width="3"> </td>
<td width="210" align="left" valign="top">
<input type="text" name="partno[]" size="30" value="<?=$info['partno'][$x]?>">
</td>
<td width="3"> </td>
<td width="50" align="left" valign="top">
<input type="text" name="qty[]" size="2" value="<?=$info['qty'][$x]?>">
</td>
<td width="3"> </td>
<td width="63" align="left" valign="top">
<input type="text" name="cost[]" size="4" value="<?=$info['cost'][$x]?>">
</td>
</tr>
</table>
<table id="parts" border="0" width="680" cellpadding="0" cellspacing="0">
<tr>
<td width="60" align="left" valign="top"> </td>
<td width="3"> </td>
<td width="290" align="left" valign="top"> </td>
<td width="3"> </td>
<td width="210" align="left" valign="top"><b>Sub Total</b></td>
<td width="3"> </td>
<td width="50" align="left" valign="top"> </td>
<td width="3"> </td>
<td width="63" align="left" valign="top">
<input type="text" name="subtotal" size="4" value="<?=$info['subtotal']?>">
</td>
</tr>
<tr>
<td width="60" align="left" valign="top"> </td>
<td width="3"> </td>
<td width="290" align="left" valign="top"><INPUT type="button" value="Add Row" onclick="addRow('parts')" /><INPUT type="button" value="Delete Row" onclick="deleteRow('parts')" /></td>
<td width="3"> </td>
<td width="210" align="left" valign="top"><b>Service Charge</b></td>
<td width="3"> </td>
<td width="50" align="left" valign="top"> </td>
<td width="3"> </td>
<td width="63" align="left" valign="top">
<input type="text" name="charge" size="4" value="<?=$info['charge']?>">
</td>
</tr>
<tr>
<td width="60" align="left" valign="top"> </td>
<td width="3"> </td>
<td width="290" align="left" valign="top"> </td>
<td width="3"> </td>
<td width="210" align="left" valign="top"><b>Grand Total</b></td>
<td width="3"> </td>
<td width="50" align="left" valign="top"> </td>
<td width="3"> </td>
<td width="63" align="left" valign="top">
<input type="text" name="gtotal" size="4" value="<?=$info['gtotal']?>">
</td>
</tr>
</table>
</form>
</body>
</html>
I have 9 select menus that are populated by a php for loop. Each has a numeric value that is displayed base on the selection (which I have working). I can not figure out how to sum all of these values and display them in a <div> tag. Any help will be greatly appreciated. what I have thus far: PHP Code: // Part of a function that creates drop down boxes <select name="$name" onchange="document.getElementById('cost_$name').firstChild.nodeValue = this.options[this.selectedIndex].getAttribute('cost_$name')"> // option is generated in a for loop $i is a number and $cost is a different number <option value="$i" cost_$name="$cost">$i</option> // <div> tag for output of cost_$name where cost_$name is output <div align="center" id="cost_$name">0</div> /* the above is working fine.. it will display the correct output when an option is selected from the drop downs */ //At the bottom of the table I want to total the values of the cost_$name 's // So far I came up with this to do the addition, what I don't know is how to // get the values into the // getValues() function and output them in a <div> tag. <script language="javascript"> function getValues(){ var numVal1=parseInt(document.getElementById("cost_body").value); var numVal2=parseInt(document.getElementById("cost_agility").value); var numVal3=parseInt(document.getElementById("cost_reaction").value); var numVal4=parseInt(document.getElementById("cost_strength").value); var numVal5=parseInt(document.getElementById("cost_charisma").value); var numVal6=parseInt(document.getElementById("cost_intuition").value); var numVal7=parseInt(document.getElementById("cost_logic").value); var numVal8=parseInt(document.getElementById("cost_willpower").value); var numVal9=parseInt(document.getElementById("cost_edge").value); var totalValue = numVal1 + numVal2 + numVal3 + numVal4 + numVal5 + numVal6 + numVal7 + numVal8 + numVal9; document.getElementById("cost_total").value = totalValue; } </script> Hello, I have this code: PHP Code: <script> function checkForOther(obj) { if (!document.layers) { var txt = document.getElementById("otherTitle"); if (obj.value == "new") { txt.style.display = "inline"; // gives the text field the name of the drop-down, for easy processing txt.name = "selTitle"; obj.name = ""; } else { txt.style.display = "none"; txt.name = ""; obj.name = "selTitle"; } } } </script> it's should hide/show input field accourding the user choice - if he choose "<option value='new'>new</option>", the follow action should happend: PHP Code: <li id='otherTitle'> <label for='new'>new artist</label> <input type='text' name='new_artist_name' /> </li> The script works, but when I click "submit" the parameter that the "select box" should send don't get send... here is the full code: PHP Code: <li> <label for='artist'>Artists</label> <select name='artist_id' onchange="checkForOther(this)\"> <option value='new'>new artist</option>"; $query = mysql_query("SELECT id, name FROM `chords_artists` ORDER BY `name` "); while($index = mysql_fetch_array($query)) { $artist_id = $index['id']; $artist = $index['name']; echo "<option value='$artist_id'>$artist</option>"; } echo " </select> </li> <li id='otherTitle'> <label for='new'>new artist:</label> <input type='text' name='new_artist_name' /> </li> Can you please help me with it? As you can see the above warning will be only shown when there is an error while inserting the data into the login form. Now I have tried to achieve it by: Hiding the div say "warning". Use a javascript while submitting the form to check for input validation. If found any error, the hidden div "warning" will show above the form as shown as in the image. I have tried it in Edit fiddle - JSFiddle Ples help This code works to show divide with id "it" when select option "it" is chosen and it shows divide "de" when option "de" is chosen. Problem: it will not show the nested divides inside the "it" and "de" divides. It only shows the <p></p> tags. Does someone know how I can get it to show the divides inside the main divide as well? Thanks in advance for your help. Head Code: function showstuff(divID)
{
els = document.getElementById( 'mydiv' ).getElementsByTagName( 'div' );
for (var i = 0; i < els.length; i++)
{
els[i].style.visibility="hidden";
els[i].style.display="none";
}
if( divID )
{
document.getElementById(divID).style.visibility="visible";
document.getElementById(divID).style.display="block";
}
if( window.event )
window.event.returnValue = false;
return false;
}
window.onload=function()
{
showstuff('');
}
Body Code: <select size="1" hide_label="0" id="experience" class=" validate['required']" title="" type="select" name="experience" onchange="showstuff(this.value) ;"> <option value="">(Please select)</option> <option value="it">IT</option> <option value="de">Design Engineer</option> <option value="both">BOTH</option> </select> <div id="mydiv"> <div id="it"> <p>why dont you show anything else!</p> <div class="ccms_form_element cfdiv_header" id="_h3_it_disciplines_check_all_that_apply_h3___container_div"><h3>IT Disciplines (Check all that apply)</h3><div class="clear"></div></div> </div> <div id="de"> <p>why dont you show anything else! UGH!!</p> <div class="ccms_form_element cfdiv_header" id="_h3_design_engineer_disciplines_check_all_that_apply_h3___container_div"><h3>Design Engineer Disciplines (Check all that apply)</h3><div class="clear"></div></div> <p>why dont you show anything else!</p> </div> </div> I've not really an idea how to do this. I know how to do it in PHP, but I need it dynamic <input type="checkbox" name="facebook" value="1" /> if($_POST['facebook'] == 1) echo "<input type='text' name='facebook_url' />"; Could someone tell me how I should do this. Thanks. Hi Guys i am a complete novice at ajax or javascript. I have been studying php for a while now and i know that, i am now starting php oop and that going well but i have never done anything like this. Anway i am creating a booking system which at the end of the process asks who supplied your voucher which they then select a supplier. The issue i have is my client wants it so if groupon is selected then an input text box should appear so that the user can input a security code from groupon. So basically it is Code: <select name="supplier" id="supplier"> <option value="">please select supplier</option> <option value="Groupon">Groupon</option> <option value="KGB Deals">KGB Deals</option> <option value="Other">Other</option> </select> So if value="Groupon" then Code: <input type="text" name="security" id="security" /> should appear next to it. Could someone please help me as the page cant refresh as it will lose its data which would have taken the user about 10 minutes to fill out Thanks in advance So I am trying to make a form that will eventually take the user to a specified link. It is a form that uses drop down menus. I based this off of someone elses code (with permission ), but it shows everything <= user input. I cannot for the life of me figure out how to make it only show only one of the next options. here is the JS code: Code: <script language="JavaScript">
function ShowMenu(num, menu, max)
{
for(i = 1999; i <= num; i++){
var menu2 = menu + i;
document.getElementById(menu2).style.display = 'block';
}
var num2 = num;
num2++;
while(num2 = max){
var menu3 = menu + num2;
document.getElementById(menu3).style.display = 'none';
num2=num2+1;
}
}
</script>
This is only the JS code. I didn't want to waste space with the rest of the code. If you want to see it let me know and I can include that. I am sure this is rather basic, but my JS knowledge is less than that...It has been some time since undergrad computer science class. Thanks in advance for any help! Hi ya all, how can I show / hide the content of sub divs based on whether the input is != or = and be able to repeat this. I tried to hide the sub divs using , onclick if bla bla = '' ; Code: document.getElementById('hideme').innerHTML = '';
which works, but once I try to enter a new input, then nothing happens, even if the content of the sub divs is = input thx Let me start by saying I'm a noob to JavaScript. What I'm trying to do for my website is have a select menu that shows the number of div's that's selected. I found a JS that I could do that with, but it only toggles, not change specifically what's selected. So if you click the wrong one, it doesn't work right. Here's what I got: Code: <body>
<script type="text/javascript">
function toggle_visibility(){
for(var i = 0,len = arguments.length;i < len; i++){
var e = document.getElementById(arguments[i]).style,d = e.display;
e.display = (d == "block") ? "none" : "block";
}
}
</script>
<select name="select" id="select">
<option>0</option>
<option onclick="toggle_visibility('1');" >1</option>
<option onclick="toggle_visibility('1','2');">2</option>
<option onclick="toggle_visibility('1','2','3');">3</option>
<option onclick="toggle_visibility('1','2','3','4');">4</option>
</select><br>
<div id="1" style="display: none;">Test1</div>
<div id="2" style="display: none;">Test2</div>
<div id="3" style="display: none;">Test3</div>
<div id="4" style="display: none;">Test4</div>
</body>
Any help would be appreciated, cause I'm lost. Hello, I'm working on a top menu consisting of MENU A, MENU B and MENU C each with it's own drop down submenu on a separate layer. I'm using ShowContent and HideContent to display the submenus onmouseover. So on mouseover it shows "LayerA" and hides "LayerB" and "LayerC." The problem I'm having is that it will only hide one of the layers. Which ever one is listed first. I'm sure the problem lies in HideContent('LayerB','LayerC') but I don't know how to resolve it. Any help would be much appreciated. Here is the script I'm using: <script type="text/javascript" language="JavaScript"><!-- function HideContent(d) { if(d.length < 1) { return; } document.getElementById(d).style.display = "none"; } function ShowContent(d) { if(d.length < 1) { return; } document.getElementById(d).style.display = "block"; } function ReverseContentDisplay(d) { if(d.length < 1) { return; } if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; } else { document.getElementById(d).style.display = "none"; } } //--></script> And here is my menu: <td><a href="XXXX" onmouseover="ShowContent('LayerA'); HideContent('LayerB','LayerC')">MENU A</a> </td> <td><a href="XXXX" onmouseover="ShowContent('LayerB'); HideContent('LayerA','LayerC')">MENU B</a> </td> <td><a href="XXXX" onmouseover="ShowContent('LayerC'); HideContent('LayerA','LayerB')">MENU C</a> </td> Hi I am trying when a user chooses an airline from dropdown seen here that two additional drop downs appear for departing airport and arrival airport. I have coded it to work when one chooses American Airlines from drop down, but I need different departing and arrival airports to appear for the various a user may choose. Anyone know how that can be done? thanks I set up my javascript so that it shows a hidden div box from an array when i click on a link. To show only one hidden box, the code is <a href="javascript:showOnlyThis('divIDgoeshere')"> how do i show multiple hidden div boxes with one link? Thanks! |
|||||||