title: How to display Flask form results on a specific part of the same page
body: <p><strong>CONTEXT</strong></p>
  
  <p>I've created a flask application that contains a form on the homepage. The user is meant to download and re-upload a filled-out template file, then fill out the form. When this form is submitted a python script is invoked on uploaded file on the backend, which finally produces an <code>.html</code> file. </p>
  
  <p><strong>DESIRED RESULT</strong></p>
  
  <p>Originally, I was having this resulting <code>.html</code> file displayed on different URL (via a redirect), but what I'd like instead is for the form to be displayed on the left half of the homepage, and the html result to display right next to it, on the right half of the homepage. </p>
  
  <p>I'm struggling with how to achieve this, especially in specifying where on the page I'd like the results to appear, and suspect I need to use JavaScript (which I am unfamiliar with). I tried the "anchor" approach but that did not work for me either. I'd really appreciate any guidance with this! Thanks :)</p>
  
  <p><strong>CODE</strong></p>
  
  <p><strong>app.py:</strong></p>
  
  <pre><code>def upload():
      if request.method == 'POST':
              if request.form['affiliation'] == "letter":
                  affiliation = "let"
              elif request.form['affiliation'] == "number":
                  affiliation = "num"
  
              proc = subprocess.Popen('python author_script.py {} -m {}'.format(file.filename, affiliation), shell=True, stdout=subprocess.PIPE)
              time.sleep(0.5) #wait for html file to be created before going to the results page.
              return redirect(url_for('upload'))
  
      return render_template('index.html', template_file=app.config['TEMPLATE_FILE'])
  </code></pre>
  
  <p><strong>index.html:</strong></p>
  
  <pre><code>{% extends "layout.html" %}
  
  {% block body %}
  
  &lt;div class="container"&gt;
      &lt;div style="text-align:left"&gt;
        &lt;br&gt;
        &lt;h1&gt;Author List Script&lt;/h1&gt;
      &lt;/div&gt;
      &lt;section id="intro" class="main"&gt;
      &lt;div class="row"&gt;
        &lt;div class="column"&gt;
            &lt;h6&gt;Download the template file below and re-upload with your custom author information&lt;/h6&gt;&lt;br&gt;
            &lt;a href="static/ExampleAuthorList.txt" download="Authors_Template.txt"&gt;&lt;button type="button"&gt;Download&lt;/button&gt;&lt;/a&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
            &lt;form action="" method=post enctype=multipart/form-data&gt;
            &lt;div id="buttonDiv"&gt;
              &lt;p&gt;&lt;input type=file name=file value="Choose File"&gt;
              &lt;p&gt;Mark affiliations with:&lt;/p&gt;
              &lt;input type="radio" name="affiliation" value="number" id="number" class="form-radio" checked&gt;&lt;label for="number" checked&gt;Number&lt;/label&gt;&lt;br&gt;
              &lt;input type="radio" name="affiliation" value="letter" id="letter" class="form-radio"&gt;&lt;label for="letter"&gt;Letter&lt;/label&gt;
              &lt;br&gt;&lt;br&gt;
            &lt;/div&gt;
              &lt;input type=submit value=Upload&gt;&lt;/p&gt;
            &lt;/form&gt;
            &lt;/div&gt;
        &lt;div class="column"&gt;
            &lt;h4&gt;Results&lt;/h4&gt;
            &lt;!-- Where I want the results to appear --&gt;
        &lt;/div&gt;
        &lt;/div&gt;
        &lt;/section&gt;
      &lt;/div&gt;
  
      &lt;!-- Scripts --&gt;
        &lt;script src="js/jquery.min.js"&gt;&lt;/script&gt;
        &lt;script src="js/skel.min.js"&gt;&lt;/script&gt;
        &lt;script src="js/util.js"&gt;&lt;/script&gt;
        &lt;script src="js/main.js"&gt;&lt;/script&gt;
  
  {% endblock %}
  </code></pre>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I understand how to divide the homepage into columns, but I still don't understand how to specify that I want the python-produced <code>.html</code> (called <code>authorList.html</code>) file to display in the <code>Where I want the results to appear</code> part of <code>index.html</code>. </p>
  
  <p>Previously, I had it set up so that the <code>upload</code> route would redirect to the <code>results</code> route, and then the <code>results</code> route simply renders the resulting <code>authorList.html</code>. But how can I specify within a specific part of <code>index.html</code> where I want the template to be rendered? Do I need to do something like <code>&lt;a href="authorList.html"&gt;</code> within <code>index.html</code>?</p>
  
  <p><strong>Previous code</strong> </p>
  
  <pre><code>@app.route("/", methods=['GET', 'POST'])
  def upload():
      if request.method == 'POST':
              if request.form['affiliation'] == "letter":
                 affiliation = "let"
              elif request.form['affiliation'] == "number":
                 affiliation = "num"
  
              proc = subprocess.Popen('python author_script.py {} -m {}'.format(file.filename, affiliation), shell=True, stdout=subprocess.PIPE)
              time.sleep(0.5) #wait for html file to be created before going to the results page.
              return redirect(url_for('results'))
      return render_template('index.html', template_file=app.config['TEMPLATE_FILE'])
  
  @app.route('/results')
  def results():
      return render_template('authorList.html')
  </code></pre>
  
  <p><strong>UPDATE 2: MY ATTEMPT</strong></p>
  
  <p>I tried using a JQuery function to include the <code>authorList.html</code> within <code>index.html</code> (based on this question here: <a href="https://stackoverflow.com/questions/8988855/include-another-html-file-in-a-html-file">Include another HTML file in a HTML file</a>), but when I press the "Upload" button, the Results section of my homepage is still blank. Maybe the redirect is somehow messing things up?</p>
  
  <p><strong>app.py:</strong></p>
  
  <pre><code>def upload():
      if request.method == 'POST':
              if request.form['affiliation'] == "letter":
                  affiliation = "let"
              elif request.form['affiliation'] == "number":
                  affiliation = "num"
  
              proc = subprocess.Popen('python author_script.py {} -m {}'.format(file.filename, affiliation), shell=True, stdout=subprocess.PIPE)
              time.sleep(0.5) #wait for html file to be created before going to the results page.
              return redirect(url_for('upload'))
  
      return render_template('index.html', template_file=app.config['TEMPLATE_FILE'])
  </code></pre>
  
  <p><strong>index.html:</strong></p>
  
  <pre><code>{% extends "layout.html" %}
  
  &lt;head&gt;
  
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;script src="jquery.js"&gt;&lt;/script&gt; 
    &lt;script&gt; 
      $(function(){
        $("#includedContent").load("authorList.html"); 
      });
    &lt;/script&gt; 
  
  &lt;/head&gt;
  
  {% block body %}
  
  &lt;div class="container"&gt;
    &lt;div class="row"&gt;
  
      &lt;div class="col-sm-6"&gt;
  
  &lt;div style="text-align:left"&gt;&lt;br&gt;&lt;h1&gt;Author List Script&lt;/h1&gt;&lt;/div&gt;
  
      &lt;/div&gt;
  
  
      &lt;div class="col-sm-6"&gt;
  
         &lt;section id="intro" class="main"&gt;
      &lt;div class="row"&gt;
        &lt;div class="column"&gt;
            &lt;h6&gt;Download the template file below and re-upload with your custom author information&lt;/h6&gt;&lt;br&gt;
            &lt;a href="static/ExampleAuthorList.txt" download="Authors_Template.txt"&gt;&lt;button type="button"&gt;Download&lt;/button&gt;&lt;/a&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
            &lt;form action="" method=post enctype=multipart/form-data&gt;
            &lt;div id="buttonDiv"&gt;
              &lt;p&gt;&lt;input type=file name=file value="Choose File"&gt;
              &lt;p&gt;Mark affiliations with:&lt;/p&gt;
              &lt;input type="radio" name="affiliation" value="number" id="number" class="form-radio" checked&gt;&lt;label for="number" checked&gt;Number&lt;/label&gt;&lt;br&gt;
              &lt;input type="radio" name="affiliation" value="letter" id="letter" class="form-radio"&gt;&lt;label for="letter"&gt;Letter&lt;/label&gt;
              &lt;br&gt;&lt;br&gt;
            &lt;/div&gt;
              &lt;input type=submit value=Upload&gt;&lt;/p&gt;
            &lt;/form&gt;
            &lt;/div&gt;
        &lt;div id="includedContent" class="column"&gt;
            &lt;h4&gt;Results&lt;/h4&gt;
        &lt;/div&gt;
        &lt;/div&gt;
        &lt;/section&gt;
  
  
      &lt;/div&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;
  
  {% endblock %}
  </code></pre>