CODEWITHSUNDEEP
pythonajaxflask
RL1
RL1

Reputation: 23

Ajax after form submit

How do you do an ajax post after a successful submit form post. I want to take the input submitted on the form, do some calculations based on that input, and display the results on the front-end without the page refreshing.

FLASK

@app.route('/', methods=['GET', 'POST'])
def app_home():
    if request.method == 'POST':
        input_amount = request.form['input_amount']
        input_amount = float(input_amount)

        amount1 = input_amount * 12
        amount2 = input_amount * 10

        return render_template("index.html", amount1=amount1,amount2=amount2,)

    return render_template("index.html")

if __name__ == '__main__':
    app.run(debug=True)

index.html

    <form method="post">
        <div class="mb-3">
            <label>Enter amount</label>
            <input name = "input_amount" type="text" class="form-control" placeholder="amount">
        </div>
        <button type="submit" class="btn btn-success">Submit</button>
    </form>

    
    <div class="container">
        <p id = "response">result is: ${{amount1}}</p>
        <p id = "response">result is: ${{amount2}}</p>
    </div>

AJAX request

<script>
   $(document).ready(function () {
        $('form').on('submit', function (event) {
            $.ajax({
                data: { input_amount : input_amount},
                type: 'POST',
                url: '/'
            })
                .done(function (data) {
                    $('#response').text(data.output).show();
                    
                });
            event.preventDefault();
        });
    });
</script>

Upvotes: 1

Views: 402

Answers (1)

LuisSilva
LuisSilva

Reputation: 234

As per the documentation the correct way is not using a form. Truth be told you don't want to submit a form right? You just want to pass the input values.

So I tried out the documentation code (since i'm also studing this "ajax + flask connection" for my app) and this should answer your question. Made a button class since you (and I) prefer button to a link.

app.py

from flask import Flask, jsonify, render_template, request
app = Flask(__name__)

@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)

@app.route('/')
def index():
    return render_template('index.html')

if __name__ == '__main__':
   app.run(debug = True)

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
      $SCRIPT_ROOT = {{ request.script_root|tojson }};
    </script>

    <title>Document</title>

    <style>
      .button {
        background-color: #5b4caf;
        border: none;
        color: white;
        padding: 0.75rem 0.75rem;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 14px;
        border-radius: 3px;
      }
    </style>
  </head>
  <body>
    <h1>jQuery Example</h1>
    <p>
      <input type="text" size="5" name="a" /> +
      <input type="text" size="5" name="b" /> = <span id="result">?</span>
    </p>

    <p>
      <a href="#" id="calculate" class="button">Calculate server side</a>

      <script>
        $(function () {
          $("a#calculate").bind("click", function () {
            $.getJSON(
              $SCRIPT_ROOT + "/_add_numbers",
              {
                a: $('input[name="a"]').val(),
                b: $('input[name="b"]').val(),
              },
              function (data) {
                $("#result").text(data.result);
              }
            );
            return false;
          });
        });
      </script>
    </p>
  </body>
</html>

Upvotes: 1

Related Questions