Multiple enviar botões em um formulário HTML

Dê seu enviar botões mesmo nome como esta:

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

Quando o usuário pressiona entrar e a solicitação vai para o servidor, você pode verificar o valor para submitButtonem seu código do lado do servidor que contém uma coleção de formulário name/valuepares. 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

Seria possível para você mudar o tipo de botão anterior em 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 pode adicionar o defaultatributo a ele para que o seu browser irá destacá-lo assim:

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

Espero que ajude.

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

Gostaria de usar o Javascript para enviar o formulário. A função seria acionado pelo evento OnKeyPress do elemento de formulário, e seria detectar se a tecla Enter foi selecionado. Se este for o caso, ele irá enviar o formulário.

Aqui estão duas páginas que fornecem técnicas sobre como fazer isso: 1 , 2 . Com base nestes, aqui é um exemplo de uso (com base no 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)" />

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" apenas o valor de "prev" será submetido. Se você clicar em "Próxima página" apenas o valor de "próxima" será submetido.

Se, no entanto, você pressionar enter em algum lugar sobre a forma, nem "prev" nem "próxima" será submetido.

Então, usando o código pseudo 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

Se você realmente só quer que ele funcione como um diálogo de instalação, o que acontece apenas dando foco para o "Next" OnLoad botão. Dessa forma, se o usuário acerta retorno, o formulário envia e vai para a frente. Se eles querem voltar eles podem bater Tab ou clique no botão.

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

No entanto, se você colocar duas formas na página HTML você pode fazer isso.

Form1 teria o botão anterior.

Form2 teria quaisquer entradas do usuário + no botão ao lado.

Quando o usuário pressiona Enterno Form2, o próximo botão enviar iria disparar.

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 todo o trabalho.
Como sempre, o IE é o problema.

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

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

Assim, a falha nesta solução é:
Página anterior não funciona se você usar o IE com Javascript desligado.
Lembre-se, o botão voltar ainda funciona!

Pode trabalhar com CSS

Colocá-los na marcação como o botão próximo primeiro, depois o botão anterior seguinte.

Em seguida, use CSS para posicioná-los para aparecer da maneira que quiser

manter o nome de todos os botões de envio da mesma - "prev" A única diferença é o valueatributo com valores exclusivos. Quando criamos o script, estes valores exclusivos nos ajudará a descobrir qual dos botões apresentar foi pressionado.

E escrever follwing codificação:

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

Às vezes, a solução fornecida pela @palotasb não é suficiente. Há casos de uso onde, por exemplo, um botão "Filtro" submit é colocado acima botões como "Avançar e Anterior". Eu encontrei uma solução para este: copiar o botão enviar que precisa agir como padrão botão enviar em um div oculto e colocá-lo dentro do formulário acima de qualquer outro botão enviar. Tecnicamente, ele será submetido por um botão diferente ao pressionar Enter, em seguida, ao clicar no botão visível em Avançar. Mas desde que o nome e o valor é o mesmo, não há nenhuma 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>

Alterando a ordem de tabulação deve ser tudo o que preciso para fazer isso. Mantenha simples.

Outra opção simples seria a de colocar o botão de volta após o botão enviar no código HTML, mas flutuar para a esquerda para que ele apareça na página antes no botão enviar.

Isto é o que eu tentei out: 1. Você precisa ter certeza de que você dá seus botões diferentes nomes 2. Escrever uma declaração if que vai fazer a ação necessária se qualquer botão em 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();

}

Se você tem vários botões ativos em uma única página, em seguida, você pode fazer algo como isto:

Mark o primeiro botão que deseja desencadeia no Enterkeypress como DefaultButton no formulário. Para o segundo botão associá-lo ao Backspacebotão no teclado. BackspaceeventCode é 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.

Outra opção simples seria a de colocar o botão de volta após o botão enviar no código HTML, mas flutuar para a esquerda para que ele apareça na página antes no botão enviar.

Alterando a ordem de tabulação deve ser tudo o que preciso para fazer isso. Mantenha simples.

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

botão padrão de um elemento de formulário é o primeiro botão enviar, a fim de árvore cujo dono forma é que elemento de formulário.

Se o agente do usuário suporta permitindo que o usuário enviar um formulário implicitamente (por exemplo, em algumas plataformas bater a tecla "enter", enquanto um campo de texto é focado submete implicitamente o formulário) ...

Tendo a próxima entrada ser type = "submit" e alterar a entrada anterior a type = "button" deve dar 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>