2010-05-07 10 views
7

Quiero que mi botón de envío se coloque en algún lugar fuera de mi elemento de formulario? ¿Tengo alguna opción? Con la excepción de jquery.¿tiene que estar el botón de envío en el formulario

Gracias, rodchar

+0

Cuando dice jQuery, ¿también decir Javascript? –

+0

Si pudiera hacer eso, ¿cuál sería el comportamiento de las páginas con formularios múltiples? –

+0

Dado que su '

' podría abarcar toda la página, ¿está preguntando porque tiene múltiples formularios en la página? – egrunin

Respuesta

1

Esta es una situación común. Creo que esto lo hará (no lo he probado):

<form id="form1" action="someAction.cgi" method="GET"> 
    <!-- other fields go here --> 
</form> 
<form id="form2" action="someOtherAction.cgi" method="GET"> 
    <!-- other fields go here --> 
</form> 

<form> 
    <input value="Form One" type="button" 
     onclick="document.getElementById('form1').submit();"/> 
    <input value="Form Two" type="button" 
     onclick="document.getElementById('form2').submit();"/> 
</form> 

No estoy seguro de si es necesario que el pasado <form>. Me parece recordar navegadores ignorando eventos si el botón no estaba en un form.

4

Otro enfoque para esto es simplemente para establecer el form attribute en el botón:

<form id="first"> 
    <input type="submit" form="second" value="Submit Second" /> 
</form> 
<form id="second"> 
    <input type="submit" form="first" value="Submit First" /> 
</form> 

violín: http://jsfiddle.net/52wgc2ym/


respuesta original

El comportamiento natural de un botón Enviar es enviar el formulario más cercano a su jerarquía. La única otra forma de obtener un botón para enviar un formulario en el que no reside es usar JavaScript (que es básicamente lo que es jQuery).

Si es necesario, puede volver a colocar el botón Enviar para que aparezca como si no estuviera en el formulario visualmente cuando se representa la página. Lo harías usando CSS, que puede dar los resultados deseados.

+0

+1 para el CSS, no pensé en eso. –

+0

"javascript (que es lo que jQuery es, básicamente)" ...hmmm –

+0

jQuery .... IS ...... JavaScript :) – user1360809

4

El botón enviar debe estar dentro del formulario, sí.

Me parece extraño quererlo de otra manera, de todos modos. ¿Cuál sería el punto si los controles de entrada estuvieran en un lugar en la página, y el botón de enviar fuera waaay allí en otro lugar?

2

Las entradas de tipo submit solo tienen sentido como elementos secundarios de <form>. Pero usando CSS estoy seguro de que puedes ubicarlo donde quieras. Recuerde que los elementos del formulario son "invisibles", de modo que simplemente amplíe las etiquetas para obtener más contenido y estará cubierto. Aquí está the documentation on forms for HTML4, sigue siendo apropiado.

2

Sí, estructuralmente el botón de envío debe estar dentro de un elemento de formulario para que el documento sea válido X/HTML. Pero visualmente puede ubicar el botón de envío en cualquier lugar que desee con CSS apropiado (flotación, posicionamiento absoluto/relativo, etc.). También puede escribir JavaScript que activará el envío del formulario y lo vinculará a otro elemento.

0

Este es el otro tipo de respuesta que consigue la opinión más clara de la respuesta egrunin

<form id="form1" name="form1" action="someAction.cgi" method="GET"> 
     <!-- other fields go here --> 
    </form> 
    <form id="form2" name="form2" action="someOtherAction.cgi" method="GET"> 
     <!-- other fields go here --> 
    </form> 

    Calling by form id: 
    <form> 
     <input value="Form One" type="button" 
      onclick="document.getElementById('form1').submit();"/> 
     <input value="Form Two" type="button" 
      onclick="document.getElementById('form2').submit();"/> 
    </form> 

or Calling by form name: 

    <form> 
     <input value="Form One" type="button" 
      onclick="document.form1.submit();"/> 
     <input value="Form Two" type="button" 
      onclick="document.form2.submit();"/> 
    </form> 
Cuestiones relacionadas