使用+增加计数器并将值存储到数据库

I'm going to create a counter that counts from 0 to 100 one step at the time when the user presses the + button on a numpad.

The purpose of this is to create a store counter (we're showing the current customer number on a display and I want this to become web-based). So I am using jQuery and I want the current number to be stored in a MySQL database as well.

How would I go about to do this? I would like to not use forms, but if I have to I will. I have tried a few solutions but none that are really usable. The problem is that I don't have enough understanding of jQuery. So a few pointers in the right direction would be nice.

I would like the flow to be like this:

I have an element that contains a number that I will fetch from the database, so far so good, I can definately do that myself. However, then the user presses + on the numpad I want this value to increase with 1. Then I want the script to store this new value in the database and get the new value from the database and present it in the element again.

As I said, I would much appreciate a few pointers with this. Perhaps I am overthinking it.

I'm using PHP by the way.

So, you need to handle the "+" button being clicked, and make an AJAX call. Something like:

http://jsfiddle.net/QE3xd/1/

HTML:

<input type="text" id="current" readonly="readonly" value="2" />
<input type="button" id="increaser" value="+" />

Javascript:

$(document).ready(function () {
    $("#increaser").on("click", add);
});

function add() {
    // Make AJAX call to PHP method (where DB operation is done)

    $.ajax({
        url: "/echo/json/",
        cache: false,
        data: {"increment_by": 1},  // This line may be unnecessary, as you could assume it increases the value by 1 every time (but using this could make it customizable
        dataType: "json",
        success: function (data) {
            // Should return data in format: {"new_current": 4}
            //$("#current").val(data.new_current);
            // ^^ the real line
            $("#current").val(+$("#current").val()+1);
            // ^^ just to simulate the new number being returned
        },
        error: function () {
            console.log("there was an error");
        }
    });
}

What you are describing is a typical MVVM problem. A user interface with a button and a display element that interact.

I had some good experience solving this kind of problems with the knockoutjs library in combination with jquery. In the tutorials is a example with a counter, just like yours.

The 2 other requirements (detection of the numpad key and posting) can be easy solved with a keypress plugin and jquery $.post