Javascript/AJAX current input on AJAX success function

Question

I'm writing a feature on a online electrical appliance shop. I've got the current order modeled, but got some problems with this Javascript code. It's supposed to change the color on an input if the real stock (on a database, what is controlled by the /api/GetStockArticle servlet) is lower than the current number on an input. I'm adding this event to all the inputs that i can have, which are dynamic, as it depends on the number of lines that my current order has.

    window.onload = function () {
        var inputs= document.getElementsByClassName("quantity");
        for (var i = 0, n = inputs.length; i < n; i++) {
            inputs[i].addEventListener("change", getStock, false);
        }
    }
        function getStock(evt) {
            $.ajax("../api/GetStockArticle", {
                data: {'cart': evet.target.id},
                dataType: 'text',
                cache: false,
                success: checkStock,
                error: function (xhr, status, ex) {
                    alert("Error (" + xhr.status + "):" + status);
                }
            });
        }
        function checkStock(stock) {
            //var input = document.getElementsByClassName("quantity");
            if (stock < input[0].value) {
                input[0].style.color = "#C02C11";
            } else {
                input[0].style.color = "black";
            }
        }

My main problem here is that, inside the checkStock function (which is the success function) i want to refer the same input which value changed, and i've got no idea on how to do that. Am i not properly guiding my code?

Jonas Wilms · Accepted Answer · 2018-05-18 15:24:53Z

At first prepare your function to take the input as a parameter:

function checkStock(input, stock) {
  if (stock < input.value) {
      input.style.color = "#C02C11";
  } else {
      input.style.color = "black";
  }
}

And then just bind it when passing it as a callback:

success: checkStock.bind(null, evt.target)

Alternatively you could use currying or you could make use of the scope and closures:

function getStock(evt) {
        const input = evt.target;

        $.ajax("../api/GetStockArticle", {
            data: {'cart': evet.target.id},
            dataType: 'text',
            cache: false,
            success: function(stock) {
              if (stock < input.value) {
                input.style.color = "#C02C11";
              } else {
                input.style.color = "black";
              }
            },
            error: function (xhr, status, ex) {
                alert("Error (" + xhr.status + "):" + status);
            }
        });
    }

Collectives™ on Stack Overflow

Javascript/AJAX current input on AJAX success function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related