Múltiples botones de envío en un formulario HTML

StackOverflow https://stackoverflow.com/questions/48

Pregunta

Digamos que crea un asistente en formato HTML.Un botón retrocede y el otro avanza.desde el atrás El botón aparece primero en el marcado cuando presiona Enter, 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 un usuario presiona Enter.De esa manera, cuando presione Enter, el asistente pasará a la página siguiente, no a la anterior.¿Tienes que usar tabindex ¿para hacer esto?

¿Fue útil?

Solución

Espero que esto ayude.Sólo estoy haciendo el truco de floatmoviendo los botones hacia la derecha.

De esta manera el Prev El botón está a la izquierda del Next botón pero el Next viene primero en la estructura 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: Beneficios sobre otras sugerencias:sin JavaScript, accesible, ambos botones permanecen type="submit"

Otros consejos

¿Le sería posible cambiar el tipo de botón anterior a un botón como este? 

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

Ahora el botón Siguiente sería el predeterminado, además también podrías agregar el default atribuírselo para que su navegador lo resalte así:

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

Espero que ayude.

Asigne a sus botones de envío el mismo nombre como este:

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

Cuando el usuario presiona enter y el Pedido va al servidor, puedes comprobar el valor de submitButton en el código del lado del servidor que contiene una colección de formularios name/value pares.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: Usar múltiples botones de envío en un solo formulario

Si el hecho de que el primer botón se use de forma predeterminada es consistente en todos los navegadores, ¿por qué no colocarlos del modo correcto en el código fuente y luego usar CSS para cambiar sus posiciones aparentes? float Muévalos hacia la izquierda y hacia la derecha para cambiarlos visualmente, por ejemplo.

Si realmente solo desea que funcione como un cuadro de diálogo de instalación, ¿qué tal si simplemente enfoca el botón "Siguiente" al cargar?De esa manera, si el usuario presiona Volver, el formulario se envía y continúa.Si quieren regresar, pueden presionar Tab o hacer clic en el botón.

A veces la solución proporcionada por @palotasb no es suficiente.Hay casos de uso en los que, por ejemplo, se coloca un botón de envío "Filtro" encima de botones como "Siguiente y Anterior".Encontré una solución para esto: Copiar el botón de envío que debe actuar como el botón de envío predeterminado en un div oculto y colocarlo dentro del formulario encima de cualquier otro botón de envío.Técnicamente, se enviará mediante un botón diferente al presionar Enter y luego al hacer clic en el botón visible Siguiente.Pero como el nombre y el valor son iguales, 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>

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 del usuario + el botón siguiente.

Cuando el usuario presiona Ingresar en Form2, se activaría el botón Siguiente envío.

Puedes hacerlo con CSS.

Coloque los botones en el marcado con el Next primero el botón, luego el Prev botón después.

Luego use CSS para posicionarlos y que aparezcan como desee.

Usaría Javascript para enviar el formulario.La función sería activada por el evento OnKeyPress del elemento del formulario y detectaría si se seleccionó la tecla Enter.Si este es el caso, enviará el formulario.

Aquí hay dos páginas que brindan 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)" />

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 y Google Chrome funcionan.
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 de esta solución es:
La página anterior no funciona si usa IE con Javascript desactivado.
Eso sí, ¡el botón Atrás todavía funciona!

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

Marque el primer botón en el que desea activar Ingresar presione la tecla como botón predeterminado en el formulario.Para el segundo botón asócielo a Retroceso botón en el teclado. Retroceso El código de evento 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.

Cambiar el orden de las pestañas debería ser todo lo que se necesita para lograrlo.Mantenlo simple.

Otra opción sencilla sería colocar el botón Atrás después del botón Enviar en el código HTML, pero flotarlo hacia la izquierda para que aparezca en la página antes del botón Enviar.

Otra opción sencilla sería colocar el botón Atrás después del botón Enviar en el código HTML, pero flotarlo hacia la izquierda para que aparezca en la página antes del botón Enviar.

Cambiar el orden de las pestañas debería ser todo lo que se necesita para lograrlo.Mantenlo simple.

Mantenga el mismo nombre de todos los botones de envío: "anterior". La única diferencia es el value atributo con valores únicos.Cuando creamos el script, estos valores únicos nos ayudarán a determinar cuál de los botones de envío se presionó.

Y escribe la siguiente codificación:

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

La primera vez que me encontré con esto, se me ocurrió un truco onclick()/js cuando las opciones no son anterior/siguiente que todavía me gusta por su simplicidad.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 se hace clic en cualquiera de los botones de envío, se almacena la operación deseada en un campo oculto (que es un campo de cadena incluido en el modelo al que está asociado el formulario) y envía el formulario al Controlador, quien toma todas las decisiones.En el Controlador simplemente escribes:

// 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 puedes ajustar esto ligeramente usando códigos de operación numéricos para evitar el análisis de cadenas, pero a menos que juegues con Enums, el código es menos legible, modificable y autodocumentado y el análisis es trivial de todos modos.

Esto es lo que he probado:1.Debe asegurarse de darle a sus botones diferentes nombres 2.Escriba una declaración if que realizará la acción requerida si se hace clic en cualquiera de los botones.

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

}

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

El botón predeterminado de un elemento de formulario es el primer botón Enviar en orden de árbol cuyo propietario de formulario es ese elemento de formulario.

Si el agente del usuario admite permitir que el usuario envíe un formulario implícitamente (por ejemplo, en algunas plataformas que golpean la clave "Ingrese" mientras un campo de texto se enfoca implícitamente envía el formulario) ...

Hacer que la siguiente entrada sea tipo="enviar" y cambiar la entrada anterior a tipo="botón" debería 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>

Me encontré con esta pregunta cuando intentaba encontrar una respuesta básicamente a lo mismo, solo que con los controles de asp.net, cuando descubrí que el botón asp tiene una propiedad llamada UseSubmitBehavior que le permite establecer cuál realiza el envío. 

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

En caso de que alguien esté buscando la forma de hacerlo con el botón asp.net.

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

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

Resolví un problema muy similar de esta manera:

  1. si javascript está habilitado (en la mayoría de los casos hoy en día), entonces todos los botones de envío son "degradado" a los botones al cargar la página a través de javascript (jQuery).Haga clic en eventos en "degradado"Los botones escritos con botones también se manejan a través de javascript.

  2. si javascript no está habilitado, el formulario se entrega al navegador con múltiples botones de envío.En este caso, presionar Enter en un textfield dentro del formulario enviará el formulario con el primer botón en lugar del deseado por defecto, pero al menos el formulario todavía se puede utilizar:puedes enviar con ambos anterior y próximo 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>

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>

Puedes usar Tabindex Para resolver este problema, también cambiar el orden de los botones sería una forma más eficiente de lograrlo.Cambiar el orden del botón y agregar float valores para asignarles la posición deseada que desea mostrar en su HTML vista.

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 "anterior".Si hace clic en "Página siguiente", solo se enviará el valor de "siguiente".

Sin embargo, si presiona Intro en algún lugar del formulario, no se enviarán ni "anterior" ni "siguiente".

Entonces, usando pseudocódigo puedes 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
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top