Hello,
I have been thinking about a problem a bit, found a pretty nice
solution and would like to know, what others think of it and if there
are downsides I have forgotten about.
Starting point is a form, that has dynamically generated parts. In my
example, I generate a form from a model via ModelForm. Then I
dynamically add many-to-many-forms. So the actual html form is
combined of an unknown number of many-to-many forms.
Therefor I can not use FormPreview, because there is no static class
to inherit from FormPreview.
Okay, so I was at a point, where the form was genereated, rendered to
html, had a submit button, click on it, form gets processed and data
is saved. Now I had to integrate the preview page.
I thought about hidden fields and keeping form data in the user
session, but dismissed the ideas, because bounding the forms seemed to
complicated.
The idea of my solution is basically to always show the form, but hide
it via JavaScript and show a preview instead, if the data was found to
be valid. I'm going to try to sketch the flow.
-> First opening of form (method=get)
-> Submitting form with submit button 1 (method=post)
if not valid: show form again with error messages
if valid:
if submitted with submit button 1:
show preview with submit button 2
hide form
if submitted with submit button 2:
process form and redirect
The hiding of the form is done in the template. The structure looks
something like this:
<form action="." method="post">
{% if preview %}
<div id="preview_box" style="display:block">
# show form data with form.cleaned_data.name
<input type="submit" name="submit_2">
<input type="submit" id="edit_button" style="visibility:hidden"
onclick="document.getElementById
('preview_box').style.display='none';
document.getElementById
('registration_form_box').style.display='block';
return false;">
</div>
{% endif %}
<div id="form_box">
{% if preview %}
<script type="text/javascript">
document.getElementById('form_box').style.display='none';
document.getElementById('edit_button').style.visibility='visible';
</script>
{% endif %}
# show form and errors and so on
<input type="submit" name="submit_1">
</div>
</form>
So when somebody clicks on the submit_2 button, the normal form gets
posted regularly again, gets checked again, will be found valid and be
processed, because it got submitted by button_2. If someone
manipulates the hidden form, it just gets checked normally as if it
was a normal submission. No problem.
When somebody clicks the edit button, the preview box gets hidden and
the form is shown.
The only somehow evil hack thing is the javascript in the form_box. I
have done this, to also make the form available to browser that do not
support javascript. If javascript is not supported (or deactivated by
the user), the edit button does not appear and the form_box does not
get hidden, so it is still usable. If you do not care for javascript-
less user, you can just leave out the java-script part and alter the
form_box div to
<div id="form_box" {% if preview %} style="display:none" {% endif %}>
I have only tested this on Firefox and Safari and actually do not want
to touch Internet Explorer ;)
Of course, css and javascript should be put into external files.
Maybe this helped some people. I am curious about opinions.
Cheers,
Johan
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Django users" group.
To post to this group, send email to django-users@googlegroups.com
To unsubscribe from this group, send email to
django-users+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/django-users?hl=en
-~----------~----~----~----~------~----~------~--~---
