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

08-06-2019
|

Pergunta

Digamos que você crie um Wizard em formato HTML.Um botão volta e outro avança.Desde o voltar aparece primeiro na marcação quando você pressiona Enter, ele usará esse botão para enviar o formulário.

Exemplo:

<form>
  <!-- put your cursor in this field and press Enter -->
  <input type="text" name="field1" />

  <!-- This is the button that will submit -->
  <input type="submit" name="prev" value="Previous Page" />

  <!-- But this is the button that I WANT to submit -->
  <input type="submit" name="next" value="Next Page" />
</form>

O que eu gostaria de fazer é decidir qual botão será usado para enviar o formulário quando um usuário pressionar Enter.Dessa forma, quando você pressionar Enter, o Assistente passará para a próxima página, não para a anterior.Você tem que usar tabindex para fazer isso?

Solução

Eu espero que isso ajude.Eu só estou fazendo o truque de floatos botões à direita.

Desta forma o Prev botão fica à esquerda do Next botão, mas o Next vem primeiro na estrutura HTML:

.f {
  float: right;
}
.clr {
  clear: both;
}

<form action="action" method="get">
  <input type="text" name="abc">
  <div id="buttons">
    <input type="submit" class="f" name="next" value="Next">
    <input type="submit" class="f" name="prev" value="Prev">
    <div class="clr"></div><!-- This div prevents later elements from floating with the buttons. Keeps them 'inside' div#buttons -->
  </div>
</form>

Editar: Benefícios sobre outras sugestões:sem JavaScript, acessível, ambos os botões permanecem type="submit"

Outras dicas

Seria possível alterar o tipo de botão anterior para um botão como este:

<input type="button" name="prev" value="Previous Page" />

Agora, o botão Avançar seria o padrão, e você também poderia adicionar o default atribua a ele para que seu navegador o destaque assim:

<input type="submit" name="next" value="Next Page" default />

Espero que ajude.

Dê aos seus botões de envio o mesmo nome assim:

<input type="submit" name="submitButton" value="Previous Page" />
<input type="submit" name="submitButton" value="Next Page" />

Quando o usuário pressiona enter e o Solicitar vai para o servidor, você pode verificar o valor de submitButton no código do lado do servidor que contém uma coleção de formulários name/value pares.Por exemplo em ASP clássico:

If Request.Form("submitButton") = "Previous Page" Then
    ' Code for Previous Page
ElseIf Request.Form("submitButton") = "Next Page" Then
    ' Code for Next Page
End If

Referência: Usando vários botões de envio em um único formulário

Se o fato de o primeiro botão ser usado por padrão for consistente em todos os navegadores, por que não colocá-los da maneira correta no código-fonte e usar CSS para mudar suas posições aparentes? float para a esquerda e para a direita para alterná-los visualmente, por exemplo.

Se você realmente deseja que ele funcione como uma caixa de diálogo de instalação, que tal apenas dar foco ao botão "Avançar" OnLoad.Dessa forma, se o usuário clicar em Return, o formulário será enviado e seguirá em frente.Se quiserem voltar, podem clicar em Tab ou clicar no botão.

Às vezes a solução fornecida pelo @palotasb não é suficiente.Existem casos de uso em que, por exemplo, um botão de envio "Filtrar" é colocado acima de botões como "Próximo e Anterior".Encontrei uma solução alternativa para isso: cópia de o botão de envio que precisa atuar como o botão de envio padrão em uma div oculta e colocá-lo dentro do formulário acima de qualquer outro botão de envio.Tecnicamente, ele será enviado por um botão diferente ao pressionar Enter e ao clicar no botão Avançar visível.Mas como o nome e o valor são iguais, não há diferença no resultado.

<html>
<head>
    <style>
        div.defaultsubmitbutton {
            display: none;
        }
    </style>
</head>
<body>
    <form action="action" method="get">
        <div class="defaultsubmitbutton">
            <input type="submit" name="next" value="Next">
        </div>
        <p><input type="text" name="filter"><input type="submit" value="Filter"></p>
        <p>Filtered results</p>
        <input type="radio" name="choice" value="1">Filtered result 1
        <input type="radio" name="choice" value="2">Filtered result 2
        <input type="radio" name="choice" value="3">Filtered result 3
        <div>                
            <input type="submit" name="prev" value="Prev">
            <input type="submit" name="next" value="Next">
        </div>
    </form>
</body>
</html>

Kevin, isso não pode ser feito com HTML puro.Você deve confiar no JavaScript para este truque.

No entanto, se você colocar dois formulários na página HTML, poderá fazer isso.

Form1 teria o botão anterior.

Form2 teria qualquer entrada do usuário + o próximo botão.

Quando o usuário pressiona Digitar no Form2, o botão Próximo envio seria acionado.

Você pode fazer isso com CSS.

Coloque os botões na marcação com o Next primeiro o botão e depois o Prev botão depois.

Em seguida, use CSS para posicioná-los para que tenham a aparência desejada.

Eu usaria Javascript para enviar o formulário.A função seria acionada pelo evento OnKeyPress do elemento do formulário e detectaria se a tecla Enter foi selecionada.Se for esse o caso, ele enviará o formulário.

Aqui estão duas páginas que fornecem técnicas sobre como fazer isso: 1, 2.Com base nisso, aqui está um exemplo de uso (com base em aqui):

<SCRIPT TYPE="text/javascript">//<!--
function submitenter(myfield,e) {
  var keycode;
  if (window.event) {
    keycode = window.event.keyCode;
  } else if (e) { 
    keycode = e.which;
  } else {
    return true;
  }

  if (keycode == 13) {
    myfield.form.submit();
    return false;
  } else {
    return true;
  }
}
//--></SCRIPT>

<INPUT NAME="MyText" TYPE="Text" onKeyPress="return submitenter(this,event)" />

Kevin,

Isso funciona sem javascript ou CSS na maioria dos navegadores:

<form>
<p><input type="text" name="field1" /></p>
<p><a href="previous.html">
<button type="button">Previous Page</button></a>
<button type="submit">Next Page</button></p>
</form>

Firefox, Opera, Safari, Google Chrome funcionam.
Como sempre, o IE é o problema.

Esta versão funciona quando o javascript está ativado:

<form>
<p><input type="text" name="field1" /></p>
<p><a href="previous.html">
<button type="button" onclick="window.location='previous.html'">Previous Page</button></a>
<button type="submit">Next Page</button></p>
</form>

Portanto, a falha nesta solução é:
A página anterior não funciona se você usar o IE com o Javascript desativado.
Veja bem, o botão Voltar ainda funciona!

Se você tiver vários botões ativos em uma página, poderá fazer algo assim:

Marque o primeiro botão que você deseja ativar Digitar pressione a tecla como botão padrão no formulário.Para o segundo botão associe-o a Retrocesso botão no teclado. Retrocesso o código do evento é 8.

$(document).on("keydown", function(event) {
  if (event.which.toString() == "8") {
    var findActiveElementsClosestForm = $(document.activeElement).closest("form");

    if (findActiveElementsClosestForm && findActiveElementsClosestForm.length) {
      $("form#" + findActiveElementsClosestForm[0].id + " .secondary_button").trigger("click");
    }
  }
});

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>

<form action="action" method="get" defaultbutton="TriggerOnEnter">
  <input type="submit" id="PreviousButton" name="prev" value="Prev" class="secondary_button" />
  <input type="submit" id='TriggerOnEnter' name="next" value="Next" class="primary_button" />
</form>

Espero que isto ajude.

Alterar a ordem das guias deve ser suficiente para fazer isso.Mantenha simples.

Outra opção simples seria colocar o botão Voltar após o botão enviar no código HTML, mas flutuá-lo para a esquerda para que apareça na página antes do botão enviar.

Alterar a ordem das guias deve ser suficiente para fazer isso.Mantenha simples.

mantenha o nome de todos os botões de envio iguais - "anterior" A única diferença é o value atributo com valores exclusivos.Quando criamos o script, esses valores exclusivos nos ajudarão a descobrir qual dos botões de envio foi pressionado.

E escreva a seguinte codificação:

    btnID = ""
if Request.Form("prev") = "Previous Page" then
    btnID = "1"
else if Request.Form("prev") = "Next Page" then
    btnID = "2"
end if

A primeira vez que me deparei com isso, descobri um hack onclick()/js quando as opções não são anterior/próximo, que ainda gosto por sua simplicidade.É assim:

@model myApp.Models.myModel    

<script type="text/javascript">
    function doOperation(op) {
        document.getElementById("OperationId").innerText = op;
        // you could also use Ajax to reference the element.
    }
</script>

<form>
  <input type="text" id = "TextFieldId" name="TextField" value="" />
  <input type="hidden" id="OperationId" name="Operation" value="" />
  <input type="submit" name="write" value="Write" onclick='doOperation("Write")'/>
  <input type="submit" name="read" value="Read" onclick='doOperation("Read")'/>
</form>

Quando qualquer botão de envio é clicado, ele armazena a operação desejada em um campo oculto (que é um campo de string incluído no modelo ao qual o formulário está associado) e envia o formulário ao Controlador, que toma toda a decisão.No Controller, você simplesmente escreve:

// Do operation according to which submit button was clicked
// based on the contents of the hidden Operation field.
if (myModel.Operation == "Read")
{
     // do read logic
}
else if (myModel.Operation == "Write")
{
     // do write logic
}
else
{
     // do error logic
}

Você também pode restringir um pouco isso usando códigos de operação numéricos para evitar a análise de strings, mas, a menos que você brinque com Enums, o código é menos legível, modificável e autodocumentado e a análise é trivial, de qualquer maneira.

Isto é o que eu experimentei:1.Você precisa garantir que você dê aos seus botões nomes diferentes 2.Escreva uma instrução if que executará a ação necessária se um dos botões for clicado.

<form>
<input type="text" name="field1" /> <!-- put your cursor in this field and press Enter -->

<input type="submit" name="prev" value="Previous Page" /> <!-- This is the button that will submit -->
<input type="submit" name="next" value="Next Page" /> <!-- But this is the button that I WANT to submit -->
</form>

Em PHP,

if(isset($_POST['prev']))
{
header("Location: previous.html");
die();
}

if(isset($_POST['next']))
{
header("Location: next.html");
die();

}

De https://html.spec.whatwg.org/multipage/forms.html#implicit-submission

O botão padrão de um elemento de formulário é o primeiro botão de envio em ordem de árvore cujo proprietário do formulário é esse elemento de formulário.

Se o agente do usuário suportar deixar o usuário enviar um formulário implicitamente (por exemplo, em algumas plataformas que atingem a tecla "Enter" enquanto um campo de texto é focado, envia implicitamente o formulário) ...

Ter a próxima entrada type="submit" e alterar a entrada anterior para type="button" deve fornecer o comportamento padrão desejado.

<form>
   <input type="text" name="field1" /> <!-- put your cursor in this field and press Enter -->

   <input type="button" name="prev" value="Previous Page" /> <!-- This is the button that will submit -->
   <input type="submit" name="next" value="Next Page" /> <!-- But this is the button that I WANT to submit -->
</form>

Me deparei com essa pergunta ao tentar encontrar uma resposta para basicamente a mesma coisa, apenas com controles asp.net, quando descobri que o botão asp tem uma propriedade chamada UseSubmitBehavior que permite definir qual deles fará o envio.

<asp:Button runat="server" ID="SumbitButton" UseSubmitBehavior="False" Text="Submit" />

Apenas no caso de alguém estar procurando a maneira do botão asp.net de fazer isso.

Com javascript (aqui jQuery), você pode desabilitar o botão anterior antes de enviar o formulário.

$('form').on('keypress', function(event) {
    if (event.which == 13) {
        $('input[name="prev"]').prop('type', 'button');
    }
});

Resolvi um problema muito semelhante desta maneira:

se javascript está habilitado (na maioria dos casos hoje em dia), então todos os botões de envio são "degradado"para botões no carregamento da página via javascript (jquery).Clique em eventos no "degradado"Os botões digitados por botão também são manipulados via javascript.
se javascript não estiver ativado, o formulário será enviado ao navegador com vários botões de envio.Neste caso, pressionar Enter em um textfield dentro do formulário enviará o formulário com o primeiro botão em vez do pretendido padrão, mas pelo menos o formulário ainda pode ser usado:você pode enviar com ambos os anterior e próximo botões.

exemplo de trabalho:

<html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    </head>
    <body>
    <form action="http://httpbin.org/post" method="post">
    If javascript is disabled, then you CAN submit the form with button1, button2 or button3.
    If you press enter on a text field, then the form is submitted with the first submit button.

    If javascript is enabled, then the submit typed buttons without the 'defaultSubmitButton'
    style are converted to button typed buttons.

    If you press enter on a text field, then the form is submitted with the only submit button
    (the one with class defaultSubmitButton)
    If you click on any other button in the form, then the form is submitted with that button's
    value.
    <br />
    <input type="text" name="text1" ></input>
    <button type="submit" name="action" value="button1" >button 1</button>
    <br />
    <input type="text" name="text2" ></input>
    <button type="submit" name="action" value="button2" >button 2</button>
    <br />
    <input type="text" name="text3" ></input>
    <button class="defaultSubmitButton" type="submit" name="action" value="button3" >default button</button>
    </form>
    <script>
    $(document).ready(function(){

    /* change submit typed buttons without the 'defaultSubmitButton' style to button typed buttons */
    $('form button[type=submit]').not('.defaultSubmitButton').each(function(){
        $(this).attr('type', 'button');
    });

    /* clicking on button typed buttons results in:
       1. setting the form's submit button's value to the clicked button's value,
       2. clicking on the form's submit button */
    $('form button[type=button]').click(function( event ){
        var form = event.target.closest('form');
        var submit = $("button[type='submit']",form).first();
        submit.val(event.target.value);
        submit.click();
    });

    });
    </script>
    </body>
    </html>

Experimente isso..!

<form>
  <input type="text" name="Name" />
  <!-- Enter the value -->

  <input type="button" name="prev" value="Previous Page" />
  <!-- This is the button that will submit -->
  <input type="submit" name="next" value="Next Page" />
  <!-- But this is the button that I WANT to submit -->
</form>

Você pode usar Tabindex para resolver esse problema. Alterar também a ordem dos botões seria uma maneira mais eficiente de conseguir isso.Altere a ordem do botão e adicione float valores para atribuir a eles a posição desejada que você deseja mostrar em seu HTML visualizar.

Usando o exemplo que você deu:

<form>
<input type="text" name="field1" /><!-- put your cursor in this field and press Enter -->
<input type="submit" name="prev" value="Previous Page" /> <!-- This is the button that will submit -->
<input type="submit" name="next" value="Next Page" /> <!-- But this is the button that I WANT to submit -->
</form>

Se você clicar em “Página Anterior” somente o valor de “anterior” será enviado.Se você clicar em “Próxima Página” somente o valor de “próximo” será enviado.

Se, no entanto, você pressionar Enter em algum lugar do formulário, nem "anterior" nem "próximo" serão enviados.

Então, usando pseudocódigo, você poderia fazer o seguinte:

If "prev" submitted then
    Previous Page was click
Else If "next" submitted then
    Next Page was click
Else
    No button was click

Licenciado em: CC-BY-SA com atribuição

Não afiliado a StackOverflow