Web form usability: Better form submission feedback with jQuery

Reading time: About 1 minute

Browsers fail to give users effective feedback when the user submits a form. Users respond by clicking the submit button over and over. The problem compounds when users find out they’ve been charged 5 times or when you receive 5 contact submissions. Bummer.

The solution is to replace the submit button with a friendly message letting the user know the form is working. See below…

Sweet! How did we do that? jQuery makes it super simple.
1
2
3
4
5
$(function () { // make this code initialize when DOM loads
	$('form').submit(function () { // optional: replace "form" with whatever CSS selector you want (ex: ID or class)
		$('input[type="submit"]', this).replaceWith('<p><strong>Sending...</strong></p>'); // optional: change "Sending..." to something else
	});
});
If you don’t use jQuery already, grab a copy of jQuery and shame yourself for not using it sooner.

Author’s note: People have been commenting that this could be just as easy without jQuery. While this is true, I figured it was better to show how to do it with jQuery because many people are interested in jQuery, and this code snippet gives them an extra idea how jQuery works.

16 comments skip to comment form

Nikhil Sheth said— 2 hours later

Hi,

Its a nice thing to do but we don’t need jquery for doing such simple functionality.
Simple 2 lines of pure javascript will also be able to get you same results.

#1
John Sheehan said— 2 hours later

Slightly more terse selector for the submit button using a psuedo selector:

$(‘input:submit’, this)

I would also recommend toggling the visibility of the button and a separate element to keep the markup out of the script, which can be a pain to maintain.

#2
Brian Cray said— 10 hours later

Nikhil: I figured it was better to show how to do it with jQuery because many people are interested in jQuery, and this code snippet gives them an extra idea how jQuery works.

John: Not a bad idea on just simply toggling the visibility, as the input button itself may carry important post data. Cheers!

#3
Stephen said— 10 hours later

Hi,

Can you explain why you use ‘this’ within: $(‘input[type="submit"]‘, this) and not just use one or the other?

Thanks

#4
Brian Cray said— 10 hours later

Stephen: Happy to. Since you are within $(‘form’).submit( …you’re here… ), you want to reference the form with this. If you didn’t reference the form with this, $(‘input[type="submit"]‘) would just reference the first submit input on the page. Does that make sense?

#5
Stephen said— 11 hours later

You’re telling it to use the current one you clicked on and not any other on the page by specifying ‘this’ after the selector. Makes sense, thank you.

#6
Sean O said— 11 hours later

Were you watching me yesterday afternoon as I just did exactly this to prevent multiple submissions & provide feedback on my timesheet app?

My approach was slightly different in that I used:
.attr({
‘disabled’ : ‘disabled’,
‘value’ : ‘Submitting…’
});
on the input, so the button is disabled, and doesn’t “disappear.”

– SEAN O

#7
Brian Cray said— 11 hours later

Sean O: hehe… That’s a great suggestion and I just don’t think people realize it when submit buttons are disabled. I think they’ll still keep clicking (not knowing it’s disabled). But I may be wrong of course

#8
Cezary Tomczyk said— 1 month later

I think that disable submit button should be only for a moment, for example, 500ms. Sometimes it’s need to click submit button one more time, eg. when internet connection is fail.

#9
Rob said— 1 month later

Nice tutorial. When you disbale an unstyled inout its much more obvious its disbabled, but styled inoputs are a different story. I#d personally do this using Seans.arrt method and add a disabled class.

Another option would be to go down the loading image gif approach, as it visually indicates that something is happening. Once the form has been submitted (or whatever you’re doing with it) you can display an alternative message. The latter can be easily achieved using JQuery built in .ajax function.

#10
Tim said— 1 month later

I am an utter code beginner so I’d like to know, for say a WordPress build, where to wack this, or even for say a aWeber form

Cool
tim

#11
LadyHoo said— 2 months later

Cool!

#12
Bill Reed said— 4 months later

Very good idea. However true the comment is about being able to achieve this effect via ‘pure javascript’ is, if you’re using JQuery already it’d be silly not to use this. Usign Jquery, you also eliminate the messy Javascript attributes inserted directly into html.

I’m still a fan of the loading gif for things like this – as you can instantly see something happening. Your method is fine, but it’s possible for a user to miss the change on a busier website – just my opinion.

#13
Patricia Quintanilla said— 10 months later

pretty cool!

thanks!

#14
Silver said— on July 28, 2009 later

How can you do that trick in pure javascript?

#15
tom said— on July 28, 2009 later

Hi
I’m newbie and don’t know why my hyperlink of my button don’t works with JQuery… hover works but don’t appears the link in the status bar and don’t trigger. The idea is to use this button to return to home page and can’t do it. The HTML code is inside a Library in Dreamweaver. This is the code:
HTML code:

INICIO

jQUERY code:
$(function() {
$(“a”).click();
$(“button, a”, “.BotonInicio”).button();
$(“a”, “.BotonInicio”).click(function() { return false; });
});

CSS Code:
.BotonInicio {
margin-top: 21px;
}
.FormatButton {
}

What’s wrong here?
Thanks
Tom

#16
Respond to this post—

Your name

E-mail address will not be published