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.
Results 1 to 14 of 14
  1. #1
    New Coder
    Join Date
    May 2013
    Posts
    17
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Function only reading 1 of 3 fields

    I am making a loan payment calculator and have a problem (then maybe a follow up "how to simplify" question, but I'll start with the problem).

    The "amount" and "months" fields do not seem to be recognized by the OnSubmit function, only the "apr" field and I'm not sure why. It's probably just a simple typo but I've looked over it a few times and don't see the issue.

    Here are links to the files:
    http://tiger.towson.edu/~tbaldw2/LoanCalc.html
    http://tiger.towson.edu/~tbaldw2/LoanCalc.js

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    Of course it is ... because you are showing "monthly_int" after the calculation, which is only the percentage field divided by 1200

    If you want to show the result, you should execute the following
    Code:
        if (!isNaN(monthly_int) &&  (monthly_int != Number.POSITIVE_INFINITY) && (monthly_int != Number.NEGATIVE_INFINITY)) {
            document.loandata.payment.value = payment;
        }

  • Users who have thanked devnull69 for this post:

    me10lee83 (05-13-2013)

  • #3
    New Coder
    Join Date
    May 2013
    Posts
    17
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you! I knew it was something simple, I've just spent so much time writing the code etc (I'm new to Javascript so takes me a while and sometimes miss the obvious stuff) that I guess I was just skimming over it

  • #4
    New Coder
    Join Date
    May 2013
    Posts
    17
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Ok next question, wondering if I can simplify the code at all. I have functions to check each field is valid (numbers and decimal point only) when it's deselected, and if it's not valid display an error message in a table cell next to the field.

    I currently have a function for each of the 3 fields, so if the field is incorrect, it sends the error message to the table cell with a particular ID, 3 functions for 3 table ids. Is there a way to have one function for all 3 fields, and it recognize which field was incorrect and put the error message in the appropriate location? I feel like there must be a way, (maybe with a nested for loop to look in a field, then check for errors once in the field, then move on to the next field?) but not sure how to do it exactly so any tips would be great.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,206
    Thanks
    75
    Thanked 4,342 Times in 4,308 Posts
    Ummm...maybe you should write your *OWN* validation???

    That code you are using is *HORRIBLE*. It idiotically checks character by character to see if each character is a digit or period. UGLY! And it DOES NOT EVEN BOTHER to check to see if the user actually *entered* any number! It will *ACCEPTE* an input of "...." !!!
    Perhaps the worst numeric validation I've seen in a *LONG* time.

    And you don't even check for silly inputs, such a 31718% APR.

    I would just throw out *ALL* that JavaScript and (almost) start over.

    Since this appears to be homework, I'm curious as to how you thought you could turn in something that so blatantly isn't your work
    these files were created by David Flanagan, and are Copyright (c) 2001...
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    New Coder
    Join Date
    May 2013
    Posts
    17
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    Since this appears to be homework, I'm curious as to how you thought you could turn in something that so blatantly isn't your work
    Our professor has said we are allowed to use examples and libraries we find online as long as they are properly referenced.

    I am new to JavaScript (we only just touched on the basic commands in one class, he keeps promising to post example code online but after 3 weeks, and weekly reminders, has yet to do so) and have been trying to figure out how to perform my own validation but have been unable to get it working. If you have a link to somewhere I could read some instructions I would be happy to write it myself, but so far I have been unable to figure this out so have resorted to using the code I found online and asking for help in forums because my professor takes weeks (literally) to respond to emails.

  • #7
    New Coder
    Join Date
    May 2013
    Posts
    17
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Based on class tonight I wasn't the only one confused! He went over it further (and hopefully this time will actually post his code online as he keeps promising) and I should be able to do it myself now.

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,206
    Thanks
    75
    Thanked 4,342 Times in 4,308 Posts
    The really easy way to validate a number:
    Code:
    var n = Number( someField.value );
    if ( isNaN(n) )
    {
        ... invalid ...
    } else {
       ... n is valid and the value to use ...
    }
    Note that Number will convert a blank field to zero, so you may want to also reject zero values.

    Another alternative to Number() is parseFloat().
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,206
    Thanks
    75
    Thanked 4,342 Times in 4,308 Posts
    here's a suggestion:
    Code:
    function checkNumber( fld, min, max, oopsid )
    {
        var val = Number( fld.value );
        var oops = document.getElementById(oopsid);
        if ( isNaN(val) || val < min || val > max )
        {
            oops.innerHTML = "Invalid, must be number from " + min + " to " + max;
            return null;
        } 
        oops.innerHTML = "";
        return val;
    }
    And then you could call that, maybe, like:
    Code:
      
    function calculate( )
    {
        var form = document.forms[0];
        var pv = checkNumber( form.presentValue, 100, 1000000, "pvError" );
        var mos = checkNumber( form.months, 12, 480, "monthsError" );
        var apr = checkNumber( form.apr, 1, 50, "aprError" );
        if ( pv === null || mos === null || apr === null ) { return; // no result }
        ... calculate answer ...
    }
    Or something along those lines.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #10
    New Coder
    Join Date
    May 2013
    Posts
    17
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you for the suggestions. After some examples in class last night and looking around online I have made progress. Still need a little help though. Here is what I have right now:

    Code:
    function validate1() {
      var x = document.forms["loandata"]["amount"].value;
      if (x<10)
      {
      document.getElementById("amount").innerHTML="Please enter a number 10 or larger";
      return false;
      }
      else if (x>1000000)
      {
      document.getElementById("amount").innerHTML="Please enter a number less than 1000000";
      return false;
      }
      else if (x == "" || x == " " || isNan(x) )
      {
      document.getElementById("amount").innerHTML="Please enter a number between 10 and 1000000";
      return false;
      }
      else 
      {
      document.getElementById("amount").innerHTML="";
      return false;
      }
    }
    It works if the number entered is too large or too small, but if I then go back and enter a valid number, or enter a non-numeric character then nothing happens. I have narrowed it down to the isNan part, if I take that out everything works. Based on what I've read online that should work. Would appreciate some insight as to the issue there.

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,206
    Thanks
    75
    Thanked 4,342 Times in 4,308 Posts
    Read what I gave you.

    (1) You need to convert the value to a number, using Number() or parseFloat *FIRST*, before you try to compare it to anything.

    (2) You need to check for isNaN( ) before trying to see if it is outside the allowed range of values.

    **********
    Named <form> elements are long obsolete. Stop using a name for your <form> and use an id instead. And then get a reference to the for using document.getElementById( ).

    And why do you go get a reference to your message location 4 times?

    Oh, what the hey...
    Code:
    function trim( str )
    {
        return str.replace(/^\s+/,"").replace(/\s+$/,"");
    }
    
    function validate1() {
        var form = document.getElementById("loandata"); // after you change from name to id
        var msg = document.getElementById("amount");
        var amt = parseFloat( trim( form.amount.value) );
        if ( isNan(x) || x < 10 || x > 1000000 )
       {
           msg.innerHTML="Please enter a number between 10 and 1000000";
          return false;
       }
       // no need for else!  return mesns "return right now!"
       msg.innerHTML = "";
       return true;  // ??? why were you returning false???
    }
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #12
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,206
    Thanks
    75
    Thanked 4,342 Times in 4,308 Posts
    LOL! You spelled isNaN wrong! You spelled it isNan. JavaScript is case sensitive, remember.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #13
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,920
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote Originally Posted by Old Pedant View Post
    Named <form> elements are long obsolete.
    Whoops! Senior moment! Form elements should have names (and may have ids as well). Forms should just have an id - not a name which as you say is obsolete.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #14
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,206
    Thanks
    75
    Thanked 4,342 Times in 4,308 Posts
    Not really, just inexact wording. I meant that to read equivalent to "named HTML elements of type <form> are obsolete...".

    I use "<form> fields" when I'm referring to the elements inside a <form>, just for that very reason. So I will try to avoid using the term "<form> element(s)" from now on, as being unclear.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

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