2010-01-20 22 views
19

Imaginemos un formulario HTML con dos botones de envío. uno de ellos se coloca en la mitad superior del formulario y hace algo menos importante. el otro botón es el botón de envío real, que guarda los datos ingresados. este botón está ubicado al final del formulario. los dos botones activarán diferentes URL de acción.Presionando "Volver" en un formulario HTML con múltiples botones de envío

usuarios experimentados les gusta enviar sus formularios presionando "enter" o "return" en lugar de hacer clic en el botón correspondiente.

desafortunadamente, el navegador buscará el primer botón de envío del formulario actual y lo usará para ejecutar el envío de formulario. dado que en mi forma el segundo botón es el botón de envío real, necesito decirle al navegador que use este botón en particular (o la acción-url que está asociada con él).

No enlazo a los listeners de JavaScript, que están buscando presionar la tecla o algo así. así que estoy buscando un mejor enfoque para este problema. sin embargo, las soluciones javascript o jquery (sin keypressed-listerner) son bienvenidas.

muchas gracias por su ayuda con anticipación.

+2

Esto no es cierto en todos los navegadores, ya que este comportamiento fue muy mal definido no hace mucho tiempo (los formularios HTML en general siempre han sido y todavía son un terrible pozo de ambigüedad). Las versiones anteriores de IE tratarán, por ejemplo, la presentación como si * ninguno * de los botones de envío se presionara (ya que técnicamente es el caso). – David

Respuesta

8

Usted podría, en teoría al menos, tienen tres submit botones en su formulario.

El botón dos es el botón 'menos importante' existente (desde la mitad del formulario), el botón tres es el botón 'actual-enviar' existente de su formulario existente.

El botón uno debe estar oculto (usando CSS display:none o visibility: hidden) y debe realizar exactamente la misma función que su actual 'actual-submit'. Creo que seguirá siendo el primer botón que encuentre el navegador, independientemente de su visibilidad.

<form method="post" method="whatever.php" enctype="form/multipart"> 

<fieldset id="first"> 

<label>...<input /> 
<label>...<input /> 
<label>...<input /> 

<input type="submit" value="submit" style="visibility: hidden;" <!-- or "display: none" --> /> 
<input class="less_important" type="submit" value="submit" /> 

</fieldset> 

<fieldset id="second"> 

<label>...<input /> 
<label>...<input /> 
<label>...<input /> 

<input type="submit" value="submit" class="actual_submit" /> 

</fieldset> 

</form> 

editada en respuesta a los comentarios:

pensé botones ocultos también fueron desactivados por defecto? [Md5sum]

un punto válido, pero he cometido el error de la prueba sólo en Firefox (3.5.7, Ubuntu 9.10) antes de publicar, en el que la técnica funcionaba , para ambos. El archivo xhtml completo se pega (a continuación) que forma la base de mis pruebas posteriores a estos comentarios.

<?xml version="1.0" encoding="utf-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 

<head> 
    <title>3button form</title> 
    <link rel="stylesheet" type="text/css" href="css/stylesheet.css" /> 
     <script type="text/javascript" src="js/jquery.js"></script> 


     <script type="text/javascript"> 

$(document).ready(

    function() { 

     $('input[type="submit"]').click(
      function(e){ 
       alert("button " + $(this).attr("name")); 
      } 
     ); 

    } 
); 
     </script> 


</head> 

<body> 

<form method="post" method="whatever.php" enctype="form/multipart"> 

<fieldset id="first"> 

<label>...<input /> 
<label>...<input /> 
<label>...<input /> 

<input name="one" type="submit" value="submit" style="display:none;" /><!-- or "display: none" --> 
<input name="two" class="less_important" type="submit" value="submit" /> 

</fieldset> 

<fieldset id="second"> 

<label>...<input /> 
<label>...<input /> 
<label>...<input /> 

<input name="three" type="submit" value="submit" class="actual_submit" /> 

</fieldset> 

</form> 


</body> 

</html> 

display: none debe evitar un botón de ser una parte activa de la forma (incluido en el conjunto de resultados, y es elegible para default-botón-dad); visibility: hidden no debería. Sin embargo, algunos navegadores malinterpretan estos casos. La forma normal de tener un primer botón de envío invisible es position: absolute; y moverlo fuera de la página (por ejemplo, con la izquierda: -4000px). Esto es feo pero confiable. También es una buena idea cambiar su tabindex para que no interfiera en el orden de tabulación esperado de la forma.

Hay, al menos, dos puntos que tengo que plantear a este comentario. En orden:

  1. "La manera normal ..." yo no sabía que había una manera normal, y presentó esta opción como una posibilidad para lograr un objetivo, en el pleno conocimiento de que había/son casi con toda seguridad cualquier cantidad de formas mejores, particularmente dado que no veo una buena razón para enviar múltiples botones en el mismo formulario.
  2. Dada la última oración del punto anterior, me gustaría dejar en claro que no abogo por hacer esto. En absoluto. Se siente como un hack feo, y no semántico, tener más de un botón de envío, con -en la instancia del OP- un botón aparentemente que no es un botón de envío.
  3. La noción de `posición: absoluta; left: -4000px; `se me había ocurrido, pero parecía tener el mismo efecto que` visibility: hidden; `, y tengo una aversión innata a` position: absolute; `por cualquier razón ... así que fui con la opción que era menos objetable para mí al momento de escribir ... =)

Agradezco su comentario sobre el tabindex, sin embargo, eso fue algo en lo que nunca pensé, en absoluto.

Lo siento si sueno un poco raro, es tarde, estoy cansado ... yadda-yadda; He estado probando en varios navegadores desde mi regreso a casa y parece que Firefox 3.5+ da el mismo comportamiento: informando el "botón uno" tanto en Windows XP como en Ubuntu 9.10, todos los navegadores Webkit (Midori, Epiphany, Safari y Chrome) fallan e informe 'botón dos'.

Así que definitivamente es una idea que no vale la pena enviar display: none; el botón Enviar. Mientras que el visibility:hidden al menos funciona.


  1. lo cual quiero decir que pulsar 'Enter' desencadenó el formulario a presentar un evento o el evento clic del botón primero presentar de la forma, independientemente de que la primera presenten era `display: none ; `o` visibilidad: oculto`.

    Tenga en cuenta que mis habilidades jQuery son limitadas, por lo que las pruebas empleadas (corrí solo en un momento para tratar de evitar conflictos que ocurren en la ejecución, comentando el que no ejecuté en ese momento, ambos se presentan - uno, claramente, comentado) puede ser insuficiente y no representativo.

+0

Pensé que los botones ocultos también estaban deshabilitados por defecto? –

+2

'display: none' debe evitar que un botón sea una parte activa del formulario (incluido en el conjunto de resultados, y elegible para el botón predeterminado-ness); 'visibility: hidden' no debería. Sin embargo, algunos navegadores malinterpretan estos casos. La forma normal de tener un primer botón de envío invisible es 'position: absolute;' it y moverlo fuera de la página (por ejemplo, con 'left: -4000px'). Esto es feo pero confiable. También es una buena idea cambiar su 'tabindex' para que no interfiera en el orden de tabulación esperado de la forma. – bobince

+0

Editado para abordar los comentarios -above-. –

19

cambie su primer botón a <input type="button" />.

+2

¡Yay por hacer las cosas correctamente! +1 –

+1

¿Cómo es que tener 2 botones de envío es incorrecto? Tal vez le gustaría que ambos botones funcionen sin usar javascript. – Wes

+2

Tener dos botones de envío en un solo formulario en una interfaz de usuario ...? Yo diría que esa no es la cosa más amigable para el usuario en el mundo. –

-1

¿Es una opción utilizar el posicionamiento absoluto en su botón de envío menos importante y hacer que aparezca después de su botón de envío primario en el HTML? Por lo tanto, se puede tener:

<form> 
<p> 
Stuff 
<input type="submit" value="This is my main submit button" /> 
<input type="submit" value="This is my secondary submit button" style="position: absolute; left: 0px; top: 0px; /> 
</p> 
</form> 

Su botón de enviar secundaria aparecerá en primer lugar en la pantalla, pero el principal botón de envío debe prevalecer cuando se pulsa ENTER.

+0

Voy a aventurarme a decir que sería un diseño arquitectónico deficiente implementar dos botones de envío en un solo formulario. –

+1

En general, yo tendería a estar de acuerdo, pero cuando existe una solución dentro del diseño dado, me gustaría presentar eso como mi respuesta. – Wes

+0

Estoy de acuerdo, y a menudo me va bien, de ahí la razón por la que hago la declaración sin un voto adjunto, porque es una solución perfectamente viable para el problema. Simplemente no es un método que usaría. –

3

¿Qué hace el primer botón? Si sólo tiene un botón para adjunta un oyente a js, que no se somete, utilice

<button type="button" id="myButton">Text Here</button> 
-1
<script> 
$(function(){ 
    $('#button-new-captcha').click(function(){ 
     $('input[name=button-submit]').prop('name', 'button-new-captcha').click(); 
    }); 
}); 
</script> 

<div class="buttons"> 
    <a class="btn btn-cancel" href="/login">Cancel</a> 
    <a class="btn btn-default" href="#" id="button-new-captcha">New Image</a> 
    <input type="submit" name="button-submit" class="btn btn-default" value="Send Username">  
</div> 
+1

Explicación ...? – lpapp

0

Otra solución es crear una presenten adicional no funcional de entrada en el comienzo mismo de la forma y ocultarlo usando opacidad:

<input type="submit" value="" onclick="return false;" style="opacity: 0"> 

El botón todavía se representará en el página, aunque transparente, por lo que tendrá que proporcionar algunos bienes inmuebles para ello. Alternativamente, podría jugar empujándolo detrás de otro elemento usando z-index o renderizándolo fuera de la página como otros han sugerido aquí anteriormente.

Lo que ganes con onclick="return false;" es que el formulario no se enviará al presionar "Enter" nunca más; ninguna página de recarga, tampoco.

Cuestiones relacionadas