JQuery key-up/ajax bug

Question

У меня есть страница, где клиенты могут указать количество продуктов, которые они хотели бы заказать. Поэтому я использовал функцию ключа вверх Jquery в сочетании с AJAX скрипт:

<input type="text" class="number" data-product_id="1"> 
<input type="text" class="number" data-product_id="2"> 
<input type="text" class="number" data-product_id="3"> 

т.д.

<script> 
$(function() { 
    $("input.number").keyup(function() { 
     $.post("number.php", { product_id: $(this).data('product_id'), number: $(this).val() }, function(data){ if (data != "1") { alert('Error occurred'); } }); 
    }); 
}) 
</script> 

В принципе, эта система работает хорошо. Цифры временно хранятся через сеанс PHP и будут обрабатываться позже. Но есть проблема: есть несколько полей ввода (> 500), и пользователи вводят количество элементов, которые они хотели бы заказать очень быстро с помощью кнопки табуляции. Я узнал, что не все номера хранятся правильно, если пользователи вступают в нее очень быстро, несмотря на то, что файл number.php действительно мал по размеру, только строка $_SESSION[$_POST['product_id']] = $_POST['number']; находится в файле.

Есть ли какие-либо решения для проверки всех полей?

Answer 1

$(function() { 
    $("input.number").keyup(function() { 
    var that = $(this); 
    that.addClass('loading'); 
    $.post(
     "number.php", 
     { product_id: $(this).data('product_id'), number: $(this).val() }, 
     function(data) { 
     that.removeClass('loading').removeClass('failed'); 
     if (data != that.val()) { 
      that.addClass('failed'); 
     } 
     } 
    ); 
    }); 
}); 

В основном добавить класс failed если возвращаемое значение не совпадает со значением входного сигнала. Это предполагает, что number.php возвращает сохраненное значение, конечно. Вы можете позже проверить поля ввода с классом failed.