scroll to form on error

[brian]

I have form that is toward the bottom of a web page. If someone
submits some bad data, I want the page to scroll to the form.
Currently if the data is bad, I can see the page get refreshed and the
browser scrolls to the top of the screen. When I get an error in a
submitted form, how do I get it to scroll to the form?

I found this [1] where it scrolls after the form is submitted. I only
want it to scroll when the form has an error. After the form is
submitted successfully, I redirect to a thank you page.

One idea I had in the view was to do something like:
-------------------------
if form.is_valid():
….
else:
return HttpResponseRedirect(request.path + '#formId')
-------------------------
The form doesn't show the error fields when I do this. Also this
seems to break the MTV model since I putting the div id in the view.

Brian

[1] http://stackoverflow.com/questions/3036273/django-how-do-i-position-a-page-when-using-django-templates

[doniyor]

cannot you 'redirect' to the whole url like this:

if form.is_valid():
  thank you page

else:

  return redirect('http://www.test.com/form#filled') 

or you can also redirect just to /form#form/ i think... 

[Michael da Silva Pereira]

Few things you could do, but I think this is more of a browser / JS related topic than django.

1.) Post the form to an iframe, and in the iframe return javascript code to redirect or throw error about form content.

2.) Make the form post ajax based (bit harder, with csrf) and as above have the page act accordingly.

3.) Recommended - Use html bookmarks, put a book mark on the page with the form (on the top of the form would probably work). When redirecting back to the form page link to the book mark. (http://www.example.com/submit_form/#theform)

Either way should work, but just thinking off the top of my head 

-- Mike

--
You received this message because you are subscribed to the Google Groups "Django users" group.
To post to this group, send email to django...@googlegroups.com.
To unsubscribe from this group, send email to django-users...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/django-users?hl=en.

Tradepage, now part of the Cloud Group, is an Authorised Google Apps for Business Reseller.  For only R450 per user per year, get Business Email, Calendars, Documents, syncing with mobile devices and much more. Find out more: http://www.tradepage.co.za/google-apps-for-business

This email and all contents are subject to the following disclaimer:

http://www.tradepage.co.za/disclaimer

[brian]

The redirect method isn't working. I use middleware to insert a form
into the context for each page. When I try to redirect with a
fragment identifier, then the page scrolls but I don't see the form
errors. If I remove the error form redirect then I see the errors but
this removes the scroll.

Here is my code:
---------------------------------------------------------------
class reqInfoMiddleWare(object):
"""
inserts the req info form in content and also handles form
processing

based on: http://stackoverflow.com/questions/2734055/putting-a-django-login-form-on-every-page
"""

def process_request(self, request):
if request.method == 'POST':

form = forms.reqInfo(request.POST)

if form.is_valid():
form.save()

return HttpResponseRedirect('/thanks')

else:
#if error then scroll to where the form is
return HttpResponseRedirect(request.path +
'#learnMoreId')

else:
form = forms.reqInfo()

# attach the form to the request so it can be accessed within
the templates
request.req_info_form = form

---------------------------------------------------------------

With this, I see the scroll but my form errors aren't being shown. In
my form template I have <{% if form.errors %}>.

If I comment out the line < return HttpResponseRedirect(request.path +
'#learnMoreId')> and the else before it, then I get the scroll but I
don't get the form errors.

I'm developing on Django 1.3.

I don't want to use the iframe since it is going to make resizing the
form for errors difficult. I prefer to stay away from javascript and
ajax if possible. I also thought redirect with just a url was a
shortcut for HttpResponseRedirect so it does the same thing.

Thank you for your help!!!!!!

Brian

[Michal Petrucha]

On Sat, May 12, 2012 at 07:51:01AM -0700, brian wrote:
> The redirect method isn't working. I use middleware to insert a form
> into the context for each page. When I try to redirect with a
> fragment identifier, then the page scrolls but I don't see the form
> errors. If I remove the error form redirect then I see the errors but
> this removes the scroll.
>
> Here is my code:
> ---------------------------------------------------------------

[...]

> ---------------------------------------------------------------
>
> With this, I see the scroll but my form errors aren't being shown. In
> my form template I have <{% if form.errors %}>.
>
> If I comment out the line < return HttpResponseRedirect(request.path +
> '#learnMoreId')> and the else before it, then I get the scroll but I
> don't get the form errors.

Well, since HTTP is stateless, errors can only be shown in the exact
response to the request in which the form is submitted. If the request
is GET, obviously the form won't contain any errors.

Now let's look at what happens if a user submits the form to your
view. When the form is invalid, instead of redisplaying it, you return
a redirect response. When the browser gets a redirect, it loads
request.path + "#learnMoreId" with a GET request and the form data is
completely lost.

In other words, only return a redirect on success, not on failure.

You might have more luck setting the "action" attribute in your HTML
form to "#learnMoreId", though I'm not sure this will work; you'll
have to try that yourself.

Michal