如何在文本字段中获得excel函数的功能？

Question

I have a page which looks like below. Where some of the data are from database and there will be form fields also beside database data. All are dynamic so we need to validation for every field also.

Please check this http://jsbin.com/efinak/22/edit

Total Spent Cost: ((t1*100+t2*200)*x%+(t3*110)*y%)spent for A + spent for B

Client : A

product        No of Hours      Avg Rate/Hour       Cost
A1                  t1              100             t1*100
A2                  t2              200             t2*200

Total Cost:                                         t1*100+t2*200
Percentage(%):                                          x
Spent Cost:                                         (t1*100+t2*200)*x%

Client : B

product        No of Hours      Avg Rate/Hour       Cost
B1                  t3              110             t3*100


Total Cost:                                         t3*110
Percentage(%):                                        y
Spent Cost:                                         (t3*110)*y%

In the above example client, product and No of hours will come from database. I kept a text field for Avg Rate/Hour and a text field for Cost also.

Why i mentioned in the question excel kind of funcitonality is i will explain here. If suppose i set Avg Rate/Hour text field then automatically cost should be calcualted without any redirecting. In the same way if you set cost Avg Rate/ hour should be calculated automatically.

Once costs are calculated Total cost should be calculated automatically.Like above percentage is also having a text field which will also set by user with some value. Based on that you need to calucalte spent cost.

I need to this thing for every cleint. Once after every cleint's spent cost calculated automatically total spent cost also should be calcualted on the fly.

I need ideas and if possible more help.

Answer 1

You can use jquery script for this. I take short example from which you can know basic logic behind this. Suppose you have 4 fields. A, B, C and D with appropriate class name.

Here A and B are from database, C is input field, and D is input field for final answer. You can calculate D automatically as following.

$(document).ready(function() {
     $('.class_C').live('change', function() {
          var A = $('.class_A').val();
          var B = $('.class_B').val();
          var C = $('.class_C').val();

          // Calculate D as per A, B and C.
          var D = A + B * C / 50;

          // Put new value in to D field.
          $('.class_D').val(D);
     });
})

EDIT::

Check : http://jsbin.com/efinak/27/edit

$('input[name="quantity"]').change(function() {   
  var total = 0;
  $('input[name="price"]').map(function(i,n) {
    total += Number(n.value);
  });
  $('input[name="total"]').val(total);
});