www.webdeveloper.com
Results 1 to 2 of 2

Thread: Form Field Validation within Other Function

Hybrid View

  1. #1
    Join Date
    Nov 2011
    Posts
    9

    Form Field Validation within Other Function

    Hello. I'm looking for some direction on something. I have written a fairly simple JavaScript code that allows the user to enter in their salary into a form field, what their % bonus should be and then click a "Calculate" link which multiplies the two fields together and presents their bonus payout on the page. Pretty straightforward.

    I'm trying to do form validation on both fields to make sure the fields are not blank and that they only allow numbers and periods. I want to return an error if it's blank or contains illegal characters.

    So, there are tons of tutorials on the web on how to do this and I've read a ton. These cookie cutter tutorials do not fit 100% into what I'm doing.

    Here's my question... My "Calculate" text link is using an a href tag to call my JavaScript function that does the math and presents the answer, which is the user's bonus payout. Shouldn't I just be able to put my validation code within that function so that when they click "Calculate" it validates the fields and if all is good, it performs the math? If so, how because everything I've read puts all this stuff into a different function, which is fine, but then I can't call two functions at the same time in my a href tag. It just seems that whatever I try isn't working. I'm just looking for some direction.

    Here's my code:

    <script type="text/javascript">
    function calculate()
    {
    var salary = document.calculateBonus.salary.value;
    var payout = document.calculateBonus.payout.value;
    var answer = (salary * payout / 100);
    answer = Math.round(answer * 20) / 20;

    document.getElementById('payoutText').innerHTML =
    ("Your Bonus is $" + answer);
    }
    </script>
    <script type="text/javascript">
    function clearFields()
    {
    document.getElementById("calculateBonus").reset();
    location.reload();
    }
    </script>
    </head>
    <body>
    <form id="calculateBonus" name="calculateBonus" method="post" action="">
    <label for="salary">Your Annual Salary</label>
    <input type="text" name="salary" id="salary" tabindex="1" />
    <br />
    <br />
    <label for="percentPayout">% Bonus Payout</label>
    <input type="text" name="payout" id="payout" tabindex="2" />
    <br />
    <br />
    <div id="payoutText"></div>
    <p><a href="javascript:calculate()">Calculate</a> &nbsp;|&nbsp; <a href="javascript:clearFields()">Clear</a></p>
    </form>

    - - - - - - - - - - -

    Thank you for any assistance/direction you can give me!

  2. #2
    Join Date
    Nov 2011
    Posts
    9
    O.k. I figured it out. Yes, I can put validation inside the same function that is performing the math. Use an "if" statement. I was doing this before, but it wasn't working. I must have been missing something and have now been able to make it work.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles