2010-11-26 13 views
98

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

La imagen a continuación muestra por qué. Estoy usando enlaces de imagen para guardar/enviar el formulario. Como tengo marcado de CSS estándar para enlaces de imagen, no quiero usar los botones de envío de entrada.

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

alt text

¿Alguna idea?

+3

botón de uso y CSS para mostrar la imagen o el uso de JavaScript, no hay manera real de hacer simples href para enviar un formulario sin javascript. –

+0

en segundo lugar, desafortunadamente estos no son una manera fácil sin Javascript – benhowdle89

+3

Su razón para hacer esto parece una economía falsa. 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 de botón CSS descritas aquí: http://www.tripwiremagazine.com/2009/06/24-essential-submit-button-enhancements.html – dnagirl

Respuesta

141

De dos maneras. Cree un botón, ejecútelo para que parezca un enlace con CSS o cree un enlace y use onclick="form.submit();".

+43

Aaaaaaa y aquí hay una referencia sobre cómo dar estilo a un botón como un enlace : http://stackoverflow.com/questions/1367409/how-to-make-button-look-like-a-link – flipchart

+3

tenga en cuenta que 'form.submit()' no funcionará sin JavaScript – baptx

+2

@baptx incluso teléfonos inteligentes antiguos ha habilitado javascript –

9

Está utilizando imágenes a presentar .. por lo que simplemente puede utilizar un "botón" type="image" de entrada:

<input type="image" src="yourimage.png" name="yourinputname" value="yourinputvalue" /> 
+1

... o un elemento'

+0

Aquí está el enlace de MDN para esto en caso de que alguien más quisiera una fuente: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/image – Sam

76

Realmente no se puede hacer esto sin alguna forma de secuencias de comandos en la medida de mis conocimientos.

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

Ejemplo de Here.

+4

gracias por esta gran respuesta !! – soField

+1

y queridos visitantes ... no olvides establecer >>> id = "my_form" su nombre no es ID: D –

3

uso:

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

o:

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

más algo de CSS

23

Sólo labrar un <input type="submit" class="linkButton" /> como esto funcionó para mí:

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

Probado en Chrome, IE 7-9, Firefox

+0

solo para el registro: debes seleccionar el elemento 'input' apropiado usando los selectores CSS sin asociar una clase al elemento HTML. –

+0

Aunque su comentario es la forma preferida, esto no siempre es posible –

+0

¿Por qué es la forma preferida? – Mark

-1

Definitivamente, no hay solución con HTML puro para enviar un formulario con un enlace etiqueta (a). 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 he probado en un formulario y el navegador no ha encontrado la referencia al formulario.

Así que es posible resolverlo usando una sola línea de JavaScript, utilizando el objeto this, que hace referencia al elemento al que se hace clic, que es un nodo secundario del formulario, que debe enviarse. Entonces, this.parentNode es el nodo de formulario. Después de simplemente llamar al método submit() en esa forma. No es necesario buscar 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:

Filled form

He usado get en el atributo método del formulario porque es posible ver los parámetros correctos en la dirección URL en la página cargada después de enviar .

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

Esta solución se aplica obviamente a cualquier etiqueta que acepte el evento onclick o algún evento similar.

this es una excelente opción para recuperar el contexto junto con event variable (disponible en todos los navegadores principales e IE9 en adelante) que se puede usar directamente o pasar como argumento para una función.

En este caso, reemplace la línea con la etiqueta a por la línea siguiente, usando la propiedad target, que indica el elemento que ha iniciado el evento.

<a href="#" onclick="event.target.parentNode.submit();"> Submit here</a> 
+0

@Nathan, no tengo mucha práctica de escribir en 'Stackoverflow'. Espero que tus correcciones me ayuden a mejorar mi estilo. Mi inglés tampoco es bueno. –

0

puede utilizar onclick = "document.getElementById ('formID_NOT_NAME'). Submit()"

Cuestiones relacionadas