JQuery onChange get previous value

Question

Does anyone know how I can retrieve the previous quantity value before it is set in the onChange command here?

I'm currently using this for a input box. The CSS is what's giving me trouble

When I change the value it's easy to set the new quantity and new total cost. However when I press down I can't get it to compare the previous quantity with the new quantity to see if the quantity value has been increased or decreased

The JQuery is below -

$('#p1').on('change', function() { 
        var cost = $('#p1_price').text();
        var quantity = $('#p1').val();
        var total = cost * quantity;
        total = parseFloat(total).toFixed(2)
        $('#p1_total').text(total);
        $('#total_price').text(+$('#total_price').html() + +cost);
    });

Can anyone shed some light on the matter. Would be greatly appreciated it!

Except I have multiple products, if I do that i'm going to have to set like 60 variables. You mean just above it right? My JQuery knowledge is only recent. So please excuse my ignorance :) — Azy Sır, Jul 30 '16 at 05:13
Is there a way you could call a function every time you press the down arrow? — Luis Deras, Jul 30 '16 at 05:43

score 3 · Answer 1 · answered Jul 30 '16 at 05:32

This is what I've used as I focus on the input box it stores the previous value. When its changed the previous value is still set. I originally did not think of using focus like this I did it the other way around but once reading this quote it made lots of sense!!

(function () {
    var previous;

    $("#p1").on('focus', function() {
        previous = this.value;


    }).change(function() {

        alert(previous);
        previous = this.value;
    });
})();

score 2 · Answer 2 · edited Jul 31 '16 at 11:43

2

You may need it store somewhere and for that rather than setting any input variable you can use <select> drop down itself and set data-last-value="43" on select tag where you can store your currently set value and such data could be accessible in jQuery like $(this).data( "last-value" );

Ref.for data - https://api.jquery.com/data/

edited Jul 31 '16 at 11:43

Mr Lister

45,515
15
108
150

answered Jul 30 '16 at 05:23

Rupal Javiya

591
5
14

1

Surely there's a better way. What happens if I used more AJAX.. If I had set the total in an AJAX file can i return the file from the ajax file and update the current page? – Azy Sır Jul 30 '16 at 05:27
1

What you mean by return a file from ajax file? and yes you can always edit the current page content via jQuery and ajax – Rupal Javiya Jul 30 '16 at 05:29
1

I meant a value*** – Azy Sır Jul 30 '16 at 05:34
1

No you can not return from ajax event handler, rather than you may set or change HTML DOM value directly from those event handler function (ie. on success or complete event, you may manipulate DOM) – Rupal Javiya Jul 30 '16 at 05:36
1

Ah yes ofcourse :) I'm just learning it and I've learnt heaps from just these comments. Have you by any chance got any useful links that might be worth looking at for a beginner of ajax ? – Azy Sır Jul 30 '16 at 06:01

score 1 · Accepted Answer · answered Jul 30 '16 at 05:46

I'm thinking... Array in an object!

You could have an array defined in a javascript object

var inputObj = 
{
    var index : -1; //When the input has nothing so far
    var values : [];
};

And then everytime the input changes

$('#p1').on('change', function() { 
        var cost = $('#p1_price').text();
        var quantity = $('#p1').val();
        var total = cost * quantity;
        total = parseFloat(total).toFixed(2)
        $('#p1_total').text(total);
        $('#total_price').text(+$('#total_price').html() + +cost);

        //Add a new value to the array and refresh the index  of the current value
        inputObj.values.add(total);
        inputObj.index = inputObj.values.length + 1;
    });

And everytime you press the down button:

function pressDown()
{
    inputObj.index  = inputObj.index - 1;
    $('#p1_total').text(inputObj.values[inputObj.index]);
}

score 0 · Answer 4 · answered Jul 31 '16 at 18:08

0

Before you change the value, you can Store the values in input, in a JavaScript global variable (remove the var before variable name) or in cookies.

answered Jul 31 '16 at 18:08

marcollahc

46
1
6

JQuery onChange get previous value

4 Answers4