Welcome to WebmasterWorld Guest from 54.197.199.191

Forum Moderators: open

JavaScript for calculation

calculation,select list

   
1:33 pm on Nov 24, 2011 (gmt 0)

5+ Year Member



Hello
I have a JavaScript code that calculates based on your dropdown(select list) selection.What i want is that the results should be capture in my input value field and not just print it out using the div tags.Can someone help me with this?
Here is my code

JavaScript Code
// JavaScript Document
var grade1_aggregrate= new Array();
grade1_aggregrate["None"]=0;
grade1_aggregrate["A"]=1;
grade1_aggregrate["B"]=2;
grade1_aggregrate["C"]=3;
grade1_aggregrate["D"]=4;
grade1_aggregrate["E"]=5;
grade1_aggregrate["F"]=6;

function getGrade1Aggregate()
{
var formGrade1Aggregate=0;
//Get a reference to the form id="aggregateform"
var theForm = document.forms["aggregateform"];
//Get a reference to the select id="grade1"
var selectedGrade1 = theForm.elements["grade1"];
//set formGrade1Aggregate Price equal to value user chose
//For example grade1_aggregrate["None".value] would be equal to 0
formGrade1Aggregate = grade1_aggregrate[selectedGrade1.value];
//finally we return cakeFillingPrice
return formGrade1Aggregate;
}

function calculateTotal()
{
var totalAggregate = getGrade1Aggregate();
//var totalAggregate = getGrade1Aggregate();
var divobj = document.getElementById('totalPrice');
divobj.style.display='block';
divobj.innerHTML ="Total Price For Cake $"+totalAggregate;
}


function hideTotal()
{
var divobj = document.getElementById('totalPrice');
divobj.style.display='none';
}

HTML CODE
<select name="grade1" id="grade1" onchange="calculateTotal()">
<option value="None"></option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
</select>
<td width="243" class="td">Overall Aggregate </td>
<input name="aggregrate" type="text" size="10" value="" id="aggregrate" /></td>
<div id="totalPrice"></div>
5:02 pm on Nov 24, 2011 (gmt 0)

5+ Year Member



I tried this but didn't work
document.getElementById('totalPrice').value= totalAggregate;

<div><input type="text" name="totalPrice" value="" id="totalPrice" /></div>
5:31 pm on Nov 25, 2011 (gmt 0)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member



That's because, if you left the div in, ID's are supposed to be UNIQUE and it likely encountered the div first. If you're running the FireFox Error Console (which you should) it will probably kick an error, a div has no value, and an input field - which does have a value - is not a container and has no innerHTML.

Do you not want it in the aggregate field? If so just do this.

//divobj.innerHTML ="Total Price For Cake $"+totalAggregate;
document.getElementById('aggregrate').value ="Total Price For Cake $"+totalAggregate;

Or, create new field that is not id'ed as "totalPrice".

EDIT: Lots of stuff here going sideways, try this.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled</title>
<script type="text/javascript">
// I have no idea why you need this but this is how you'd do it
// It still gives you 0...6 for their index
// grade1_aggregrate = ["None","A","B","C","D","E","F"];
//This is what I think you meant . . .
prices = {
'None':'0.00',
'A':'6.50',
'B':'8:25',
'C':'9.32',
'D':'9.79',
'E':'10.45',
'F':'11.57'
}
//
// Attact the action to the select, say no to inline JS
window.onload=function() {
document.getElementById('grade1').onchange=function() { calculateTotal(); };
};
//
function getGrade1Aggregate(){
var formGrade1Aggregate=0;
var sel = document.getElementById('grade1');
formGrade1Aggregate = sel.options[sel.selectedIndex].value;
return formGrade1Aggregate;
}
//
function calculateTotal() {
var totalAggregate = getGrade1Aggregate();
var fld = document.getElementById('MyTotal');
var divobj = document.getElementById('totalPrice');
if (fld) { fld.value = prices[totalAggregate]; }
else if (divobj) {
divobj.style.display='block';
divobj.innerHTML ="Total Price For Cake $"+prices[totalAggregate];
}
}
</script>
</head>
<body>
<p><select name="grade1" id="grade1">
<option value="None">Select</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
</select>
<label for="aggregate">Overall Aggregate</label>
<input name="aggregrate" type="text" size="10" value="" id="aggregrate"></p>
<p><label for="MyTotal">Total Price For Cake $</label>
<input type="text" name="MyTotal" id="MyTotal" value=""></p>
<div id="totalPrice"></div>
</body>
</html>


Note the doctype, don't know why everyone uses XHTML when they don't really mean it . . .

To revert to the current method of writing to the div, just comment out the field,

<!-- <p><label for="MyTotal">Total Price For Cake $</label>
<input type="text" name="MyTotal" id="MyTotal" value=""></p> -->

Or remove it.
 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month