javascript - sublime - insertar imagen html5

Presionando "Volver" en un formulario HTML con múltiples botones de envío (6)

¿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 principal en el HTML? Entonces, puedes 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 secundario de envío aparecerá primero en la pantalla, pero el botón primario de envío debe tener prioridad cuando se presione enter.

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.

a los 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 formulario enviado. 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 vinculo oyentes 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 adelantado por su ayuda.

¿Qué hace el primer botón? Si solo necesita un botón para adjuntar un oyente js, que no envía, use

<button type="button" id="myButton">Text Here</button>

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

Podría, al menos teóricamente, tener tres botones de submit 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 la display:none 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;"  /> <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>

Editado en respuesta a los comentarios:

Pensé que los botones ocultos también estaban deshabilitados por defecto. [md5sum]

Un punto válido, pero cometí el error de probar solo en Firefox (3.5.7, Ubuntu 9.10) antes de publicar, en el que la técnica funcionó ¹ , 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;" /> <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 que un botón sea una parte activa del formulario (incluido en el conjunto de resultados y elegible para el botón predeterminado); 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:

"De la manera normal ..." 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 / hay casi seguramente muchas otras formas mejores, especialmente dado que No veo una buena razón para enviar múltiples botones en el mismo formulario.
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 que aparentemente no es un botón de envío .
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 ... =)

Aunque aprecio tu comentario sobre el tabindex, 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+ ofrece 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''.

Por lo tanto, definitivamente es una idea que vale la pena display: none; el botón enviar. Mientras que la visibility:hidden al menos funciona.

Con lo que quiero decir que presionar ''enter'' desencadenó el evento de envío de formulario o el evento de clic del primer botón de envío del formulario, independientemente de si el primer envío fue `display: none;` o `visibility: hidden`.
Tenga en cuenta que mis habilidades jQuery son limitadas, por lo que las pruebas empleadas (ejecuté solo a la vez para tratar de evitar conflictos que ocurran en la ejecución, comentando el que no ejecuté en ese momento, ambos se presentan, uno, claramente , comentado) puede ser insuficiente y no representativo.

<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>

Otra solución consiste en crear una entrada de envío no funcional adicional al principio del formulario y ocultarlo utilizando opacidad:

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

El botón seguirá apareciendo en la página, aunque sea transparente, por lo que tendrá que proporcionarle algunos bienes inmuebles. 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 gana con onclick="return false;" es que el formulario no será enviado al presionar "Entrar" más; ninguna página de recarga, tampoco.