Varios botones de envío en un formulario HTML

votos
233

Digamos que crea un asistente en un formulario HTML. Un botón retrocede, y uno avanza. Como el botón Atrás aparece primero en el marcado cuando presiona Entrar, usará ese botón para enviar el formulario.

Ejemplo:

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

Lo que me gustaría hacer es decidir qué botón se utiliza para enviar el formulario cuando el usuario presiona Entrar. De esa manera, cuando presione Enter, el Wizard se moverá a la página siguiente, no a la anterior. ¿Tienes que usar tabindexpara hacer esto?

Publicado el 01/08/2008 a las 14:01
fuente por usuario
En otros idiomas...                            


23 respuestas

votos
133

Espero que esto ayude. Solo estoy haciendo el truco de floatpresionar los botones a la derecha.

De esta forma, el botón Anterior queda a la izquierda del botón Siguiente pero el Siguiente es el primero en el 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>

Editar: ventajas sobre otras sugerencias: sin JavaScript, accesible, ambos botones permanecentype="submit"

Respondida el 28/08/2008 a las 10:34
fuente por usuario

votos
60

¿Sería posible para usted cambiar el tipo de botón anterior en un botón como este?

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

Ahora, el botón Siguiente sería el predeterminado, además de que también podría agregarle el defaultatributo para que su navegador lo resalte así:

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

Espero que ayude.

Respondida el 01/08/2008 a las 14:14
fuente por usuario

votos
53

Dale a tus botones de envío el mismo nombre así:

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

Cuando el usuario presiona ingresar y la Solicitud va al servidor, puede verificar el valor submitButtonen el código del lado del servidor que contiene una colección de name/valuepares de formularios . Por ejemplo en ASP clásico:

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

Referencia: uso de múltiples botones de envío en una sola forma

Respondida el 01/08/2008 a las 14:10
fuente por usuario

votos
30

Si el hecho de que el primer botón se utiliza por defecto es coherente en todos los navegadores, ¿por qué no ponerlos en el código fuente correcto y luego usar CSS para cambiar sus posiciones aparentes? floata izquierda y derecha para cambiarlos visualmente, por ejemplo.

Respondida el 02/08/2008 a las 12:24
fuente por usuario

votos
17

A veces, la solución proporcionada por @palotasb no es suficiente. Hay casos de uso donde por ejemplo se coloca un botón "Filtrar" enviar por encima de botones como "siguiente y anterior". He encontrado una solución para esto: copiar el botón de enviar, que tiene que actuar como predeterminado botón de enviar en un div oculto y colocarlo dentro de la forma por encima de cualquier otro botón de enviar. Técnicamente se presentará mediante un botón diferente al pulsar Intro entonces cuando se hace clic en el botón Siguiente visible. Pero dado que el nombre y el valor es el mismo, no hay diferencia en el 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>
Respondida el 26/10/2012 a las 10:53
fuente por usuario

votos
17

Puede funcionar con CSS

Póngalos en el marcado como el siguiente botón primero, luego el siguiente botón anterior.

Luego usa CSS para posicionarlos para que aparezcan de la manera que quieras

Respondida el 16/09/2008 a las 13:16
fuente por usuario

votos
17

Kevin, esto no se puede hacer con HTML puro. Debes confiar en JavaScript para este truco.

Sin embargo, si coloca dos formularios en la página HTML, puede hacerlo.

Form1 tendría el botón anterior.

Form2 tendría cualquier entrada de usuario + el siguiente botón.

Cuando el usuario presiona Enteren Form2, se activará el botón Siguiente envío.

Respondida el 26/08/2008 a las 04:44
fuente por usuario

votos
17

Si realmente solo quieres que funcione como un diálogo de instalación, ¿qué tal si simplemente te enfocas en el botón "Siguiente" OnLoad? De esta forma, si el usuario toca Retorno, el formulario envía y continúa. Si quieren regresar, pueden presionar la tecla Tab o hacer clic en el botón.

Respondida el 26/08/2008 a las 04:41
fuente por usuario

votos
15

Usaría Javascript para enviar el formulario. La función se desencadenaría mediante el evento OnKeyPress del elemento de formulario y detectaría si se seleccionó la tecla Intro. Si este es el caso, enviará el formulario.

Aquí hay dos páginas que ofrecen técnicas sobre cómo hacer esto: 1 , 2 . En base a esto, aquí hay un ejemplo de uso (basado en aquí ):

<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)" />
Respondida el 03/08/2008 a las 14:12
fuente por usuario

votos
14

Kevin,

Esto funciona sin javascript o CSS en la mayoría de los 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 funciona.
Como siempre, IE es el problema.

Esta versión funciona cuando javascript está activado:

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

Entonces, el defecto en esta solución es: la
página anterior no funciona si usa IE con Javascript desactivado.
¡Cuidado, el botón de retroceso todavía funciona!

Respondida el 16/09/2008 a las 12:19
fuente por usuario

votos
13

Si tiene varios botones activos en una sola página, entonces puede hacer algo como esto:

Marca el primer botón que desea dispara en Enterpulsación de tecla como defaultButton en el formulario. Para el segundo botón asociarlo al Backspacebotón en el teclado. BackspaceEventCode es 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 esto ayude.

Respondida el 14/03/2014 a las 15:51
fuente por usuario

votos
12

Otra opción sencilla sería la de poner el botón de retroceso después de que el botón de enviar en el código HTML, pero flotar hacia la izquierda para que aparezca en la página antes de que el botón de enviar.

Cambiar el orden de tabulación debería ser todo lo necesario para lograr esto. Mantenlo simple.

Respondida el 14/10/2014 a las 17:02
fuente por usuario

votos
12

Cambiar el orden de tabulación debería ser todo lo necesario para lograr esto. Mantenlo simple.

Otra opción sencilla sería la de poner el botón de retroceso después de que el botón de enviar en el código HTML, pero flotar hacia la izquierda para que aparezca en la página antes de que el botón de enviar.

Respondida el 27/11/2012 a las 23:27
fuente por usuario

votos
11

mantener el nombre de todos los botones de envío de la misma - "PREV" La única diferencia es el valueatributo con valores únicos. Cuando creamos la secuencia de comandos, estos valores únicos nos ayudarán a averiguar cuál de los botones Enviar fue presionado.

Y escribir siguientes aparatos de codificación:

    btnID = ""
if Request.Form("prev") = "Previous Page" then
    btnID = "1"
else if Request.Form("prev") = "Next Page" then
    btnID = "2"
end if
Respondida el 05/06/2012 a las 10:19
fuente por usuario

votos
10

La primera vez que vine en contra de esto ocurrió una onclick () / js hackear cuando las opciones no son anterior / siguiente que todavía me gusta por su sencillez. Dice así:

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

Cuando cualquiera de botón de enviar se hace clic almacena la operación deseada en un campo oculto (que es un campo de cadena incluida en el modelo de la forma está asociada con) y envía el formulario al controlador, lo que hace todo el decisivo. En el controlador, sólo tiene que escribir:

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

También puede apretar ligeramente esta usando códigos numéricos de operación para evitar el análisis de cadenas, pero si no juegas con enumeraciones, el código es menos legible, modificable, y la auto-documentación y el análisis es trivial, de todos modos.

Respondida el 03/09/2015 a las 13:30
fuente por usuario

votos
10

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

botón predeterminado de un elemento de formulario es el primer botón de envío con el fin árbol cuyo propietario del formulario es que elemento de formulario.

Si el agente de usuario soporta dejar que el usuario envíe un formulario de forma implícita (por ejemplo, en algunas plataformas que golpean la tecla "enter", mientras que un campo de texto se centra somete implícitamente la forma) ...

Teniendo la siguiente entrada sea type = "submit" y el cambio de la entrada anterior a type = "button" debe dar el comportamiento predeterminado deseado.

<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>
Respondida el 28/03/2015 a las 21:05
fuente por usuario

votos
10

Esto es lo que he probado: 1. Es necesario asegurarse de que usted da a sus botones diferentes nombres 2. Escribir una sentencia if que va a hacer la acción requerida si cualquiera de los botones de clic.

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

En PHP,

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

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

}
Respondida el 03/03/2014 a las 07:16
fuente por usuario

votos
8

Me encontré con esta pregunta cuando se trata de encontrar una respuesta a básicamente la misma cosa, sólo que con los controles ASP.NET, cuando me di cuenta de que el botón ASP tiene una propiedad llamada UseSubmitBehaviorque le permite establecer que uno hace que las presentaron.

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

Por si acaso alguien está buscando la manera botón asp.net para hacerlo.

Respondida el 24/03/2016 a las 14:29
fuente por usuario

votos
7

Con Javascript (jQuery aquí), puede deshabilitar el botón anterior antes de enviar el formulario.

$('form').on('keypress', function(event) {
    if (event.which == 13) {
        $('input[name="prev"]').prop('type', 'button');
    }
});
Respondida el 14/08/2015 a las 10:01
fuente por usuario

votos
0

Se puede utilizar Tabindexpara resolver este problema, también cambiar el orden de botón sería manera más eficiente para lograr este objetivo. Cambiar el orden de botón y agregar floatvalores a asignarles la posición deseada que desea mostrar en su HTMLvista.

Respondida el 25/04/2018 a las 03:28
fuente por usuario

votos
0

He resuelto un problema muy similar de esta manera:

  1. si javascriptestá activada (en la mayoría de los casos hoy en día) a continuación, todos los botones se someten son " degradado " a los botones a la carga a través de la página javascript(jQuery). Haga clic en eventos en los " degradados botones" botón mecanografiado se manejan también vía javascript.

  2. Si javascriptno está activada, el formulario se sirve al navegador con múltiples botones de envío. En este caso oprimir la tecla Enter sobre una textfielddentro del formulario se envíe el formulario con el primer botón en lugar del previsto por defecto , pero al menos la forma es aún utilizable: se pueden presentar tanto con el anterior y siguientes botones.

ejemplo de trabajo:

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

Respondida el 09/01/2018 a las 12:26
fuente por usuario

votos
0

Prueba esto..!

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

Respondida el 29/09/2017 a las 01:58
fuente por usuario

votos
-3

Usando el ejemplo que diste:

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

Si hace clic en "Página anterior", solo se enviará el valor de "prev". Si hace clic en "Página siguiente", solo se enviará el valor de "siguiente".

Sin embargo, si presionas Enter en alguna parte del formulario, no se enviarán "prev" ni "next".

Entonces, usando un pseudo código, podrías hacer lo siguiente:

If "prev" submitted then
    Previous Page was click
Else If "next" submitted then
    Next Page was click
Else
    No button was click
Respondida el 05/08/2008 a las 16:08
fuente por usuario

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