كيفية طرح المبلغ الإجمالي والمبلغ المدفوع وعرض الإجابة في مربع نص آخر

<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
  <script type="text/javascript">
      $(document).ready(function () {
                   $("#AmountId").change(function () {
              var a = parseInt($('#TotaltobePaid').val(), 10);
              var b = parseInt($('#AmountId').val(), 10);
              $('form').submit();
              var result=0;
              a = isNaN(a) ? 0 : a;
              b = isNan(b) ? 0 : b;
              if (a > 0 && b > 0)
                  result = a - b;
              $("#Balance").text(+result);

          });

      });

هذا هو رمز HTML الخاص بي

@Html.LabelFor(model => model.TotaltobePaid)
 

@Html.EditorFor(model => model.TotaltobePaid, new { name = "Totaltobepaid", id = "TotaltobePaid" })
 
 

@Html.LabelFor(model => model.AmountPaid)
 

@Html.EditorFor(model => model.AmountPaid, new { name = "Amount", id = "AmountId" })
<button class="btn btn-primary" id="AmountButton">Go</button>
 

@Html.LabelFor(model => model.Balance)
 

@Html.EditorFor(model => model.Balance, new { name = "Balance", id = "Balance" })

ما حاولت:

<pre lang="HTML">@Html.LabelFor(model => model.TotaltobePaid)
 

@Html.EditorFor(model => model.TotaltobePaid, new { name = "Totaltobepaid", id = "TotaltobePaid" })
 
 

@Html.LabelFor(model => model.AmountPaid)
 

@Html.EditorFor(model => model.AmountPaid, new { name = "Amount", id = "AmountId" })
<button class="btn btn-primary" id="AmountButton">Go</button>
 

@Html.LabelFor(model => model.Balance)
 

@Html.EditorFor(model => model.Balance, new { name = "Balance", id = "Balance" })