When making a form that submits asynchronously without reloading the page, I usually have the form disappear and something else appear in its place, such as a message that says "Form submitted successfully" or something like that.

The idea is that the user should know that the form is submitted, and I hide the form to prevent him from hitting "submit" again.

I also want the user to know what happens after. So for instance, if it's an in-line post editing form, then I replace the form with the post itself. If it's a contact form, I display a summary of what happened, or maybe the message that was sent.

The problem is:

If the browser is scrolled down so that the "submit" button appears almost at the top of the screen, then, the user experience becomes a bit odd because the content that replaces the form is not immediately visible/obvious; the user has to scroll up in order to see it, and until he figures that out, he'll probably be confused, wondering what happened to the form.

Has anyone ever come across this issue? How do you solve it?

EDIT

I forgot to mention:

  • I already disable the button and make it say "please wait ...", but I must re-enable it again after it's done.
  • The problem with disabling the entire form, or even keeping the button disabled, is that if you refresh the page, at least in firefox, the button will still be disabled. Now, I don't know how much would this bother a normal user, but as a developer, it bothers me because I need to test the form some more and that's kinda hard to do when things are disabled. Yes, I thought about adding a "re-enable" button, but I think it would make thing needlessly complicated.
  • I considered using an anchor, but the problem with that is it changes the behaviour of the browsers' back buttons.

Finally, the most important point in all of this, the audience of the website are very average people who are not technical at all. So it's important that they don't try to resubmit the form again, because I know if they don't understand what happened, they will try again. If they don't understand why the form is disabled, they will get frustrated.

4 answers

3
points
This was chosen as the best answer

Edwards answer is good, although I would disagree that it doesn't happen very often. I think it happens more than we (designers) would think because a lot of people have much smaller screens that we do.

So as Edward said, adding a location.href='#my_anchor' to your onsubmit or onclick is one way.

Another possibility is to get the browser to scroll to the top of the form. Here is that done with jQuery:

?var targetOffset = $('form#formId').offset().top - 200; // go 200 px above the form
$('html,body').animate({scrollTop: targetOffset}, 0);
Answered about 8 years ago by Darryl Hein
4
points

I don't think this is as much of a problem as you may think, as most people will probably expect something to happen in place of the form, but as it's best to try and cover every eventually, you could add this code to the submit button:

onclick="location.href='#my_anchor'"

Like so:

<input type="submit" name="submit" value="Submit" onclick="location.href='#my_anchor'" />

And create the corresponding anchor at the point you wish the visitor to be taken to after they submit, i.e. the div that the ajax response is inserted into. You could then use the jQuery localscroll plug-in to make the movement smoother.

Answered about 8 years ago by Edward Williams
Alex Holt 341
3
points

the other option is.. rather than replacing the form:

  1. make it grey out (ie: add a class to the form that makes all the content inside it duller or visually different)
  2. make the submit button disabled OR change it's text to say , "Saving your data" or something like that.
  3. display a message AFTER the form has finished submitting.

This way, the content does not change size, so the user will have to see the feedback (ie: if you can click the button, you can see the message)

Answered about 8 years ago by Alex Holt
2
points

You could display a modal dialogue box (lightbox style message) that greys out the visible area and stops users from interacting with the page until they have dismissed it. The content of the dialogue would describe the action taken by submitting the form and, being modal, it would not rely on any part of the form being visible.

Try the JQuery UI Modal Message for size.

Answered about 8 years ago by James Spencer