Results 1 to 5 of 5

Thread: percantage calculation of a number entered in input field

  1. #1
    Join Date
    Nov 2007
    Posts
    69
    Thanks
    36
    Thanked 0 Times in 0 Posts

    Default percantage calculation of a number entered in input field

    hi
    i m new to javascript and m really not getting any solution to what i need to do
    if any of you could guide me how i should do this would be really a big help


    i have a field in which a number is made to enter like 5000 and for the result i want it to show what will be the 20% and 30% and 40% of 5000 as result below
    (like 1000 , 1500 , 2000 as result)
    the input field
    what should i do for that pls
    help me in this regard
    i know it is simple but for me i m just scratching my head without any help

    <td>Calculate</td>
    <td><input type="text" name="calculate" size="20"></td>

    thanks
    anand

  2. #2
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    Code:
    <script type="text/javascript">
    var input = 0;
    var percent = 0;
    var el = '';
    function calcPercent(input,percent,el)
    {
         if(document.getElementById(input).value > 0 && (int)percent>0 && document.getElementById(el))
         {
              document.getElementById(el).innerHTML = ((int)document.getElementById(input).value * (int)percent);
         }
    }
    </script>
    
    <form>
    <p>
         <label>Number:</label>
         <input type="text" name="input_field" id="input_field" value="">
    </p>
    <p>
         <label>Percentage:</label>
         <input type="text" name="percent_field" id="percent_field" value=""> %
    </p>
    <p id="result">&nbsp;</p>
    <input type="button" name="submit" value="Calculate" onclick="javascript:calcPercent('input_field','percent_field','result');">
    </form>

  3. #3
    Join Date
    Nov 2007
    Posts
    69
    Thanks
    36
    Thanked 0 Times in 0 Posts

    Default

    hi
    thanks for the reply but it shows error
    i mean the page status bar shows a error sign and does nothing
    thanks
    anand

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    .txt {
    text-align:right;
    padding-right:.5ex;
    }
    </style>
    <script type="text/javascript">
    function makePercents(f){
    var v; f=f.form.elements;
    if(isNaN(v=f['p100'].value-0)){
    alert('Please Enter a Number Only - No Letters, Spaces or Symbols.');
    return;
    }
    f['p20'].value=Math.round(v/20);
    f['p30'].value=Math.round(v/30);
    f['p40'].value=Math.round(v/40);
    }
    </script>
    </head>
    <body>
    <form action="#">
    <table>
    <tr>
    <td class="txt">Enter a Number:</td><td><input type="text" name="p100"> 
    <input type="button" value="Go!" onclick="makePercents(this);"></td>
    </tr>
    <tr>
    <td class="txt">20 Percent =</td><td><input type="text" name="p20"></td>
    </tr>
    <tr>
    <td class="txt">30 Percent =</td><td><input type="text" name="p30"></td>
    </tr>
    <tr>
    <td class="txt">40 Percent =</td><td><input type="text" name="p40"></td>
    </tr>
    </table>
    </form>
    </body>
    </html>
    Last edited by jscheuer1; 02-21-2008 at 07:53 PM. Reason: fix HTML markup
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. The Following User Says Thank You to jscheuer1 For This Useful Post:

    meenakshi (02-21-2008)

  6. #5
    Join Date
    Nov 2007
    Posts
    69
    Thanks
    36
    Thanked 0 Times in 0 Posts

    Default

    wow
    thanks
    it worked
    smile always
    thanks once again
    anand

Bookmarks

Posting Permissions

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