CODEWITHSUNDEEP
pythonflaskwtformsreplit
Math Noob
Math Noob

Reputation: 85

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

Upvotes: 1

Views: 1062

Answers (1)

weijiang1994
weijiang1994

Reputation: 331

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.

Upvotes: 3

Related Questions