I have calculation problem I have 4 textboxes readonly. 2 textboxes get values from mysql database using ajax and the other 2 textboxes get their values from other textboxes in the same page (function calculate sum). I want to addition (Textbox11 + Textbox13) and subtract from (Textbox12 + Textbox14), put the total value in Textbox15. I need to give me the total without refreshing the page
Code:
    <script src="jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="jquery-ui.js"></script>
    <link type="text/css" href="jquery-ui.css" rel="stylesheet" />
    <script src="jquery.chained.min.js"></script>
    <script>
    function showUser(str) {
    if (str=="") {
    document.getElementById("TextBox13").value="";
    return;
    }
    if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
    } else { // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
    var r= xmlhttp.responseText.split("؛؛؛");             
    document.getElementById("TextBox13").value =  r[1];
    document.getElementById("TextBox16").value = parseFloat($("#TextBox11").val()) +  parseFloat(r[1]);
    alert(document.getElementById("TextBox16").value);
    document.getElementById("TextBox15").value=document.getElementById("TextBox16").value-document.getElementById("TextBox17").value;
    alert(document.getElementById("TextBox15").value);
    }
    }
    xmlhttp.open("GET","getuser2.php?q="+str,true);
    xmlhttp.send();
    }
    </script>
    <script type="text/javascript">
    $(document).ready(function () {
    //iterate through each textboxes and add keyup
    //handler to trigger sum event
    $(".txt").each(function () {
    $(this).keyup(function () {
    calculateSum();
    });
    });
    });
    function calculateSum() {
    var sum = 0;
    //iterate through each textboxes and add the values
    $(".txt").each(function () {
    //add only if the value is number
    if (!isNaN(this.value) && this.value.length != 0) {
    sum += parseFloat(this.value);
    }
    });
    //Assign the total value to Textbox 11
    $("#TextBox11").val(sum);
    }
    </script>
    <script type="text/javascript">
    $(document).ready(function () {
    //iterate through each textboxes and add keyup
    //handler to trigger sum event
    $(".txt1").each(function () {
    $(this).keyup(function () {
    calculateSum1();
    });
    });
    });
    function calculateSum1() {
    var sum1 = 0;
    //iterate through each textboxes and add the values
    $(".txt1").each(function () {
    //add only if the value is number
    if (!isNaN(this.value) && this.value.length != 0) {
    sum1 += parseFloat(this.value);
    }
    });
    //Assign the total value to Textbox 11
    $("#TextBox12").val(sum1);
    }
    </script>
    <script>
    function showUser1(str) {
    if (str=="") {
    document.getElementById("TextBox14").value="";
    return;
    }
    if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
    } else { // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {      
    r= xmlhttp.responseText.split("؛؛؛");
    document.getElementById("TextBox14").value =  r[1];
    document.getElementById("TextBox17").value = parseFloat($("#TextBox12").val()) + parseFloat(r[1]);
    }
    }
    xmlhttp.open("GET","getuser4.php?q="+str,true);
    xmlhttp.send();
    }
    </script>
    </head>
    <?php
    echo"<form action='".$server['PHP_SELF']."' method='post' id='taxDetails'>
    <table bgcolor='#7ACB83'  border='1' >
    <tr><td>    File No : </td><td><input type='text'  name='no_file' onblur='showUser1(this.value);'  /></td> </tr>
    </table>
    <table bgcolor='#7ACB83'  border='1'>
    <tr> 
    <td>Degree:</td><td><select id='dgree_now' name='dgree_now'> 
    <option value=''>please select degree</option>
    <option value='1' data-value1='336.68' data-value2='0' data-value3='126.25' data-value4='252.51' data-value5='168.34' data-value6='210.42' data-value7='84.17' data-value8='42.08' data-value9='168.34' data-value10='84.17' data-value11='84.17' data-value12='168.34' data-value13='42.08' data-value14='210.4' data-value15='140.26' data-value16='70.13'>First</option>
    <option value='2' data-value1='299.73' data-value2='0' data-value3='112.4' data-value4='224.8' data-value5='149.87' data-value6='187.33' data-value7='74.93' data-value8='37.47' data-value9='149.87' data-value10='74.93' data-value11='74.93' data-value12='149.87' data-value13='37.47' data-value14='187.265' data-value15='124.843' data-value16='62.4216'>Second</option>
    </select></td>
    <tr><td>New Alawa:</td><td><select id='new_alawa' name='new_alawa' onchange='showUser(this.value)'>
    <option value=''>please select Alawa</option>
    <option value='A1' data-value='959' class='1'>A1</option>
    <option value='A2' data-value='998' class='1'>A2</option>
    <option  value='A3' data-value='1038' class='1'>A3</option>
    <option value='A4' data-value='1079' class='1'>A4</option>
    <option value='B1' data-value='887' class='2'>B1</option>
    <option value='B2' data-value='923' class='2'>B2</option>
    <option value='B3' data-value='959' class='2'>B3</option>
    <option value='B4' data-value='998' class='2'>B4</option>
    </select>
    </td>
    </table>
    <table bgcolor='#7ACB83' width='58%' border='1'>
    <td><input type='text' class='txt' size='7' name='sp1_alawa' /></td>
    <td><input type='text' class='txt' size='7' name='sp2_alawa' /></td>
    <td><input type='text' class='txt' size='7' name='sp3_alawa' /></td>
    <td><input type='text' class='txt' size='7' name='sp4_alawa' /></td>
    <td><input type='text' class='txt' size='7' name='sp5_alawa' /></td>
    </table>
    <table bgcolor='#7ACB83' width='58%' border='1'>
    <td><input type='text' class='txt1' size='7' name='nafga' /></td>
    <td><input type='text' class='txt1' size='7' name='mutbagee_lend' /></td>
    <td><input type='text' class='txt1' size='7' name='const_discount_cost' /></td>
    <td><input type='text' size='7' class='txt1' name='sp1_de' /></td>
    <td><input type='text' size='7' class='txt1' name='sp2_de' /></td>
    </table>
    <table bgcolor='#7ACB83' width='48%' border='1'>
    <td><input type='text' size='7' class='txt1' name='sp3_de' /></td>
    <td><input type='text' size='7' class='txt1' name='sp4_de' /></td>
    <td><input type='text' size='7' class='txt1' name='sp5_de' /></td>
    <td><input type='text' size='7' class='txt1' name='sp6_de' /></td>
    </table>
    <table bgcolor='#7ACB83'  border='1'><tr>
    <td> Total1 Special</td><td><input  readonly type='text'  ID='TextBox11' name='sum_replace' /></td>
    <td>Total2 Special</td><td><input   readonly type='text'  ID='TextBox12' name='sum_discount'  /></td></tr>
    <tr><td> Total1 General</td><td><input readonly type='text'  ID='TextBox13' name='total' /></td>
    <td>Total2 General</td><td><input readonly type='text'  ID='TextBox14' name='total2' /></td></tr>
    <table bgcolor='#7ACB83'  border='1'>
    <tr><td>(Total1 Special+Total2 Special)-(Total1 General+Total2 General):</td>          
    <td><input readonly type='text' ID='TextBox15' name='salary_pure' /></td>   
    <td><input  type='hidden' ID='TextBox16' name='badlat_sum' /></td>
    <td><input  type='hidden' ID='TextBox17' name='estg_sum' /></td>
    </tr></table>";
    ?>
Thanks in Advance