BadRequestKeyError with Flask

Question

I've looked at all the other questions asked about this error but either the solutions don't work or I already do what the solution says to do. My app.py code:

@app.route("/", methods=["POST", "GET"])
def index():
    if request.method == "POST":
        article_content = request.form["article_content"]
        threshold_val = request.form["threshold_input"]
        predictionCount = request.form["prediction_count"]

HTML Code:

<div>
    <div>
      <form action="/" method="POST">
        <input class="Input-Box" type="text" name="article_content" />
        <br />
        <br />
        <input type="submit" value="Find Systems" />
      </form>
    </div>
    <div class="Settings">
      <div style="align-items: center; display: inline-block;">
        <h6>Threshold Value(0-1.0):</h6>
        <form action="/" method="POST">
          <input type="text" name="threshold_input" />
        </form>
      </div>
      <div style="align-items: center; display: inline-block;">
        <h6>Number of predictions(1-24):</h6>
        <form action="/" method="POST">
          <input type="text" name="prediction_count" />
        </form>
      </div>
    </div>
  </div>
</div>

Interestingly enough, Flask has no issues getting input from "article_content" but throws a fit for "threshold_input" and "prediction_count". I check for a POST method, I've set the HTML form to be a POST method, and I made sure the names for the HTML element and the text in the request.form function are the same. Any help would be appreciated. The traceback is below:

Traceback (most recent call last)

    File "/Library/Frameworks/Python.framework/Versions/3.8/lib/python3.8/site-packages/flask/app.py", line 2464, in __call__

    return self.wsgi_app(environ, start_response)

    File "/Library/Frameworks/Python.framework/Versions/3.8/lib/python3.8/site-packages/flask/app.py", line 2450, in wsgi_app

    response = self.handle_exception(e)

    File "/Library/Frameworks/Python.framework/Versions/3.8/lib/python3.8/site-packages/flask/app.py", line 1867, in handle_exception

    reraise(exc_type, exc_value, tb)

    File "/Library/Frameworks/Python.framework/Versions/3.8/lib/python3.8/site-packages/flask/_compat.py", line 39, in reraise

    raise value

    File "/Library/Frameworks/Python.framework/Versions/3.8/lib/python3.8/site-packages/flask/app.py", line 2447, in wsgi_app

    response = self.full_dispatch_request()

    File "/Library/Frameworks/Python.framework/Versions/3.8/lib/python3.8/site-packages/flask/app.py", line 1952, in full_dispatch_request

    rv = self.handle_user_exception(e)

    File "/Library/Frameworks/Python.framework/Versions/3.8/lib/python3.8/site-packages/flask/app.py", line 1821, in handle_user_exception

    reraise(exc_type, exc_value, tb)

    File "/Library/Frameworks/Python.framework/Versions/3.8/lib/python3.8/site-packages/flask/_compat.py", line 39, in reraise

    raise value

    File "/Library/Frameworks/Python.framework/Versions/3.8/lib/python3.8/site-packages/flask/app.py", line 1950, in full_dispatch_request

    rv = self.dispatch_request()

    File "/Library/Frameworks/Python.framework/Versions/3.8/lib/python3.8/site-packages/flask/app.py", line 1936, in dispatch_request

    return self.view_functions[rule.endpoint](**req.view_args)

    File "/Users/usr/Desktop/Projects/Project/Project1/app.py", line 26, in index

    predictionCount = request.form["prediction_count"]

    File "/Library/Frameworks/Python.framework/Versions/3.8/lib/python3.8/site-packages/werkzeug/datastructures.py", line 442, in __getitem__

    raise exceptions.BadRequestKeyError(key)

    werkzeug.exceptions.BadRequestKeyError: 400 Bad Request: The browser (or proxy) sent a request that this server could not understand.
    KeyError: 'prediction_count'

Answer 1

You need to put all your form controls under one form tag and with a submit input inside of it as well. The submit input you're using now is only sending the inputs within its enclosing form tag and not the other form tag.

https://www.w3.org/TR/html4/interact/forms.html#submit-format

<form action="/" method="POST">
  <input class="Input-Box" type="text" name="article_content" />
  <input type="text" name="threshold_input" />
  <input type="text" name="prediction_count" />
  <br />
  <br />

  <!-- This input submits everything inside of this form tag -->
  <input type="submit" value="Find Systems" />
</form>