Disable Submit Button After a Form is Submitted

Once a user has submitted a form, you generally don’t want them to submit it a second time.1 A nice way to handle this is to disable the submit button once the form has been submitted, while replacing the text in the submit button with a message to let the user know that their desired action has been taken.

Here is a little code that will disable the submit button and display that nice message:


jQuery(function($) {
// set data-after-submit-value on input:submit to disable button after submit
$(document).on('submit', 'form', function() {
var $form = $(this),
$button,
label;
$form.find(':submit').each(function() {
$button = $(this);
label = $button.data('after-submit-value');
if (typeof label != 'undefined') {
$button.val(label).prop('disabled', true);
}
});
});
});

view raw

jquery-disable-button-after-submit.js

hosted with ❤ by GitHub

And here is a JS Fiddle to play around with.

Set the message to display by setting a data attribute on the submit button. If the data attribute isn’t set, we don’t do anything. This is a good safeguard against unexpected functionality, but if you want to disable the button for all forms anyway you can do so with a little code tweak.

  1. Some folks insist on double-clicking on the web. ↩

Comments Off on Disable Submit Button After a Form is Submitted

Categories Code, Development

We’ve Made Web Development Complicated

When I first made my transition from front-end development into back-end development in ~2002, I had two things to learn:

  1. a server-side language
  2. how to talk to a database (SQL)

on top of my knowledge of HTML, CSS and JavaScript. With these five basic things, I was able to build some useful stuff.

I’m working on a web app now and it recently struck me how much more complicated things have become. I’m following what I consider to be modern development best practices and that means that I’m dealing with the following concepts and technologies:

  1. a server-side language
  2. how to talk to a database (SQL)
  3. HTML
  4. CSS
  5. JavaScript
  6. The concept of a virtual machine
  7. Vagrant with a pre-built image (Laravel Homestead)
  8. SSH
  9. Version control (Git)
  10. A branching/merging process (Git Flow)
  11. Gulp
  12. Node.js (for running Gulp)
  13. Homebrew
  14. /etc/hosts file (or Dnsmasq)
  15. CSS pre-processors (Bootstrap was already using Less, I am using Sass)
  16. CSS concatenation
  17. JavaScript concatenation
  18. Image sprites
  19. A server-side framework (Laravel)
  20. Framework-specific command line utilities for creating template files, running pre-load optimizations, database commands, etc.
  21. ORM
  22. Security (SQL injection, XSS, CSRF, etc.)
  23. Templating syntax (Laravel uses one called Blade)
  24. A client-side framework (jQuery, Bootstrap, Angular, etc.)
  25. JSON
  26. PHP Composer
  27. PHP Packages
  28. Database migrations (database schema defined in code)
  29. Database seeding
  30. Faker (for creating dummy data)
  31. Unit testing

Unused in my project thus far, but other things you’ll need to know sooner rather than later:

  1. Memcached (or other key/value caches)
  2. Capistrano (or another deployment process)
  3. CDNs

I’m guessing I’ve forgotten another dozen or so things that you all will remind me about in the comments… point being, this stuff has gotten more complicated and difficult to get one’s head around. Lots of abstractions, optimizations, etc.

I was recently asked to chime in on a “what programming language should a new developer learn?” round-up. The resulting :scare: article :/scare: is a bit of a mess as you have relatively unstructured comments from 83 developers to slog through. Further, many of them have huge biases towards frameworks they created, etc. Regardless, I was interested to see that I wasn’t the only one to challenge the question and push the importance of motivation and the project goal over a technology choice.

We need to remember that we’ve created this chaos bit by bit. When we are teaching, we need to provide a path that allows people to master one brick at a time. Pretty soon, they have enough bricks that they can build more layers on top of them.

Sane Laravel 5 Mail Example

For some reason, the example code in the Laravel docs for their Mail feature neglect to show how to pass defined variables into the closure. Here is something a little more useful.


<?php
// note, to use $subject within your closure below you have to pass it along in the "use (…)" clause.
$subject = 'Welcome!';
Mail::send('emails.welcome', ['key' => 'value'], function($message) use ($subject) {
// note: if you don't set this, it will use the defaults from config/mail.php
$message->from('bar@example.com', 'Sender Name');
$message->to('foo@example.com', 'John Smith')
->subject($subject);
});

view raw

laravel-5-mail-example.php

hosted with ❤ by GitHub

Setting the wp_remote_get() User Agent

I was recently trying to make some API requests from within WordPress using `wp_remote_get()`, but the site I was asking for data from was rejecting requests from the default WordPress User Agent. I tried to set the user agent to something different, but it still wasn’t working: $response = wp_remote_get($url, array(   ‘timeout’ => 20,   ‘User-Agent’…

1 Reply

Local *.dev and *.app via Dnsmasq on Mac OS X

I am in the process of setting up a development environment on a new machine and one of the things I decided to do is route all .dev domains to my local (built-in) Apache web server while I route all .app domains to my Laravel Homestead Vagrant environment. To never have to monkey with your…

The Race to the Bottom Benefits Platforms (not Developers)

There’s been a ton of recent conversation in the iOS world about the inability for most indie developers to create sustainable businesses through the iOS app store. In particular, these devs are talking about apps that require larger development efforts – they want to charge more than “impulse purchase” prices for these, and thus want…

57 Replies

Custom Taxonomy as “Post Meta”

I found this post while sorting through my old drafts and decided to go ahead and publish it rather than trashing it. Hopefully the code samples don’t break too badly in WordPress 3.9. I’ve talked a bit about when to use custom taxonomies and when to use custom fields/post meta (and how they can be…

19 Replies

Text Editors

Yesterday I watched a colleague’s Sublime Text 2 crash repeatedly as he tried to navigate the search results in a large project. BBEdit‘s search (and edit in the results window) feature is a part of my normal development process. I think it crashed on me once about 8 years ago.

6 Replies

HTML5 Colorado Flag T-shirt

A couple of years ago I got some Colorado State flag HTML5 t-shirts printed up.1 Since then, a number of folks have asked about getting them so I set up a TeeSpring. They will be on sale in mens and womens sizes for $15 for the next 2 weeks. We need 50 orders for them…

10 Replies

That Wasn’t on the Schedule

On Tuesday I was back in the office and itching to get back to work on my current project. That morning I got two emails about an incompatibility in Carrington Build‘s Rich Text module and WordPress 3.9. Sure enough, the change in WordPress core to upgrade to TinyMCE 4.0 coupled with changes in how TinyMCE…

1 Reply

Work Backwards

Relating to yesterday’s post on inertia, I wanted to pass on another nugget I’ve learned about how to approach and define problems: working backwards. I’ve found this to be useful in both technical and business situations and I use it all the time. Basically, start with the end result you want, and figure out how…

2 Replies

Is WordPress the Right Tool for the Job?

I recently got an email that asked: Do you ever question whether WordPress is the correct CMS for something? I am a big WordPress fan too and I’ve solved some really cool content management challenges with it but there are times when I think, this site would probably be faster and more efficient if it…

32 Replies