Search code examples
pythonflaskwtformsreplit

Multiple submit button in a single page using flask and wtforms


I am writing a costom 404 handling page and need three button("Go back to the previous page";"Go to Home";"Visit our Help Center"), however I ran into some trouble, here is what I came up with and the problem I want to solve

My 404.HTML

{% extends "layout.html"%}
{% block content %}
  <h1>OOF</h1>
  <p>We are sorry, but you have reached this page in error.</p>
  <p>Please try the action again and if the problem continues, contact Customer Support.</p>
  <p>404 Error - Document not found</p>
  
    <form method="POST" action="">
      {{ form.hidden_tag() }}
      <fieldset class="form-group">
        <legend class="border-bottom mb-4"></legend>
        
        
      </fieldset>
        {{ form.submit(class="btn btn-outline-info") }}
        {{ form.submit(class="btn btn-outline-info") }}
        {{ form.submit(class="btn btn-outline-info") }}
    </form>
    
{% endblock content %}

My forms.py

class PreviousPage(FlaskForm):
  submit = SubmitField("Go back to the previous page")
  submit = SubmitField("Go to Home")
  submit = SubmitField("Visit our Help Center")

My routes.py(main function)

@app.errorhandler(404)
def page_not_found(e):
  form=PreviousPage()
  if form.validate_on_submit():
    return redirect(url_for('home'))
  return render_template('404.html',form=form)

Here is what I got A picture of my 404 page

The button lays out perfectly as what I expected but the text on the button is incorrect, as it all prints out the text for the last button. Another problem I faced is don't know how to modify my routes.py file so those three button could redirect the users to three identical page.

Thanks


Solution

  • form.py

    class PreviousPage(FlaskForm):
      submit_pre = SubmitField("Go back to the previous page")
      submit_home = SubmitField("Go to Home")
      submit_help = SubmitField("Visit our Help Center")
    

    404.HTML

    {% extends "layout.html"%}
    {% block content %}
      <h1>OOF</h1>
      <p>We are sorry, but you have reached this page in error.</p>
      <p>Please try the action again and if the problem continues, contact Customer Support.</p>
      <p>404 Error - Document not found</p>
      
        <form method="POST" action="">
          {{ form.hidden_tag() }}
          <fieldset class="form-group">
            <legend class="border-bottom mb-4"></legend>
            
            
          </fieldset>
            {{ form.submit_pre(class="btn btn-outline-info") }}
            {{ form.submit_home(class="btn btn-outline-info") }}
            {{ form.submit_help(class="btn btn-outline-info") }}
        </form>
        
    {% endblock content %}
    

    Now, the first problem is solved.

    @app.errorhandler(404)
    def page_not_found(e):
        form = PreviousPage()
        if form.validate_on_submit():
            if form.submit_pre.data:
                return redirect(url_for('pre_page'))
            if form.submit_home.data:
                return redirect(url_for('home_page'))
            if form.submit_help.data:
                return redirect(url_for('help_page'))
        return render_template('404.html', form=form)
    

    And now, the second problem is solved.