Múltiples botones de envío de formulario HTML - designar un botón por defecto [duplicado]

Question

    

Esta pregunta ya tiene una respuesta aquí:

    

        
•              múltiple botones de envío en un formulario HTML                                      23 respuestas                          
    

    

Tengo un formulario que tiene tres botones de envío de la siguiente manera:

<input type="submit" name="COMMAND" value="&lsaquo; Prev">
<input type="submit" name="COMMAND" value="Save">
<input type="reset"  name="NOTHING" value="Reset">
<input type="submit" name="COMMAND" value="Next &rsaquo;">
<input type="button" name="NOTHING" value="Skip &rsaquo;" onclick="location = 'yada-yada.asp';">

La fila de botones es una mezcla de presentar, restablecer y botones de JavaScript. El orden de los botones está sujeta a cambios, pero en cualquier caso el botón de guardar permanece entre prev y siguiente.

El problema aquí es que cuando un usuario pulsa Enter para enviar el formulario, el destino variable "COMANDO" contiene "Anterior"; normal, ya que este es el primer botón de envío del formulario. Sin embargo quiero el botón "Siguiente", que se activará cuando el usuario envía el formulario a través del botón Intro . Es algo así como establecer como predeterminado botón de enviar, a pesar de que hay otros botones que tiene ante sí.

Answer 1

Mi sugerencia es no luchar contra este comportamiento. Usted puede alterar de manera efectiva la orden usando flotadores. Por ejemplo:

<p id="buttons">
<input type="submit" name="next" value="Next">
<input type="submit" name="prev" value="Previous">
</p>

por:

#buttons { overflow: hidden; }
#buttons input { float: right; }

revierta efectivamente la de este modo en el botón "Siguiente" orden y será el valor provocada por oprimir la tecla Enter.

Este tipo de técnica cubrirá muchas circunstancias, sin tener que recurrir a métodos de JavaScript más hacky.

Answer 2

El primer botón es siempre el valor por defecto; no se puede cambiar. Mientras que puede tratar de arreglarla con JavaScript, el formulario se comporta de forma inesperada en un navegador sin necesidad de secuencias de comandos, y hay algunos casos usabilidad / accesibilidad de las esquinas en las que pensar. Por ejemplo, el código relacionado con Zoran accidentalmente enviar el formulario en Enter prensa en una <input type="button">, que normalmente no iba a pasar, y no ponerse al comportamiento de enviar el formulario de IE en Enter prensa el otro contenido que no sea el campo en el formar. Así que si se hace clic en un texto en un <p> el formulario con esa secuencia de comandos y pulse Intro, el botón equivocado se presentará ... especialmente peligroso si, como se da en ese ejemplo, el botón de bienes por defecto es 'Borrar'!

Mi consejo sería olvidarse de usar hacks de secuencias de comandos para reasignar defaultness. Ir con la corriente del navegador y sólo hay que poner primero el botón predeterminado. Si no se puede piratear la disposición para darle el orden en pantalla que desee, a continuación, puede hacerlo por tener un botón invisible simulado por primera vez en la fuente, con el mismo nombre / valor que el botón que desea ser por defecto:

<input type="submit" class="defaultsink" name="COMMAND" value="Save" />

.defaultsink {
    position: absolute; left: -100%;
}

(nota:. Posicionamiento se utiliza para empujar el botón de apagado de pantalla porque display: none y visibility: hidden tener un navegador variable efectos secundarios sobre si el botón se toma como valor predeterminado y si está presentado)

Answer 3

Quick'n'dirty se podría crear un duplicado de la oculto-botón de enviar, que se debe utilizar, al presionar enter.

Ejemplo CSS

input.hidden {
    width: 0px;
    height: 0px;
    margin: 0px;
    padding: 0px;
    outline: none;
    border: 0px;
}

Ejemplo HTML

<input type="submit" name="next" value="Next" class="hidden" />
<input type="submit" name="prev" value="Previous" />
<input type="submit" name="next" value="Next" />

Si alguien golpea ahora entrar en su formulario, el siguiente botón (oculto) se utilizará como remitente.

Probado en IE9, Firefox, Chrome y Opera

Answer 4

Conjunto type=submit al botón que le gustaría ser defecto y type=button a otros botones. Ahora el siguiente formulario puede pulsar Enter en cualquier campo de entrada, y el botón Render va a trabajar (a pesar del hecho de que es el segundo botón en el formulario).

Ejemplo:

    <button id='close_button' class='btn btn-success'
            type=button>
      <span class='glyphicon glyphicon-edit'> </span> Edit program
    </button>
    <button id='render_button' class='btn btn-primary'
            type=submit>             <!--  Here we use SUBMIT, not BUTTON -->
      <span class='glyphicon glyphicon-send'> </span> Render
    </button>

Probado en FF24 y Chrome 35.

Answer 5

Si estás usando jQuery, esta solución de un comentario hecho aquí es bastante resbaladiza:

$(function(){
    $('form').each(function () {
        var thisform = $(this);
        thisform.prepend(thisform.find('button.default').clone().css({
            position: 'absolute',
            left: '-999px',
            top: '-999px',
            height: 0,
            width: 0
        }));
    });
});

Sólo tiene que añadir class="default" al botón que desea que sea el predeterminado. Se coloca una copia oculta de ese botón de la derecha al principio del formulario.

Answer 6

Estoy resucitar esto porque yo estaba investigando una manera no JavaScript para hacer esto. No estaba en los manipuladores de claves, y las cosas posicionamiento CSS estaba causando el orden de tabulación para romper desde el reposicionamiento CSS no cambia el orden de tabulación.

Mi solución se basa en la respuesta al https://stackoverflow.com/a/9491141 .

La fuente solución es a continuación. tabindex se utiliza para corregir el comportamiento ficha del botón oculto, así como aria-ocultos para evitar que el botón leída por los lectores de pantalla / identificados por los dispositivos de ayuda.

<form method="post" action="">
  <button type="submit" name="useraction" value="2nd" class="default-button-handler" aria-hidden="true" tabindex="-1"></button>
  <div class="form-group">
    <label for="test-input">Focus into this input: </label>
    <input type="text" id="test-input" class="form-control" name="test-input" placeholder="Focus in here and press enter / go" />
  </div>

primero el botón de DOM   Segundo botón en el DOM   3er botón de DOM

CSS esencial para esta solución:

.default-button-handler {
  width: 0;
  height: 0;
  padding: 0;
  border: 0;
  margin: 0;
}

Answer 7

Otra solución, utilizando jQuery:

$(document).ready(function() {
  $("input").keypress(function(e) {
    if (e.which == 13) {
      $('#submit').click();
      return false;
    }

    return true;
  });
});

Esto debería funcionar en las siguientes formas, por lo que "Actualizar" la acción por defecto:

<form name="f" method="post" action="/action">
  <input type="text" name="text1" />
  <input type="submit" name="button2" value="Delete" />
  <input type="submit" name="button1" id="submit" value="Update" />
</form>

Así como:

<form name="f" method="post" action="/action">
  <input type="text" name="text1" />
  <button type="submit" name="button2">Delete</button>
  <button type="submit" name="button1" id="submit">Update</button>
</form>

Esto atrapa la tecla Intro sólo cuando un campo de entrada en el formulario tiene el foco.

Answer 8

No debe utilizar los botones del mismo nombre. Es de mala semántica. En su lugar, debe modificar su base de buscar diferentes valores de nombre que se establece:

<input type="submit" name="COMMAND_PREV" value="&lsaquo; Prev">
<input type="submit" name="COMMAND_SAVE" value="Save">
<input type="reset"  name="NOTHING" value="Reset">
<input type="submit" name="COMMAND_NEXT" value="Next &rsaquo;">
<input type="button" name="NOTHING" value="Skip &rsaquo;" onclick="window.location = 'yada-yada.asp';">

Dado que no sé qué idioma se está utilizando en el backend, te voy a dar algunos pseudocódigo:

if (input name COMMAND_PREV is set) {

} else if (input name COMMAND_SAVE is set) {

} else if (input name COMMENT_NEXT is set) {

}

Answer 9

La solución de bobince tiene la desventaja de crear un botón que puede ser Tab -d más, pero por lo demás inutilizable. Esto puede crear confusión para los usuarios de teclado.

Una solución diferente es usar el poco conocido atributo form:

<form>
    <input name="data" value="Form data here">
    <input type="submit" name="do-secondary-action" form="form2" value="Do secondary action">
    <input type="submit" name="submit" value="Submit">
</form>

<form id="form2"></form>

Este es estándar HTML, sin embargo, lamentablemente no es compatible en Internet Explorer.