Ir al contenido / Skip navigation
Menú
¡Lo último!
Últimos artículos
Comentarios recientes
<ul><li>Saladashed.-: <a href="http://jordisan.net/blog/2006/que-es-un-framework#comment-11484" title="Saladashed.-">QUE GENIAL, la verdad que este post vale oro, está explicado sencilla y claramente, sin caer en la simplicidad. Oja...</a> <small> </small></li> <li>mike: <a href="http://jordisan.net/blog/2008/consejos-access#comment-11447" title="mike">las key las puedes nombrar como datos unicos y para generar reportes o kardex como lo que tu quieres hacer te recomie...</a> <small> </small></li> <li>TorvusBog: <a href="http://jordisan.net/blog/2008/un-badge-javascript-mejor-para-twitter#comment-11393" title="TorvusBog">excelente, me funcionó de inmediato, gracias! http://blog.felipebarrientos.cl</a> <small> </small></li> <li>Julio: <a href="http://jordisan.net/blog/2006/que-es-un-framework#comment-11236" title="Julio">Y yo que pensaba que un framework era solamente un conjunto de librerías...Gracias por sacarme de la ignorancia...</a> <small> </small></li> <li>Paula Alvarez: <a href="http://jordisan.net/blog/2006/proyecto-fin-de-carrera-analisis-de-logs-web#comment-11226" title="Paula Alvarez">Felicitaciones...Muy interesante</a> <small> </small></li> <li>JJTR: <a href="http://jordisan.net/blog/2006/que-es-un-framework#comment-11191" title="JJTR">Sprng es un frame work y como empiezo ha usar Spring</a> <small> </small></li> <li>Twitter Trackbacks for La mejor tira de Dilbert sobre usabilidad -@- jordisan.net [jordisan.net] on Topsy.com: <a href="http://jordisan.net/blog/2009/la-mejor-tira-de-dilbert-sobre-usabilidad#comment-11013" title="Twitter Trackbacks for La mejor tira de Dilbert sobre usabilidad -@- jordisan.net [jordisan.net] on Topsy.com">[...] Topsy Retweet Button var topsy_style = &quot;small&quot;; var topsy_order = &quot;count,retweet,badge&quot...</a> <small> </small></li> <li>jose: <a href="http://jordisan.net/blog/2006/consultando-el-diccionario-de-la-rae#comment-10944" title="jose">no me gusta nada es una putaa mierda</a> <small> </small></li> <li>José: <a href="http://jordisan.net/blog/2010/asi-son-los-correos-que-recibo#comment-10927" title="José">Hola amigo, mira, estamos realizando un concurso-sorteo para bloggers para presentar nuestra nueva tienda, el concurs...</a> <small> </small></li> <li>Victor Moral: <a href="http://jordisan.net/blog/2010/asi-son-los-correos-que-recibo#comment-10807" title="Victor Moral">Ciertamente sí, me pasa lo mismo. El caso de los avisos legales no tiene mucho remedio a menos que emplees filtros m...</a> <small> </small></li> </ul>
Clasificación de artículos
No more double submits in web forms

No more double submits in web forms

Sábado, 14 Julio 2007

Usually, submit buttons in web forms should be clicked just once; but many users click them twice or more. Why?

  • Because they're used to launch actions by double clicking (as on Windows icons).
  • Because the server doesn't replies instantantly, and they click again "just to see if something happens".

What's the result? The form data is sent twice to the server, and users usually don't realize it; they just get the response to one of the submits. Try this simulation to see what happens when submitting several times the form before the server response arrives:

reset

This is not a big issue if it's, for instance, a search form: the query is being launched twice but the user simply gets the result. It may be annoying if someone is receiving the same mail several times just because users are submiting several times the contact form. And it's a real big problem when the user is submiting a payment (you can be pretty sure they don't want to pay twice the same object!).

The solution

There's an easy solution for that problem! Simply disable the button just after the form is submitted, and you can change the button text too. The result is something like this:

reset

This is done using the onsubmit form event:

<form onsubmit=document.forms['formname'].submitbutton.disabled=true;
document.forms['formname'].submitbutton.value='Sending...';" action="action" name="formname">
  <!-- some form controls here -->
  <input value="Send" name="submitbutton" id="submitbutton" type="submit">
</form>

With this technique, you achieve two positive effects:

  • avoiding the double submit problem; and
  • giving feedback to the user confirming the submit

Of course, there's no perfect solution. If JavaScript is disabled at the browser, it doesn't works; if it's really important avoiding multiple submits (for instance, when it's an economical transaction), it should be done at server's level.

It's really simple to use and without negative effects. Try it if you are really tired of multiple submits and tell me how it goes!

Deje un comentario