Use un enlace normal para enviar un formulario

130

Quiero enviar un formulario Pero no voy a la forma básica de usar un botón de entrada con el tipo de envío, sino un enlace.

La siguiente imagen muestra por qué. Estoy usando enlaces de imágenes para guardar / enviar el formulario. Debido a que tengo marcado CSS estándar para enlaces de imágenes, no quiero usar los botones de envío de entrada.

Traté de aplicar onClick = "document.formName.submit ()" al elemento pero preferiría un método html.

texto alternativo

¿Algunas ideas?

Voto a favor
fuente
3
use el botón y css para mostrar la imagen o use javascript, no hay una manera real de hacer href simple para enviar un formulario sin javascript.
Anton S
En segundo lugar, desafortunadamente, esta no es una manera fácil sin JavaScript
benhowdle89
44
Su razón para hacer esto suena como una falsa economía. Es mejor crear un CSS estándar para enviar botones y usar formularios de la forma en que fueron diseñados para ser utilizados. Hay un montón de técnicas CSS botón describir aquí: tripwiremagazine.com/2009/06/...
dnagirl

Respuestas:

169

Dos caminos. Crea un botón y dale estilo para que parezca un enlace con css, o crea un enlace y úsalo onclick="this.closest('form').submit();return false;".

Jan Sverre
fuente
55
Aaaaaaay aquí hay una referencia sobre cómo diseñar un botón como enlace: stackoverflow.com/questions/1367409/…
rotafolio el
3
tenga en cuenta que form.submit()no funcionará sin JavaScript
baptx
3
@baptx, incluso los teléfonos inteligentes antiguos han habilitado javascript
Mahdi Jazini
2
@MahdiJazini muchas personas deshabilitan JavaScript de forma predeterminada, lo que puede ser intrusivo y afectar el rendimiento en algunos casos. Si JavaScript falla, puede romper todo el sitio web (por ejemplo, usar un CDN sin respaldo local y el dominio de terceros está bloqueado). Si hay un error de HTML, aún puede usar el sitio web. Los desarrolladores deben seguir el principio de mejora progresiva en su lugar.
baptx
3
Si desea admitir usuarios sin JavaScript, realice la primera opción descrita en esta respuesta, diseñe un botón como un enlace. Por ejemplo input[type=submit].link { border: none; background: none; display: inline; color: blue; text-decoration: underline; }y<input type=submit class="link" />
Jan Sverre
87

Realmente no puedes hacer esto sin alguna forma de scripting según mi leal saber y entender.

<form id="my_form">
<!-- Your Form -->    
<a href="javascript:{}" onclick="document.getElementById('my_form').submit(); return false;">submit</a>
</form>

Ejemplo de aquí .

JonVD
fuente
1
y queridos visitantes ... no se olviden de configurar el >>> id = "my_form" es id no nombre: D
Mahdi Jazini
Esta debería ser la mejor y explícita respuesta, ¡gracias!
yehanny
28

Solo diseñar un estilo input type="submit"como este me funcionó:

.link-button { 
     background: none;
     border: none;
     color: #0066ff;
     text-decoration: underline;
     cursor: pointer; 
}
<input type="submit" class="link-button" />

Probado en Chrome, IE 7-9, Firefox

Serj Sagan
fuente
solo para el registro: debe seleccionar el inputelemento apropiado utilizando selectores CSS sin adjuntar una clase al elemento HTML.
Erik Kaplun
Aunque su comentario es la forma preferida, esto no siempre es posible
Serj Sagan
¿Por qué es esa la forma preferida?
Mark
Es una práctica de codificación semi establecida, generalmente deja un html más limpio ... pero no es un gran problema
Serj Sagan
1
Esta respuesta tampoco depende de JavaScript, que es una cosa menos de la que preocuparse
Matthew Lock
10

Estás utilizando imágenes para enviar ... así que simplemente puedes usar un type="image""botón" de entrada:

<input type="image" src="yourimage.png" name="yourinputname" value="yourinputvalue" />
ThiefMaster
fuente
1
... o un <button>elemento con un <img/>elemento en él.
DanMan
Aquí está el enlace de MDN para esto en caso de que alguien más quiera una fuente: developer.mozilla.org/en-US/docs/Web/HTML/Element/input/image
Sam
5

utilizar:

<input type="image" src=".."/>

o:

<button type="send"><img src=".."/> + any html code</button>

más algo de CSS

atlavis
fuente
0

Definitivamente, no existe una solución con HTML puro para enviar un formulario con una aetiqueta link ( ). El HTML estándar solo acepta botones o imágenes. Como han dicho otros colaboradores, uno puede simular la apariencia de un enlace usando un botón, pero supongo que ese no es el propósito de la pregunta.

En mi humilde opinión, creo que la solución propuesta y aceptada no funciona.

Lo probé en un formulario y el navegador no encontró la referencia al formulario.

Por lo tanto, es posible resolverlo usando una sola línea de JavaScript, usando un thisobjeto, que hace referencia al elemento en el que se hace clic, que es un nodo secundario del formulario, que debe enviarse. Así this.parentNodees el nodo de formulario. Después de que solo está llamando al submit()método de esa forma. No es necesario investigar todo el documento para encontrar la forma correcta.

<form action="http://www.greatsolutions.com.br/indexint.htm"                   
   method="get">
    <h3> Enter your name</h3>
    First Name <input type="text"  name="fname"  size="30"><br>
    Last Name <input type="text" name="lname" size="30"><br>
    <a href="#" onclick="this.parentNode.submit();"> Submit here</a>
</form>

Supongamos que entro con mi propio nombre:

Formas completas

He usado el getatributo de método de formulario porque es posible ver los parámetros correctos en la URL en la página cargada después de enviar.

http://www.greatsolutions.com.br/indexint.htm?fname=Paulo&lname=Buchsbaum

Obviamente, esta solución se aplica a cualquier etiqueta que acepte el onclickevento o algún evento similar.

thises una excelente opción para recuperar el contexto junto con eventvariables (disponibles en todos los principales navegadores e IE9 en adelante) que se pueden usar directamente o pasar como argumento a una función.

En este caso, reemplace la línea con la aetiqueta por la línea a continuación, utilizando la propiedad target, que indica el elemento que ha iniciado el evento.

<a href="#" onclick="event.target.parentNode.submit();"> Submit here</a>
Paulo Buchsbaum
fuente
@Nathan, no tengo mucha práctica de escribir Stackoverflow. Espero que sus correcciones me ayuden a mejorar mi estilo. Mi inglés tampoco es bueno.
Paulo Buchsbaum
0

puede usar OnClick = "document.getElementById ('formID_NOT_NAME'). SUBMIT ()"

Sameh Helaly
fuente