La mejor forma de enviar un formulario: sustituir boton submit por un enlace

Suena un poco pretencioso eh? pues veamos, si utilizamos un botón normal de submit resulta difícil estilizarlo con CSS de forma consistente y cross-browser. Lo mejor es utilizar un enlace pero claro, el envío habría que hacerlo siempre por javascript (poniéndo algo como <a href="javascript:document.forms[0].submit()">Submit</a>) y eso no queda muy accesible ya que siempre hay que contar con que el cliente pueda tener su javascript desactivado. Y cual es la solución? pues fácil, poner un botón submit, y si tenemos javascript disponible, hacer una pequeña función que lo sustituya por un enlace. Dicha función tendrá que recorrer todos los elementos input, seleccionar el de tipo submit y hacer lo siguiente: crear el enlace, ponerle el texto del botón, asignarle javascript:document.forms[0].submit() a su atributo href, y finalmente eliminar el botón submit.

Y he aquí un pequeño ejemplo muy ilustrativo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" ontent="text/html; charset=utf-8">
<title>Example: Submit buttons to links</title>
<style type="text/css"></style>
<script type="text/javascript">
function submitToLinks()
{
  if (!document.getElementById || !document.createTextNode)
    return;
  var inputs,i,newLink,newText;
  inputs=document.getElementsByTagName('input');
  for (i=0;i<inputs.length;i++)
  {
    if(inputs[i].getAttribute('type').toLowerCase()!='submit') {
      continue; i++;
    }
    newLink=document.createElement('a');
    newText=document.createTextNode(inputs[i].getAttribute('value'));
    newLink.appendChild(newText);
    newLink.setAttribute('href','javascript:document.forms[0].submit()');
    inputs[i].parentNode.replaceChild(newLink,inputs[i]);
  }
}
window.onload=submitToLinks;
</script>
</head>
<body>
<form action="nogo.php" method="post">
  <label for="Name">Name:</label>
  <input type="text" id="Name" name="Name" />
  <input type="submit" value="send" />
</form>
</body>
</html>

Si lo pruebas podrás observar que el envío del formulario funciona tanto haciendo click sobre el enlace como apretando la tecla Enter. Y por supuesto, en cuanto a la estilización del enlace, no tendríamos más que añadirle la clase correspondiente y con CSS podemos darle el aspecto que queramos (de botón incluso, también podemos hasta evitar que el puntero sea una mano para aumentar su similitud con un botón)

Guarda | Imprime | Recomienda

Otros artículos de esta serie:

La mejor forma de enviar un formulario: sustituir boton submit por un enlace

Publicar un Comentario

Buscar

Entradas recientes

Categorías