2

I am writing a small invoice application in Yii. I have the database for the model item. The item database is something like this

  +++++++++++++++++
  |  InvoiceItems |
  +++++++++++++++++
  +      id       +
  +      name     +
  +  description  +
  +    unit_cost  +
  +    quantity   +
  +    tax        +
  +    total      +
  +++++++++++++++++

Now, in item model I have made a dropdown list where I am fetching all the item name with its unit_cost, quantity, tax etc in Ajax. In order to do the total, I have the business logic as:

  1. unit_cost will be multiplied by quantity
  2. Tax will then be added to the total.
  3. The total should finally pop up in the total field in the _form.php file.

For the calculation, I have written this jQuery script:

<script type="text/javascript">
jQuery(document).ready(function(){
  jQuery("#InvoiceItems_unit_cost, #InvoiceItems_quantity, #InvoiceItems_tax").on('keyup',function(event){
    var subtotal = jQuery("#InvoiceItems_quantity").val() * jQuery("#InvoiceItems_unit_cost").val();
    var total = subtotal + (subtotal  * jQuery("#InvoiceItems_tax").val() / 100);
    jQuery("#InvoiceItems_total").val(total);
  });
});
</script>

This is working fine when I am manually inserting the values but it's not working when the values are coming from the database. I am totally stuck.

UPDATE

When I am trying to see the value after fetching from the database through ajax in console tab of firefox just like console.log("#InvoiceItems_quantity").val(), it is showing an empty string. Ajax code to fetch data from the database in form of json

        <?php echo $form->dropDownList($customers,'customer_name',CMap::mergeArray(CHtml::listData(Customers::model()->findAll(), 'customer_name',       'customer_name'
        ),
        array(
        'empty'=>array('Select'=>'- - Choose One - -'),
        'id'=>'Customers_name',
        'ajax'=> array(
            'type'=>'GET',
            'id'=>'abc',
            'url'=>$this->createUrl('Invoices/customerdetails'),// action that will generate the data
            'data'=>'js:"customer_name="+$(this).val()',// this is the data that we are sending to the action in the controller
            'dataType'=>'json',// type of data we expect back from the server
            'success'=>'js:updateFieldsCustomers',// a javascript function that will execute when the request completes
            'beforeSend'=>'js:function(){
                if($("#Customers_name").val() == "create_customer_link") {
                    addCustomers();
                    $("#dialogCustomers").dialog("open");
                    return false;
                }
            }',
        ),
        'options'=>array(
            'create_customer_link' => array('class'=>'create-link'),
        )
    )
);?>

   <?php
  Yii::app()->clientScript->registerScript('update','
  function updateFieldsCustomers(data, textStatus, jqXHR){
  // select each input field by id, and update its value
  $("#InvoiceItems_unit_cost").val(data.unit_cost);
  $("#InvoiceItems_quantity").val(data.quantity);
  $("#InvoiceItems_discount").val(data.discount);
  // similarly update the fields for the other inputs
  }
');
  ?>

Recent Update

When I tried for console.log("#InvoiceItems_quantity").val() I saw that it is showing the actual value of that field after change. Means when one value is selected it is showing the value of previous entered value in console panel. I think all this is working as I have used on change function but when I am using .select its not working at all.Not any value is showing in console panel.

NewUser
  • 12,713
  • 39
  • 142
  • 236
  • `console.log("#Items_quantity")` ? It must be `console.log(jQuery("#Items_quantity").val())`. And pls edit the question with the ajax code you are using to update the fields – dInGd0nG Sep 24 '12 at 19:04

2 Answers2

1

I got the solution for this question. It should be like this

<script type="text/javascript">
jQuery(document).ready(function(){
  jQuery("#Product_name").ajaxComplete(function(event,request,settings){
    var subtotal = jQuery("#InvoiceItems_quantity").val() * jQuery("#InvoiceItems_unit_cost").val();
    var total = subtotal + (subtotal  * jQuery("#InvoiceItems_tax").val() / 100);
    jQuery("#InvoiceItems_total").val(total);
  });
});
</script>
NewUser
  • 12,713
  • 39
  • 142
  • 236
0

Try this

    <script type="text/javascript">
    jQuery(document).ready(function(){
      jQuery("#Items_unit_cost, #Items_quantity, #Items_discount").on('keyup',calculate_total);

     function calculate_total(){
           var subtotal = jQuery("#Items_quantity").val() * jQuery("#Items_unit_cost").val();
           var total = subtotal + (subtotal  * jQuery("#Items_discount").val() / 100);
           jQuery("#Items_total").val(total);
         }

calculate_total();

    });

    </script>
gaurang171
  • 9,032
  • 4
  • 28
  • 30
  • Nope..this is not working. Here also user have to insert values manually to get the total. I want the values fetched from the database should do the calculation and show the total. – NewUser Sep 17 '12 at 07:26
  • had you set the values in textboxes after they fetched from database ? – gaurang171 Sep 17 '12 at 07:35
  • NewUser: look like you are using a dropdown to fetch the data(ajax) and populate the textboxes. So,a fter setting the values in textboxes... just call calculate_total() .... or ..... handle 'change' event on dropdown box something like ... JQuery('#Your_Dropdown_box_ID_here').on('change', calculate_total). – SuVeRa Sep 17 '12 at 10:14
  • Nope..The `jQuery('#dropdown_box_ID').on('change',function(event){ })` not working here. – NewUser Sep 24 '12 at 16:17
  • not working isn't a error message. Did you look at JS console? – itachi Sep 24 '12 at 17:56
  • @Gopesh yes I have checked that. – NewUser Sep 25 '12 at 04:40
  • @SuVeRa.I used `.on('change',function(event){})`.It is working fine but the problem is it is working after changing the value. I want when the value is selected it should show the calculation of that particular id, but it is showing the calculation of that id when it is already changed. – NewUser Sep 26 '12 at 04:25
  • 1
    @NewUser This answer looks fine. You just need to place a call to `calculate_total()` at the end of the `updateFieldsCustomer()` function. – Kemal Fadillah Sep 28 '12 at 14:31