Multiple enviar botões em um formulário HTML

votos
233

Digamos que você criar um assistente em um formulário HTML. Um botão de volta, e um vai para a frente. Desde a volta botão aparece primeiro na marcação quando você pressionar 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, é começa a decidir qual botão é usado para enviar o formulário quando o usuário pressiona Enter. Dessa forma, quando você pressionar Enter o Assistente irá mover para a próxima página, e não a anterior. Você tem que usar tabindexpara fazer isso?

Publicado 01/08/2008 em 14:01
fonte usuário
Em outras línguas...                            


23 respostas

votos
133

Eu espero que isso ajude. Eu só estou fazendo o truque do floating os botões à direita.

Desta forma, o botão Prev está à esquerda do botão Avançar Mas a próxima vem em primeiro lugar no código 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>

EDIT: Benefícios sobre outras sugestões: não JavaScript, acessível, os dois botões permanecemtype="submit"

Respondeu 28/08/2008 em 10:34
fonte usuário

votos
60

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.

Respondeu 01/08/2008 em 14:14
fonte usuário

votos
53

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

Respondeu 01/08/2008 em 14:10
fonte usuário

votos
30

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.

Respondeu 02/08/2008 em 12:24
fonte usuário

votos
17

À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>
Respondeu 26/10/2012 em 10:53
fonte usuário

votos
17

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

Respondeu 16/09/2008 em 13:16
fonte usuário

votos
17

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.

Respondeu 26/08/2008 em 04:44
fonte usuário

votos
17

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.

Respondeu 26/08/2008 em 04:41
fonte usuário

votos
15

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)" />
Respondeu 03/08/2008 em 14:12
fonte usuário

votos
14

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!

Respondeu 16/09/2008 em 12:19
fonte usuário

votos
13

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.

Respondeu 14/03/2014 em 15:51
fonte usuário

votos
12

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.

Respondeu 14/10/2014 em 17:02
fonte usuário

votos
12

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.

Respondeu 27/11/2012 em 23:27
fonte usuário

votos
11

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
Respondeu 05/06/2012 em 10:19
fonte usuário

votos
10

A primeira vez que subiu contra este eu vim com um onclick () / js cortar quando as escolhas não são prev / next que eu ainda gosto de sua simplicidade. Ele vai como esta:

@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 um botão enviar é clicado ele armazena a operação desejada em um campo oculto (que é um campo de cadeia incluída no modelo do formulário está associada) e envia o formulário para o Controlador, o que faz todo o decidir. No Controller, você simplesmente escrever:

// 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 apertar isto ligeiramente usando códigos de operação numérica para evitar a análise de cadeia, mas a menos que você joga com enumerações, o código é menos legível, modificável, e auto-documentação e a análise é trivial, de qualquer maneira.

Respondeu 03/09/2015 em 13:30
fonte usuário

votos
10

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>
Respondeu 28/03/2015 em 21:05
fonte usuário

votos
10

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

}
Respondeu 03/03/2014 em 07:16
fonte usuário

votos
8

Me deparei com esta questão quando se tenta encontrar uma resposta para basicamente a mesma coisa, só que com controles asp.net, quando eu descobri que o botão de asp tem uma propriedade chamada UseSubmitBehaviorque permite definir qual deles faz o submeter.

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

Apenas no caso de alguém está procurando o botão asp.net maneira de fazê-lo.

Respondeu 24/03/2016 em 17:29
fonte usuário

votos
7

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

$('form').on('keypress', function(event) {
    if (event.which == 13) {
        $('input[name="prev"]').prop('type', 'button');
    }
});
Respondeu 14/08/2015 em 10:01
fonte usuário

votos
0

Você pode usar Tabindexpara resolver este problema, também alterar a ordem de botão seria a maneira mais eficiente para alcançar este objectivo. Alterar a ordem de botão e adicionar floatvalores a atribuir-lhes a posição desejada você quer mostrar na sua HTMLvista.

Respondeu 25/04/2018 em 06:28
fonte usuário

votos
0

Eu resolvi um problema muito semelhante, desta forma:

  1. se javascriptestá habilitado (na maioria dos casos hoje em dia), em seguida, todos os botões apresentar são " degradado " para botões no carregamento da página via javascript(jquery). Clique eventos nas " degradadas botões" digitado botão são tratados também via javascript.

  2. se javascriptnão está habilitado, em seguida, o formulário é servido para o navegador com vários botões de envio. Neste caso bater entrar em um textfielddentro do formulário irá enviar o formulário com o primeiro botão em vez do pretendido padrão , mas pelo menos o formulário ainda é utilizável: você pode enviar tanto com o prev e próximos 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>

Respondeu 09/01/2018 em 15:26
fonte usuário

votos
0

Tente este ..!

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

Respondeu 29/09/2017 em 04:58
fonte usuário

votos
-3

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
Respondeu 05/08/2008 em 16:08
fonte usuário

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more