www.webdeveloper.com
Results 1 to 2 of 2

Thread: Calculation of form field entries

  1. #1
    Join Date
    Jun 2011
    Posts
    1

    Calculation of form field entries

    I am a novice user of Expressions Web4 and am attempting to build a form that makes calculations of field entries and displays the results in designated fields. Specifically, multiplying the entry in the pmt_amt field by .03 and placing the result in the srv_fee field, then adding the entry in the pmt_amt field to the result in the srv_fee field to show the resulting sum in the total_pmt_amt field. I have created functions in JavaScript for both calculations and tied them to onClick relative to a button btn_srv_fee.

    I used this method by searching online for an appropriate method and tweaked results for my application. Below is the code for what I am attempting to do. Upon making an entry in the pmt_amt field and then clicking the button, there are no results in neither the srv_fee field or total_amt_field. Below is the code for the functions and the associated section that identifies the fields. Any help to identify my errors or advice on better methods will be greatly appreciated.

    <script type="text/javascript">
    function multiplyNumbers(pmt_amt, .03, ResultField1)
    {
    var PmtAmt = document.getElementById(pmt_amt);
    var ResultField1 = document.getElementById(srv_fee);
    var Result1;
    //Perform Multiplication
    Result1 = parseFloat(PmtAmt.value) * .03;
    //Fix Numbers
    Result1 = Math.round(Result1 * 100) / 100;
    //Show Result1 in ResultField1
    ResultField1.value = Result1
    }
    function addNumbers(pmt_amt, srv_fee, ResultField2)
    {
    var PmtAmt = document.getElementById(pmt_amt);
    var SrvFee = document.getElementById(srv_fee);
    var ResultField2 = document.getElementById(total_pmt_amt);
    var Result2;
    //1. Perform Addition
    Result2 = parseFloat(PmtAmt.value) + parseFloat(SrvFee.value)
    //2. Fix Numbers
    Result2 = Math.round(Result2 * 100) / 100;
    //3. Show Results in ResultField2
    ResultField2.value = Result2
    }
    </script>




    <form method="post" action="">
    <table style="width: 400px">
    <tr>
    <td style="width: 150px">Account Number</td>
    <td>&nbsp;<input name="acct_no" size="14" tabindex="1" type="text" value="000-0-0000-00" /></td>
    </tr>
    <tr>
    <td>Service Address</td>
    <td>
    <input name="srv_addr" size="24" tabindex="2" type="text" /></td>
    </tr>
    <tr>
    <td style="height: 26px">Payment Amount</td>
    <td style="height: 26px">
    <input name="pmt_amt" size="10" tabindex="3" type="text" /></td>
    </tr>
    <tr>
    <td style="height: 34px">Click to calculate</td>
    <td style="height: 34px">
    <input name="btn_srv_fee" type="button" value="Service Fee" tabindex="4"
    onclick="multiplyNumbers(pmt_amt, .03, ResultField1;
    addNumbers(pmt_amt, srv_fee, ResultField2);"
    />&nbsp;</td>



    </tr>
    <tr>
    <td>Service Fee</td>
    <td>
    <input name="srv_fee" size="5" type="text" />&nbsp;</td>
    </tr>
    <tr>
    <td>Total Payment Amount</td>
    <td>
    <input name="total_pmt_amt" size="10" tabindex="5" type="text" />&nbsp;</td>
    </tr>

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,259

    Lightbulb

    Try this variation on your theme...
    Code:
    <html>
    <head>
    <title> Service Calculations </title>
    
    <script type="text/javascript">
    function ActOnNumbers(fld1,action,fld2,rslt) {          // rt('fld1: '+fld1+'\naction: '+action+'\nfld2: '+fld2+'\nrslt: '+rslt);
      var fld1Value = document.getElementById(fld1).value;  // rt(fld1Value+'\n'+fld1+'\n'+fld2);
      var fld2Value = document.getElementById(fld2).value;  // rt(fld2Value+'\n'+fld2+'\n'+rslt);
      var tmp = 0;
      
      if (action == '*') {
    	tmp = parseFloat(fld1Value) * parseFloat(fld2Value);	// Perform Multiplication
      } else {													// alert(fld1Value+'\n'+fld2Value);
        tmp = parseFloat(fld1Value) + parseFloat(fld2Value);	// Perform Addition
      }
      tmp = tmp.toFixed(2);							// Fix Numbers
      document.getElementById(rslt).value = tmp;	// Show Result in ResultField1
    }
    </script>
    
    <body>
    
    <form name="myForm" method="post" action="" onsubmit="return false">
    <table style="width: 400px">
    <tr>
    <td style="width: 150px">Account Number</td>
    <td>&nbsp;<input name="acct_no" size="14" tabindex="1" type="text" value="000-0-0000-00" /></td>
    </tr>
    <tr>
    <td>Service Address</td>
    <td>
    <input name="srv_addr" size="24" tabindex="2" type="text" /></td>
    </tr>
    <tr>
    <td style="height: 26px">Payment Amount</td>
    <td style="height: 26px">
    <input id="pmt_amt" name="pmt_amt" size="10" tabindex="3" type="text" value="100" /></td>
    </tr>
    <tr>
    <td style="height: 34px">Click to calculate</td>
    <td style="height: 34px">
    <input id="rate" name="rate" type="hidden" value="0.03">
    <input name="btn_srv_fee" type="button" value="Service Fee" tabindex="4"
     onclick="ActOnNumbers('pmt_amt','*','rate','srv_fee');ActOnNumbers('pmt_amt','+','srv_fee','total_pmt_amt');"
    />&nbsp;</td>
    
    </tr>
    <tr>
    <td>Service Fee</td>
    <td>
    <input id="srv_fee" name="srv_fee" size="5" type="text" value="" />&nbsp;</td>
    </tr>
    <tr>
    <td>Total Payment Amount</td>
    <td>
    <input id="total_pmt_amt" name="total_pmt_amt" size="10" tabindex="5" type="text" value="" />&nbsp;</td>
    </tr> 
    
    </body>
    </html>
    You were trying to use getElementById on elements that had no Id values.

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