...

View Full Version : excel-tricks with javascript



Drieske1982
03-10-2004, 05:48 PM
Hi,
At http://www.aendekerk.be/formulier.html i have a script that calculates the amount of Watt that is needed for an airconditioner.

I want to enhance this form.
4 formfields ("b1x1_totaal", "b1x2_totaal", "b1x3_totaal", "b1x4_totaal") have a certain value (depending on user-input).
Now i wish that all these values are reset to zero except for the formfield that contains the highest value.

How do i do that?

Thanks!

sad69
03-10-2004, 07:32 PM
Well you'd first have to check among those fields which has the highest value. Then you'd zero out all the fields except the highest one.

For example, something like this:


var highestValue = b1x1_totaal.value;
var highestNode = b1x1_totaal;

for(var i = 2; i <= 4; i++) {
if(window['b1x'+i+'_totaal'].value > highestValue) {
highestValue = window['b1x'+i+'_totaal'].value;
highestNode = window['b1x'+i+'_totaal'];
}
}

for(var i = 1; i <= 4; i++) {
if(window['b1x'+i+'_totaal'] == highestNode) {
continue;
}
else {
window['b1x'+i+'_totaal'].value = "";
}
}


I haven't tested this but the logic should be correct regardless.

BTW: I got the window[..] from a recent thread:
http://www.codingforums.com/showthread.php?s=&threadid=34829

Hope that helps,
Sadiq.

Drieske1982
03-10-2004, 10:15 PM
Hi,
Thanks for helping me out! The code makes a lot of sense to me!

I have 2 questions:
* how do i implement this in my existing form? Because this script should be executed everytime a user fils in a formfield.
* How do i zero out all the fields except the highest one?

sad69
03-10-2004, 11:43 PM
* how do i implement this in my existing form? Because this script should be executed everytime a user fils in a formfield.

encapsulate my posted code in a function, call it calcHighest() or whatever. Then on each form field, add the attribute:


<input ... onChange="calcHighest()"/>

And that, if I understood you correctly, should do it.



* How do i zero out all the fields except the highest one?

I think it is zeroing out the "fields". Well it is currently setting them to nothing. You can set them to 0 (zero) if that's what you like:
replace


window['b1x'+i+'_totaal'].value = "";

with


window['b1x'+i+'_totaal'].value = "0";


And when I say the "fields", I mean b1x1_totaal, b1x2_totaal, b1x3_totaal, b1x4_totaal. I'm not referring to all the fields on your page. But it's a similar idea, just put all the different fields down so that their .value = "0".

Hope that helps,
Sadiq.

glenngv
03-11-2004, 02:24 AM
Originally posted by sad69
BTW: I got the window[..] from a recent thread:
http://www.codingforums.com/showthread.php?s=&threadid=34829


Take note that b1x1_totaal, b1x2_totaal, ... are field names not variables. Although using window[...] will work in IE because IE automatically makes all field names as global variables.

For cross-browser compatibility, you should refer to the form fields with such type of names as:

document.forms['formNameHere'].elements['fieldNameHere']

To apply in your code:


var f = document.forms['formNameHere'];
for(var i = 2; i <= 4; i++) {
if(f.elements['b1x'+i+'_totaal'].value > highestValue) {
highestValue = f.elements['b1x'+i+'_totaal'].value;
highestNode = f.elements['b1x'+i+'_totaal'];
}
}


P.S. The highest number check logic can be improved by putting the field values in an array and sorting it.

Drieske1982
03-11-2004, 06:50 AM
Originally posted by sad69
[B]encapsulate my posted code in a function, call it calcHighest() or whatever. Then on each form field, add the attribute:
<input ... onChange="calcHighest()"/>And that, if I understood you correctly, should do it.

In my script, i already have a function ("bereken") that executes onkeyup. So i tried to combine them. This is how it works:
The function will be loaded when the page is loaded:
<body onLoad="bereken()">
...
</body>And then you have in the script:

var producten = [
'totaal', [

[
'b1x1_x1', 344,
'b1x1_x2', 269,
'b1x1_x3', 235,
'b1x1_x4', 175,
'b1x1_x5', 156,
'b1x1_x6', 98
], 'b1x1_totaal',

[
'b1x2_x1', 291,
'b1x2_x2', 230,
'b1x2_x3', 198,
'b1x2_x4', 148,
'b1x2_x5', 140,
'b1x2_x6', 78
], 'b1x2_totaal',

[
'b1x3_x1', 208,
'b1x3_x2', 160,
'b1x3_x3', 148,
'b1x3_x4', 108,
'b1x3_x5', 104,
'b1x3_x6', 60
], 'b1x3_totaal',

[
'b1x4_x1', 248,
'b1x4_x2', 182,
'b1x4_x3', 188,
'b1x4_x4', 135,
'b1x4_x5', 140,
'b1x4_x6', 78
], 'b1x4_totaal'
]
];


function tweeDecStr(fpNum) {
var totaalStr = (Math.round(fpNum*100)/100) + '';
var puntPos = totaalStr.indexOf('.');
if (puntPos<0) {
puntPos = totaalStr.length;
totaalStr += '.';
}
totaalStr += '00';
return totaalStr.substr(0, puntPos+3).replace(/\./g,',');
}


function berekenTotaal(arr) {

var subTotaal, totaal = 0, veld, veldVal,
e = document.aForm.elements;

for (var i=0; i<arr.length; i+=2) {

if (typeof(arr[i])=='string') {
subTotaal = berekenTotaal(arr[i+1]);
e[arr[i]].value = tweeDecStr(subTotaal);
}

else {

subTotaal = 0;

for (n=0; n<arr[i].length; n+=2) {
veld = e[arr[i][n]];
if (!veld.onkeyup) veld.onkeyup = bereken;
veldVal = parseInt(veld.value, 10);
if (isNaN(veldVal)) veldVal = 0;
subTotaal += veldVal * arr[i][n+1];
}
e[arr[i+1]].value = tweeDecStr(subTotaal);
}
totaal += subTotaal;
}
return totaal;
}

function bereken() {
berekenTotaal(producten);
}What i did now is include the new code (the one of sad69) in the function "bereken". (I also changed the code a bit, according to glenngv's remark. (correctly?))
function bereken() {
berekenTotaal(producten);

var highestValue = b1x1_totaal.value;
var highestNode = b1x1_totaal;

var f = document.forms['aform'];
for(var i = 2; i <= 4; i++) {
if(f.elements['b1x'+i+'_totaal'].value > highestValue) {
highestValue = f.elements['b1x'+i+'_totaal'].value;
highestNode = f.elements['b1x'+i+'_totaal'];
}
}

for(var i = 1; i <= 4; i++) {
if(window['b1x'+i+'_totaal'] == highestNode) {
continue;
}
else {
window['b1x'+i+'_totaal'].value = "0,00";
}
}
}But it doesn't work. :-/ I get the error:
"Rule 204"
"b1x1_totaal is not defined."
Rule 204 is: "var highestValue = b1x1_totaal.value;"

What went wrong?

***
You can find this script working at:
http://www.aendekerk.be/formulier.html
=> without the code from sad69
http://www.aendekerk.be/form_v2.html
=> with the code from sad69

glenngv
03-11-2004, 07:10 AM
You should have also changed the other field references the same way I suggested:



function bereken() {
berekenTotaal(producten);

var f = document.forms['aform'];

var highestNode = f.elements['b1x1_totaal']; //or f.b1x1_totaal
var highestValue = highestNode.value;

for(var i = 2; i <= 4; i++) {
if(f.elements['b1x'+i+'_totaal'].value > highestValue) {
highestValue = f.elements['b1x'+i+'_totaal'].value;
highestNode = f.elements['b1x'+i+'_totaal'];
}
}

for(var i = 1; i <= 4; i++) {
if(f.elements['b1x'+i+'_totaal'] == highestNode) {
continue;
}
else {
f.elements['b1x'+i+'_totaal'].value = "0,00";
}
}
}

Drieske1982
03-11-2004, 08:46 AM
Now i have the error "elements" is empty or no object? (rule 206)
I guess there is a typo somewhere in the code?
var highestNode = f.elements['b1x1_totaal']; //or f.b1x1_totaal=> http://www.aendekerk.be/form_v2.html

glenngv
03-11-2004, 09:15 AM
You had a typo in the form name. It should be 'aForm not 'aform

var f = document.forms['aForm'];

var highestNode = f.elements['b1x1_totaal']; //or f.b1x1_totaal

Drieske1982
03-11-2004, 09:22 AM
GREAT!!!
It works now!!!!

Thanks everyone!!

Drieske1982
03-11-2004, 09:30 AM
Damn, i guess i cheered to early.
There's still a bug in it.

I works correctly with "b1x1_totaal" and "b1x3_totaal", but not with "b1x2_totaal" and "b1x4_totaal".

When b1x2_totaal (or b1x4_totaal) contains a higher value then b1x1_totaal (or b1x3_totaal), still b1x1_totaal (or b1x3_totaal)will be displayed (instead of zero-out).

You can see it for yourself:
http://www.aendekerk.be/formulier.html
=> here you can see all the values.
(fill in some fields in section 1)
http://www.aendekerk.be/form_v2.html
=> here you should see only the highest value.

glenngv
03-11-2004, 09:34 AM
I didn't write the logic behind that script, sad69 did.
I'll try a more simpler approach using array as I mentioned earlier.

glenngv
03-11-2004, 09:47 AM
Try this:



//sorts in descending order
function sortNum(a,b) {
if (a > b) return -1;
if (a < b) return 1;
return 0;
}

function bereken() {
berekenTotaal(producten);

var f = document.forms['aForm'];

var arr = new Array(); //create an array that will contain the fields' values

for(var i = 1; i <= 4; i++) { //populate the array
arr[i-1] = parseInt(f.elements['b1x'+i+'_totaal'].value, 10); //convert to number
}

arr.sort(sortNum); //sort numbers in descending order

for(var i = 1; i <= 4; i++) {
if (f.elements['b1x'+i+'_totaal'].value!=arr[0]){ //reset only those not with highest value
f.elements['b1x'+i+'_totaal'].value="0,00";
}
}
}


Edited. Forgot to add the sortNum() function.

Drieske1982
03-11-2004, 12:10 PM
Hi,
Thanks for trying to rewrite the code.
But i'm afraid now nothing works. :-/
http://www.aendekerk.be/form_v2.html
Maybe you have forgotten something? I filled in the array correctly, right?

Drieske1982
03-11-2004, 05:53 PM
After a few hours of searching, trying and crying :) i've found the solution!!
http://www.aendekerk.be/form_v2.html

It works, i think. Or do you see any bugs?

glenngv
03-12-2004, 01:57 AM
I didn't see what you did wrong with my original code. But your new script works. You implemented a different solution by using the Math.max() function.

Drieske1982
03-12-2004, 07:35 AM
Just out of curiosity, your code i implemented (but didn't work):



//sorts in descending order
function sortNum(a,b) {
if (a > b) return -1;
if (a < b) return 1;
return 0;
}

function bereken() {
berekenTotaal(producten);

var f = document.forms['aForm'];

var arr = new Array ('b1x1_totaal', 'b1x2_totaal', 'b1x3_totaal', 'b1x4_totaal'); //create an array that will contain the fields' values

for(var i = 1; i <= 4; i++) { //populate the array
arr[i-1] = parseInt(f.elements['b1x'+i+'_totaal'].value, 10); //convert to number
}

arr.sort(sortNum); //sort numbers in descending order

for(var i = 1; i <= 4; i++) {
if (f.elements['b1x'+i+'_totaal'].value!=arr[0]){ //reset only those not with highest value
f.elements['b1x'+i+'_totaal'].value="0,00";
}
}
}

glenngv
03-12-2004, 08:21 AM
Since you put commas in the number, you should remove them just like the way you did in your own implementation. And you don't have to put anything in the var arr = new Array() line. Just leave it like that.



...
var arr = new Array (); //create an empty array that will contain the fields' values

for(var i = 1; i <= 4; i++) { //populate the array
arr[i-1] = parseInt(f.elements['b1x'+i+'_totaal'].value.replace(/,/g,''), 10); //remove comma and convert to number
}

alert("unsorted: "+arr); //test only
arr.sort(sortNum); //sort numbers in descending order
alert("sorted: "+arr); //test only
...

Drieske1982
03-12-2004, 08:32 AM
So, now i have this, right?


//sorts in descending order
function sortNum(a,b) {
if (a > b) return -1;
if (a < b) return 1;
return 0;
}

function bereken() {
berekenTotaal(producten);

var f = document.forms['aForm'];

var arr = new Array(); //create an array that will contain the fields' values

for(var i = 1; i <= 4; i++) { //populate the array
arr[i-1] = parseInt(f.elements['b1x'+i+'_totaal'].value.replace(/,/g,''), 10); //remove comma and convert to number
}

alert("unsorted: "+arr); //test only
arr.sort(sortNum); //sort numbers in descending order
alert("sorted: "+arr); //test only

for(var i = 1; i <= 4; i++) {
if (f.elements['b1x'+i+'_totaal'].value!=arr[0]){ //reset only those not with highest value
f.elements['b1x'+i+'_totaal'].value="0,00";
}
}
}

With this code, i get an alert-window (2 times) with the correct sorting order. But when i close them, all the values (also the highest one) are reset to zero.

glenngv
03-12-2004, 08:44 AM
I forgot to also remove the comma in the last loop.

for(var i = 1; i <= 4; i++) {
if (f.elements['b1x'+i+'_totaal'].value.replace(/,/g,'')!=arr[0]){ //reset only those not with highest value
f.elements['b1x'+i+'_totaal'].value="0,00";
}
}

Drieske1982
03-12-2004, 09:48 AM
Great!
It works now!!
Thanks for your help!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum