Vários botões de envio no formulário HTML – designe um botão como padrão [duplicado]

Question

Essa pergunta já tem resposta aqui:

• Vários botões de envio em um formulário HTML 23 respostas

Eu tenho um formulário que possui três botões de envio, como segue:

<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';">

A linha de botões é uma mistura de botões de envio, redefinição e JavaScript.A ordem dos botões está sujeita a alterações, mas em qualquer caso o botão salvar permanece entre os botões anterior e seguinte.

O problema aqui é que quando um usuário acessa Digitar para enviar o formulário, a variável post "COMMAND" contém "Prev";normal, pois este é o primeiro botão de envio do formulário.No entanto, quero que o botão "Avançar" seja acionado quando o usuário enviar o formulário por meio do Digitar botão.É como defini-lo como o botão de envio padrão, mesmo que existam outros botões antes dele.

Answer 1

Minha sugestão é não lutar contra esse comportamento. Você pode alterar efetivamente o pedido usando carros alegóricos. Por exemplo:

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

com:

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

reverterá efetivamente a ordem e, portanto, o botão "próximo" será o valor acionado pressionando Enter.

Esse tipo de técnica abrangerá muitas circunstâncias sem precisar recorrer a mais métodos de JavaScript hacky.

Answer 2

O primeiro botão é sempre o padrão;não pode ser alterado.Enquanto você pode tente corrigi-lo com JavaScript, o formulário se comportará inesperadamente em um navegador sem script e há alguns casos de usabilidade/acessibilidade a serem considerados.Por exemplo, o código vinculado por Zoran enviará acidentalmente o formulário ao pressionar Enter em um <input type="button">, o que normalmente não aconteceria e não detectará o comportamento do IE de enviar o formulário para Enter, pressione outro conteúdo que não seja de campo no formulário.Então, se você clicar em algum texto em um <p> no formulário com esse script e pressione Enter, o botão errado será enviado...especialmente perigoso se, como mostrado nesse exemplo, o botão padrão real for ‘Excluir’!

Meu conselho seria esquecer o uso de hacks de script para reatribuir a inadimplência.Siga o fluxo do navegador e coloque primeiro o botão padrão.Se você não pode hackear o layout para obter a ordem desejada na tela, você pode fazer isso colocando um botão invisível fictício primeiro na fonte, com o mesmo nome/valor do botão que você deseja que seja o padrão:

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

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

(observação:posicionamento é usado para empurrar o botão para fora da tela porque display: none e visibility: hidden têm efeitos colaterais variáveis ​​​​no navegador sobre se o botão é considerado padrão e se é enviado.)

Answer 3

Quick'n'dirty Você pode criar uma duplicata oculta do botão de envio, que deve ser usado, ao pressionar Enter.

Exemplo CSS

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

Exemplo html

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

Se alguém chegar agora a entrar em seu formulário, o próximo botão (oculto) será usado como submissor.

Testado no IE9, Firefox, Chrome e Opera

Answer 4

Definir type=submit para o botão que você gostaria de ser padrão e type=button para outros botões. Agora, no formulário abaixo, você pode pressionar Enter em qualquer campo de entrada e o Render O botão funcionará (apesar do fato de ser o segundo botão no formulário).

Exemplo:

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

Testado em FF24 e Chrome 35.

Answer 5

Se você está usando jQuery, esta solução de um comentário feito aqui é muito liso:

$(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
        }));
    });
});

Basta adicionar class="default" Para o botão, você deseja ser o padrão. Ele coloca uma cópia oculta desse botão logo no início do formulário.

Answer 6

Estou ressuscitando isso porque estava pesquisando uma maneira não-Javascript de fazer isso. Eu não estava nos manipuladores de chaves, e o material de posicionamento do CSS estava fazendo com que a ordem da guia quebrasse, pois o reposicionamento do CSS não muda a ordem da guia.

Minha solução é baseada na resposta em https://stackoverflow.com/a/9491141.

A fonte da solução está abaixo. O Tabindex é usado para corrigir o comportamento da guia do botão oculto, bem como a Aria-Hidden para evitar que o botão seja lido pelos leitores de tela / identificado por dispositivos de assistência.

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

1º botão no botão DOM 2º no DOM 3º botão em DOM

CSS essencial para esta solução:

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

Answer 7

Outra solução, usando jQuery:

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

    return true;
  });
});

Isso deve funcionar nos seguintes formulários, fazendo "atualizar" a ação padrão:

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

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

Isso prende a tecla Enter apenas quando um campo de entrada no formulário tem foco.

Answer 8

Você não deve usar botões com o mesmo nome. É uma semântica ruim. Em vez disso, você deve modificar seu back -end para procurar diferentes valores de nome sendo definidos:

<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';">

Como não sei qual idioma você está usando no back -end, eu vou te dar um pouco de 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

A solução de Bobince tem a desvantagem de criar um botão que possa ser Aba-D over, mas inutilizável. Isso pode criar confusão para os usuários do teclado.

Uma solução diferente é usar o pouco conhecido form atributo:

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

Isto é HTML padrão, no entanto, infelizmente não é suportado no Internet Explorer.