EasyUI Forum

Hi,

I had an order form (html form) where the user input cost details and then at the bottom the subtotal, tax etc was automatically calculated using javascript however I've now converted this form onto the datagrid form and it doesn't work. Has anyone experienced this before or know of a solution?

My code is:-
<script type="text/javascript">
function updatesum() {
document.fm.subtotal.value = (document.fm.lineval_line_1.value -0) + (document.fm.lineval_line_2.value -0) + (document.fm.lineval_line_3.value -0) + (document.fm.lineval_line_4.value -0)  + (document.fm.lineval_line_5.value -0)  + (document.fm.del_cost.value -0);
document.fm.vat.value = (document.fm.subtotal.value -0) * (document.fm.vatrate.value -0);
document.fm.value.value = (document.fm.subtotal.value -0) + (document.fm.vat.value -0);
}
</script>

   <div id="dlg" class="easyui-dialog" style="width:850px;height:450px;padding:10px 20px"
         closed="true" buttons="#dlg-buttons">
      <div class="ftitle">Order Information</div>
      <form id="fm" method="post" novalidate>
<table  style="width:700px;height:auto;">
<thead>
      
  <tr>
       <th field="name1" width="50"'>Item</th>
      <th field="name2" width="75">Qty</th>
   <th field="name3" width="200">Description</th>
   <th field="name4" width="120">Price</th>
   <th field="name5" width="120">Unit</th>
   <th field="name6" width="120">Line Value</th>
  </tr>
</thead>
      
<tbody>
  <tr>
       <td>1</td>
      <td><input name = "qty_line_1"       class="easyui-textbox" style="width:65px;" ></td>
   <td><input name = "descr_line_1"    class="easyui-textbox" style="width:190px;" ></td>
   <td><input name = "price_line_1"    class="easyui-textbox" style="width:110px;" ></td>
   <td><input name = "unit_line_1"    class="easyui-textbox" style="width:110px;" ></td>
   <td><input name = "lineval_line_1" onChange="updatesum()" class="easyui-textbox" style="width:110px;" ></td>
  </tr>

  <tr>
       <td>2</td>
      <td><input name = "qty_line_2"      class="easyui-textbox" style="width:65px;"></td>
   <td><input name = "descr_line_2"   class="easyui-textbox" style="width:190px;"></td>
   <td><input name = "price_line_2"   class="easyui-textbox" style="width:110px;"></td>
   <td><input name = "unit_line_2"      class="easyui-textbox" style="width:110px;"></td>
   <td><input name = "lineval_line_2" onChange="updatesum()" class="easyui-textbox" style="width:110px;"></td>
  </tr>

  <tr>
       <td>3</td>
      <td><input name = "qty_line_3"      class="easyui-textbox" style="width:65px;"></td>
   <td><input name = "descr_line_3"   class="easyui-textbox" style="width:190px;"></td>
   <td><input name = "price_line_3"   class="easyui-textbox" style="width:110px;"></td>
   <td><input name = "unit_line_3"      class="easyui-textbox" style="width:110px;"></td>
   <td><input name = "lineval_line_3" onChange="updatesum()" class="easyui-textbox" style="width:110px;"></td>
  </tr>

  <tr>
       <td>4</td>
      <td><input name = "qty_line_4"      class="easyui-textbox" style="width:65px;"></td>
   <td><input name = "descr_line_4"   class="easyui-textbox" style="width:190px;"></td>
   <td><input name = "price_line_4"   class="easyui-textbox" style="width:110px;"></td>
   <td><input name = "unit_line_4"      class="easyui-textbox" style="width:110px;"></td>
   <td><input name = "lineval_line_4" onChange="updatesum()" class="easyui-textbox" style="width:110px;"></td>
  </tr>

  <tr>
       <td>5</td>
      <td><input name = "qty_line_5"      class="easyui-textbox" style="width:65px;"></td>
   <td><input name = "descr_line_5"   class="easyui-textbox" style="width:190px;"></td>
   <td><input name = "price_line_5"   class="easyui-textbox" style="width:110px;"></td>
   <td><input name = "unit_line_5"      class="easyui-textbox" style="width:110px;"></td>
   <td><input name = "lineval_line_5" onChange="updatesum()" class="easyui-textbox" style="width:110px;"></td>
  </tr>
</tbody>
</table>


         <div class="fitem">
            <label>Delivery Cost:</label>
            <input name = "del_cost" onChange="updatesum()" class="easyui-textbox" required="true">
         </div>

         <div class="fitem">
            <label>Subtotal:</label>
            <input name = "subtotal" class="easyui-textbox" readonly style="border:0px">
         </div>

         <div class="fitem">
            <label>VAT:</label>
            <input name = "vat" class="easyui-textbox" readonly style="border:0px">
         </div>

         <div class="fitem">
            <label>Total:</label>
            <input name = "value" class="easyui-textbox" readonly style="border:0px">
         </div>
</div>
</div>

Hi, does anyone know of a workaround for automatically calculating cell totals in the form before adding to the database?

I've tried numerous ways but failing miserably  :(