Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 21
  1. #1
    New Coder
    Join Date
    Feb 2004
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts

    excel-tricks with javascript

    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!

  • #2
    Senior Coder
    Join Date
    Feb 2004
    Posts
    1,206
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:
    Code:
    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/showthre...threadid=34829

    Hope that helps,
    Sadiq.

  • #3
    New Coder
    Join Date
    Feb 2004
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #4
    Senior Coder
    Join Date
    Feb 2004
    Posts
    1,206
    Thanks
    0
    Thanked 0 Times in 0 Posts
    * 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:
    Code:
    <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
    Code:
    window['b1x'+i+'_totaal'].value = "";
    with
    Code:
    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.

  • #5
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Originally posted by sad69
    BTW: I got the window[..] from a recent thread:
    http://www.codingforums.com/showthre...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:
    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.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #6
    New Coder
    Join Date
    Feb 2004
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:
    Code:
    <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:
    Code:
    <body onLoad="bereken()">
    ...
    </body>
    And then you have in the script:
    Code:
    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?))
    Code:
    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
    Last edited by Drieske1982; 03-11-2004 at 06:53 AM.

  • #7
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    You should have also changed the other field references the same way I suggested:

    Code:
    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";
       }
      }
    }
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #8
    New Coder
    Join Date
    Feb 2004
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Now i have the error "elements" is empty or no object? (rule 206)
    I guess there is a typo somewhere in the code?
    Code:
     var highestNode = f.elements['b1x1_totaal']; //or f.b1x1_totaal
    => http://www.aendekerk.be/form_v2.html

  • #9
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    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
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #10
    New Coder
    Join Date
    Feb 2004
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    GREAT!!!
    It works now!!!!

    Thanks everyone!!

  • #11
    New Coder
    Join Date
    Feb 2004
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #12
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    I didn't write the logic behind that script, sad69 did.
    I'll try a more simpler approach using array as I mentioned earlier.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #13
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Try this:

    Code:
    //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.
    Last edited by glenngv; 03-11-2004 at 10:03 AM.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #14
    New Coder
    Join Date
    Feb 2004
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?
    Last edited by Drieske1982; 03-11-2004 at 01:13 PM.

  • #15
    New Coder
    Join Date
    Feb 2004
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •