AJAX + Flask update server request when filling form
Question: On the Flask website there's a tutorial on how to use AJAX and this an example
to display the sums of two numbers.

This is the python app from flask import Flask, render_template, request,
jsonify

    
    
    # Initialize the Flask application
    app = Flask(__name__)
    
    
    @app.route('/')
    def index():
        return render_template('index.html')
    
    @app.route('/_add_numbers')
    def add_numbers():
        a = request.args.get('a', 0, type=int)
        b = request.args.get('b', 0, type=int)
        return jsonify(result=a + b)
    
    if __name__ == '__main__':
        app.run(
            host="0.0.0.0",
            port=int("80"),
            debug=True
        )
    

This is the HTML file

    
    
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"
              rel="stylesheet">
      <script type=text/javascript>
        $(function() {
          $('a#calculate').bind('click', function() {
            $.getJSON('/_add_numbers', {
              a: $('input[name="a"]').val(),
              b: $('input[name="b"]').val()
            }, function(data) {
              $("#result").text(data.result);
            });
            return false;
          });
        });
      </script>
      </head>
      <body>
        <div class="container">
          <div class="header">
            <h3 class="text-muted">How To Manage JSON Requests</h3>
          </div>
          <hr/>
          <div>
          <p>
        <input type="text" size="5" name="a"> +
        <input type="text" size="5" name="b"> =
        <span id="result">?</span>
        <p><a href="javascript:void();" id="calculate">calculate server side</a>
          </form>
          </div>
        </div>
      </body>
    </html>
    

I see that with this example one is able to send a request to the server every
time one clicks on the link, however, I would like to know if it's possible to
skip this step and get the request overtime the text inputted by the user
changes.


Answer: Yes. It's wasteful of resources, but you could change

`$('a#calculate').bind('click', function() {` to

`$('input[name="a"]').change(function() {`

And do the same for input `b`

* * *

# Edit:

And, to test AS YOU TYPE:

`$('input[name="a"]').on('input',function(e){`

or:

`$('input[name="a"]').keyup(function(e){`

