Disclaimer: I am new to python and django but have programmed in Drupal
I am developing a web-based Wizard (like on Microsoft Windows installation screens) with explanatory text followed by Previous and Next buttons (which are big green left and right arrows). So far, so good.
However, my current Wizard page (in project.html, loaded by my django apps views.py) now uses a form (instance of ModelForm) which asks the user to type in a “project” name, such as My Project. Normally, such an HTML form would use a Submit button, but because this is a Wizard, I need the Next button to act as the Submit button, hiding the Submit button entirely. Also, the arrow icons appear after the form ends.
How would you do this? Sure, I could use jquery, but is there a better pythonic or django way?
Some code:
#project.html
{% extends "base.html" %}
{% load i18n %}
<h3><span>{% trans 'Project details' %}</span></h3>
<p>{% trans 'What is the name of this project?' %}
<form method="post" action="">
{{ form.as_table }}
<input type="submit" value="Submit"/>
</form>
</p>
{% endblock %}
{% block buttonbar %}
<a href="/"><img src="/static/img/Button-Previous-icon-50.png" width="50" height="50" alt="Previous"><span>{% trans 'Previous' %}</span></a>
<a href="/profile"><img src="/static/img/Button-Next-icon-50.png" width="50" height="50" alt="Next button"><span>{% trans 'Next' %}</span></a>
{% endblock %}
Thanks!
You might want to use the Django Form wizard, in this case:
https://docs.djangoproject.com/en/dev/ref/contrib/formtools/form-wizard/