0

I do have 4 text inputs like this, 

<input type="text" name="amount" id="amount">
<input type="text" name="commission" id="commission">
<input type="text" name="discount" id="discount">
<input type="text" name="total_amount" id="total_amount">

Here I am calculating total_amount base on the values of #amount. To do this I am using ajax like this,

var minlength = 2;
$("#amount").on('input', function () {
  var value  = $(this).val(), 
  if (value.length >= minlength ) {
    $.ajax({
      type: "POST",
      url: "includes/transactions/proccess_amount.php",
      data: {'amount':value},          
      success: function(response) {
        response = jQuery.parseJSON(response)
        $('#make_transaction')
          .find('[name="commission"]').val(response.commission).end()
          .find('[name="total_amount"]').val(response.total_amount).end(); 
      }    
    });
  } 
});

Now I want to change total_amount again if it has a value on #discount field. So I created a ajax request for #discount keyup and its working for me.

keyup script look like this. 

var strLength = 1;
$("#discount").keyup(function () {
  var discount = $(this).val(),
      amount   = $('#amount').val(),
      comison  = $('#commission').val(),
      total    = $('#total_amount').val();

      if (discount.length >= strLength ) {
        $.ajax({
          type: "POST",
          url: "includes/transactions/proccess_discount.php",
          data: { 'amount':amount
                , 'comison': comison
                , 'total'   : total
                , 'discount': discount
                },

          success: function(response) {
            response = jQuery.parseJSON(response)
            $('#amount_dolar').val(''); 
            $('#make_transaction')
              .find('[name="amount_dolar"]').val(response.amount).end()
              .find('[name="total_amount"]').val(response.totalAfterDiscount).end();
          }

        });
      }
    });

My problem is I want to display previous total_amount when discount field is empty. At this stage it is always displaying the total with discount.

Update: Image with the output for better understanding. enter image description here

Can anybody tell how to do this? Thank you.

user3733831
  • 2,886
  • 9
  • 36
  • 68
  • 2
    `total = $('#total_amount').val(),` <--- trailing comma... – epascarello Dec 24 '15 at 16:21
  • Could use the `else` of this: `if (discount.length >= strLength ) {` or `elseif(discount == ""){}` – Twisty Dec 24 '15 at 16:23
  • What is exactly in response.totalAfterDiscount in the test case you are talking about? "" or undefined or ??? – epascarello Dec 24 '15 at 16:27
  • @epascarello, `#amount` ajax call is ignoring discount value and it creates total amount with `amount + commission`. `#discount` ajax call is considering discount value and regenerating total amount. – user3733831 Dec 24 '15 at 16:47
  • @epascarello, I updated my question with an image for better understanding. Please look at it. Thank you. – user3733831 Dec 24 '15 at 17:03
  • Why have two different backends? Have one end point that returns back both items. – epascarello Dec 24 '15 at 17:04
  • Because discount field should be changeable by users. That mean they can test 5%, 10%, 15% etc. for same amount. Thats why I used separate backend for discount field. – user3733831 Dec 24 '15 at 17:09

3 Answers3

0

I would suggest having the #amount ajax call again in the 'success' section of the response to the #discount call. The problem seems to be that the #amount ajax is calling proccess_amount.php and the #discount ajax is calling proccess_discount.php.

Scott Clark
  • 11
  • 1
0

Keep the initial total amount in cookie on keyup of discount input where you are making ajax call and when discount gets null or empty, put that total account from cookie to total amount input.

Anil Panwar
  • 2,592
  • 1
  • 11
  • 24
  • Anil Panwar, can you show me an example of how to do it? Thank you. – user3733831 Dec 24 '15 at 16:31
  • Inside your $("#discount").keyup(function(){ $.cookie('previouAmount', $("total_amount").val()); }); and later get it from cookie and put in amount input if discount gets empty. – Anil Panwar Dec 24 '15 at 17:10
  • Anil, Still Iam not sure how to use it. Please elaborate it. Thank you. – user3733831 Dec 24 '15 at 17:14
  • Do I need to install `jquery.cookie` for this? – user3733831 Dec 24 '15 at 17:18
  • Check out this link about how to set and get cookie and hope this will fix it. http://stackoverflow.com/questions/1458724/how-to-set-unset-cookie-with-jquery – Anil Panwar Dec 24 '15 at 17:21
  • If you don't like this approch than you can make hidden input containing the total amount and can copy later this input value if the discount gets empty. Or you can set attribute to any input like this < input type="text" data-Amount="345" value="345" > later get this data-Amount if the discount gets empty. – Anil Panwar Dec 24 '15 at 17:26
0

The answer depends in what is in response.totalAfterDiscount

Easy solution is to use the or operator ||

.val(response.totalAfterDiscount || response.amount)

BUT the problem with that is the fact if the totalAfterDiscount is zero (could be a 100% off sale) than it would show amount and not the discount.

So next option depends on what totalAfterDiscount holds when there is no discount.

If it holds an empty string

.val(response.totalAfterDiscount.length ?  response.totalAfterDiscount : response.amount)

If it is undefined

.val(response.totalAfterDiscount!==undefined ? response.totalAfterDiscount : response.amount)
epascarello
  • 204,599
  • 20
  • 195
  • 236