homepage Welcome to WebmasterWorld Guest from 54.196.198.213
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe and Support WebmasterWorld
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
JavaScript for calculation
calculation,select list
JuicyScript




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

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>

 

JuicyScript




msg:4390739
 5:02 pm on Nov 24, 2011 (gmt 0)

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

<div><input type="text" name="totalPrice" value="" id="totalPrice" /></div>

rocknbil




msg:4391055
 5:31 pm on Nov 25, 2011 (gmt 0)

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved