How do get an HTML form submit (and Python function return) to do nothing using Flask

Question

I am using Flask in a web app form on one HTML page, but spread out across a few 'pages' before submitting.

The first button 'Add animal' will run the run_ME function in my python script, and then continue onto the next page for the user to type in the animal name. My issue is, with Flask, I have to return something in my python function (I cannot return None or omit the return completely), but I do not want clicking 'Add animal' to cause the form to respond in any way, just run the function in Python and show the next page in HTML.

From previous posts, I have added return false to my HTML script at the onClick event. However, this hasn't helped, and return 'False' in my python script (since I have to return something) overrides and gives me a blank page with 'False.'

Relevant code from HTML file:

<div class="section-25">
  <div class="container-5 w-container">
    <div class="text-block-6">Select the level of algorithm you&#x27;re looking to make</div>
    <div class="w-form">
      <form id="wf-form-Email-Form" name="wf-form-Email-Form" data-name="Email Form" method="post" action="">

        <!-- PAGE 1 -->
        <div id="page1" class="page" style="visibility:visible;">

          <!-- ALGORITHM NAME -->

          <label for="Algorithm-Name-3" class="custom-question algorithm-name">What will you name your algorithm?<br></label><input type="text" class="text-field enter-name w-input" maxlength="256" name="Algorithm-Name" data-name="Algorithm Name"
            placeholder="Be as creative as you like!" id="Algorithm-Name">

          <!-- ALGORITHM DESCRIPTION -->

          <label for="Algorithm-Desc-3" class="custom-question algorithm-desc">Briefly describe what your algorithm does?<br></label><input type="text" class="text-field enter-name w-input" maxlength="256" name="Algorithm-Description"
            data-name="Algorithm Description" placeholder="You can still be creative!" id="Algorithm-Desc">
          <p><input type="submit" class="submit-button-2 w-button" id="C1" value="Add Animal" onClick="showLayer('page2'), runFunction(); return false;"></p>
        </div>

        <script>
          mybutton = document.getElementById("C1");

          function runFunction() {
            form.action = "/meta2sql";
            form.submit();
          }
        </script>

        <!-- PAGE 2 (1st ANIMAL) -->

        <div id="page2" class="page">

          <p style="font-family: Poppins,sans-serif; color: #fff;">1st Animal</p>

          <!-- 1ST ANIMAL NAME -->

          <label for="Enter-species" class="custom-question enter-species" id="one_name">What animal are you looking for?</label>
          <input type="text" class="text-field w-input" maxlength="256" name="species1" placeholder="Enter name of animal" id="Enter-species" required="">

          <br><br>

          <p><input type="button" class="submit-button-2 w-button" id="B1" value="Go Back" onClick="showLayer('page1')">
      </form>
    </div>
  </div>
</div>

<!-- JAVASCRIPT -->
<script language="JavaScript">
  var currentLayer = 'page1';

  function showLayer(lyr) {
    hideLayer(currentLayer);
    document.getElementById(lyr)
      .style.visibility = 'visible';
    currentLayer = lyr;
  }

  function hideLayer(lyr) {
    document.getElementById(lyr).
    style.visibility = 'hidden';
  }

  function showValues(form) {
    var values = '';
    var len = form.length - 1;
    //Leave off Submit Button
    for (i = 0; i < len; i++) {
      if (form[i].id.indexOf("C") != -1 ||
        form[i].id.indexOf("B") != -1)
        //Skip Continue and Back Buttons
        continue;
      values += form[i].id;
      values += ': ';
      values += form[i].value;
      values += '\n';
    }
    alert(values);
  }
</script>

Relevant code from Python file:

from flask import Flask, request, render_template, url_for, redirect    

app = Flask(__name__)

@app.route('/run_ME', methods=['GET', 'POST'])
def run_ME():
  # some functions
    return 'False'

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

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

Any advice is appreciated

It will always respond with a HTTP response (status code + payload), Ideally you would render what you called "Next page" and return, or even better, create a http redirection for the "next page" — luigibertaco, Jul 15 '20 at 23:30

score 2 · Accepted Answer · answered Jul 15 '20 at 23:32

2

You're not supposed to return the string "False", but the Boolean value. Actually, if you want to do this 'properly', you'd return server response 204.

You can do this with return Response(status=204) Of course, you must import that class from flask first.

answered Jul 15 '20 at 23:32

THG

312
3
13

Thank you for the suggestion, I had already tried returning the boolean value but received `TypeError: The view function did not return a valid response. The return type must be a string, dict, tuple, Response instance, or WSGI callable, but it was a bool.` – Henrik Jul 16 '20 at 17:55
I did however try `return Response(status=204)`. I tweaked it a little and what worked for me was `return '', 204`. Thank you for your help! – Henrik Jul 16 '20 at 17:56

How do get an HTML form submit (and Python function return) to do nothing using Flask

1 Answers1