title: How to display a returned input in Flask using Ajax?
body: <p>I've made a simple Flask project with one input and this input has to be returned on the main page with AJAX.</p>
  
  <p>my Html code:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
      &lt;body&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="{{ url_for('static', filename='script.js') }}"&gt;&lt;/script&gt;    
     &lt;div&gt;        
          &lt;div id="questionary"&gt;
              &lt;form action='/process' method="POST" autocomplete="off"&gt;
                  &lt;div&gt;
                      &lt;input type="text"  name="question" id = "question" placeholder="Une question?"&gt;
                      &lt;button type="submit"&gt; Pose ta question :) &lt;/button&gt;
          &lt;/div&gt;
              &lt;/form&gt; 
      &lt;/div&gt;
          &lt;div&gt;
      &lt;p id="response"&gt;&lt;/p&gt;
      &lt;/div&gt;        
      &lt;/body&gt;    
  &lt;/html&gt;
  </code></pre>
  
  <p>my Ajax:</p>
  
  <pre><code>$(document).ready(function() {
      $('form').on('submit', function(event) {       
        $.ajax({
           data : {
              question : $('#question').val(),            
                  },
              type : 'POST',
              url : '/process'
             })           
         .done(function(data) {                 
          $('#response').text(data.output).show();        
       });
       event.preventDefault();
       });     
  });
  </code></pre>
  
  <p>My Flask:</p>
  
  <pre><code>from flask import Flask, render_template, request, jsonify 
  import json
  
  app = Flask(__name__)
  
  @app.route('/')
  def homepage():
      return render_template('main.html')
  
  @app.route('/process', methods=['POST'])
  def process():          
      user_question = request.form['question']
      print(user_question)   
      return jsonify({'response' : user_question})
  
  if __name__ == '__main__':
      app.run                 
  </code></pre>
  
  <p>Ajax is in /static, html in /templates. 
  Desired output is the question asked displayed under the form. </p>