Siddhesh Kalgaonkar Siddhesh Kalgaonkar - 5 months ago 11
jQuery Question

Whenever I enter values in 3 textfields in jsp page it should calculate and display it in 4th textfield in struts2

enter image description here

Here as I start entering values in first three textfields ,it should calculate and display it in fourth textfield without any button click.Everytime should be on runtime.So how can I achieve this with Javascript or Jquery ?

So please help me on the same.
Below is my jsp code:

<table class="responstable4">
<tr>
<td style="text-align: left;">Pan No. :</td>
<td style="text-align: left;">Net Amount :</td>
</tr>
<tr>
<td style="text-align: left;">Service Tax No. :</td>
<td style="text-align: left;">Service Tax @ 14.00%</td>
</tr>
<tr>
<td style="text-align: left;">&nbsp;</td>
<td style="text-align: left;">SBC @ 0.50%</td>
</tr>
<tr>
<td style="text-align: left;">&nbsp;</td>
<td style="text-align: left;">Total Amount</td>
</tr>
</table>
</td>
<td style="padding: 0px;">
<table class="responstable4">
<tr>
<td>&nbsp;</td>
<td><input type="text" name="amount" /></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input type="text" name="stTax" /></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input type="text" name="sbcTax" /></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input type="text" name="totalAmount" /></td>
</tr>
</table>


I tried loading simple javascript in my jsp page on load but didnt succeed.Below is my javascript code:

<script type="text/javascript">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
alert("Loaded");

};
</script>


Below is my code which I wrote under scriplet tag in jsp body tag:

<% String pAmount = request.getParameter("amount");
int proAmount = Integer.parseInt(pAmount);
String pSttax = request.getParameter("stTax");
int proStTax = Integer.parseInt(pSttax);
double tempTax = 0.14 * proStTax + proStTax;
String pSbcTax = request.getParameter("sbcTax");
int sbcTax = Integer.parseInt(pSbcTax);
double totalAmount = proStTax + tempTax + sbcTax;
%>


But when I insert this code I get an below error:

org.apache.jasper.JasperException: An exception occurred processing JSP page /profarma.jsp at line 275 272: </div> 273: <% 274: String pAmount = request.getParameter("amount"); 275: int proAmount = Integer.parseInt(pAmount); 276: String pSttax = request.getParameter("stTax"); 277: int proStTax = Integer.parseInt(pSttax); 278: double tempTax = 0.14 * proStTax + proStTax;


Please let me know where am I going wrong or am I missing anything ? Thanks :)

Answer

Try something like this, Add id in input fields and include jQuery library.

$(document).ready(function(){
  $(".responstable4").on("change","#amount,#stTax,#sbcTax",function(){
    var amount = $("#amount").val() != "" ? parseFloat($("#amount").val()) : undefined;
    var stTax = $("#stTax").val() != "" ? parseFloat($("#stTax").val()) : undefined;
    var sbcTax = $("#sbcTax").val() != "" ? parseFloat($("#sbcTax").val()) : undefined;
    if(amount && stTax && sbcTax)
    {
      var totalAmount = amount + stTax + sbcTax;
      $("#totalAmount").val(totalAmount);
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<table class="responstable4">
                <tr>
                    <td>&nbsp;</td>
                    <td><input type="text" name="amount" id="amount" /></td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td><input type="text" name="stTax" id="stTax" /></td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td><input type="text" name="sbcTax" id="sbcTax" /></td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td><input type="text" name="totalAmount" id="totalAmount" /></td>
                </tr>
            </table>

https://jsfiddle.net/9saynwt8/1/