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




limpiar formulario html despues de enviar (16)

Digamos que creas un asistente en un formulario HTML. Un botón retrocede y el otro avanza. Dado que el botón Atrás aparece primero en la marca cuando presiona Entrar , utilizará 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>

Me gustaría decidir qué botón se usa para enviar el formulario cuando un usuario presiona Intro . De esa forma, cuando presione Entrar, el asistente se moverá a la página siguiente, no a la anterior. ¿Tienes que usar tabindex para hacer esto?


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

Cambiar el orden de tabulación debe ser todo lo que se necesita para lograr esto. Mantenlo simple.

Otra opción simple 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.


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

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

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 Intro y la solicitud va al servidor, puede verificar el valor de submitButton en el código del lado del servidor que contiene una colección de pares de name/value del formulario. Por ejemplo, en ASP Classic :

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

Referencia: Uso de múltiples botones de envío en un solo formulario


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

De esta manera, el botón Prev queda a la izquierda del botón Next , 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>

Beneficios sobre otras sugerencias: no hay código JavaScript, es accesible, y ambos botones siguen siendo type="submit" .


Esto es lo que he probado:

  1. Debes asegurarte de darle a tus botones diferentes nombres.
  2. Escriba una instrucción if que hará 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();
}

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 hacer esto.

Form1 tendría el botón anterior.

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

Cuando el usuario presiona Entrar en Form2, se disparará el botón Siguiente envío.


La primera vez que me topé con esto, se me ocurrió un truco onclick () / JavaScript cuando las opciones no están disponibles / anteriores que aún me gustan 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, 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, que toma todas las decisiones. En el controlador, simplemente escribe:

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


Otra opción simple sería colocar el botón Atrás después del botón de envío en el código HTML, pero flotarlo hacia la izquierda, por lo que aparece en la página antes del botón de envío.

Cambiar el orden de tabulación debe ser todo lo que se necesita para lograr esto. Mantenlo simple.


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.

Cambie el orden de los botones y agregue valores float para asignarles la posición deseada que desea mostrar en su vista HTML .


Resolví un problema muy similar de esta manera:

  1. Si JavaScript está habilitado (en la mayoría de los casos hoy en día), todos los botones de envío se " degradan " a los botones en la carga de la página a través de JavaScript (jQuery). Los eventos de clic en los botones " degradados " que se escriben también se manejan a través de JavaScript.

  2. Si JavaScript no está habilitado, el formulario se envía al navegador con varios botones de envío. En este caso, al textfield Entrar en un campo de textfield dentro del formulario se enviará el formulario con el primer botón en lugar del valor predeterminado deseado, pero al menos el formulario aún se puede usar: puede enviarlo con los botones anterior y siguiente .

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>


Si realmente desea que funcione como un cuadro de diálogo de instalación, simplemente enfóquese en el botón "Siguiente" OnLoad.

De esa manera, si el usuario pulsa Retorno , el formulario se envía y continúa. Si quieren volver pueden presionar Tab o hacer clic en el botón.


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

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


Yo usaría JavaScript para enviar el formulario. La función sería activada por el evento OnKeyPress del elemento de formulario y detectaría si se seleccionó la tecla Intro . Si este es el caso, se enviará el formulario.

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

<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)" />

<input type="submit" name="perv" value="Previous Page"> 
<input type="submit" name="prev" value="Next Page"> 

Mantenga el nombre de todos los botones de envío igual - "prev".

La única diferencia es el atributo de value con valores únicos. Cuando creamos el script, estos valores únicos nos ayudarán a descubrir 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




submit-button