Múltiples botones de envío en un formulario HTML -- html campo con forms campo con form-submit campo con submit-button camp Relacionados El problema

Multiple submit buttons in an HTML form


273
vote

problema

Español

Digamos que crea un asistente en un formulario HTML. Un botón se remonta, y uno avanza. Dado que el botón Atrás aparece primero en el marcado cuando presiona ingrese , 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>  

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

Original en ingles

Let's say you create a wizard in an HTML form. One button goes back, and one goes forward. Since the back button appears first in the markup when you press Enter, it will use that button to submit the form.

Example:

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

I would like to get to decide which button is used to submit the form when a user presses Enter. That way, when you press Enter the wizard will move to the next page, not the previous. Do you have to use tabindex to do this?

</div
           
 
 

Lista de respuestas

144
 
vote
vote
La mejor respuesta
 

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

De esta manera, el botón Prev1 se encuentra del botón type="submit"2 , 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 POR OTRAS SUGERENCIAS: No se mantiene el código JavaScript, accesible y ambos botones permanecen type="submit" .

 

I hope this helps. I'm just doing the trick of floating the buttons to the right.

This way the Prev button is left of the Next button, but the Next comes first in the HTML structure:

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

Benefits over other suggestions: no JavaScript code, accessible, and both buttons remain type="submit".

</div
 
 
   
   
65
 
vote

Cambie 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 valor predeterminado, además de que también podría agregar el atributo type="submit"8 a él para que su navegador lo resalte así:

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

Change the previous button type into a button like this:

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

Now the Next button would be the default, plus you could also add the default attribute to it so that your browser will highlight it like so:

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

Da tus botones de envío del mismo nombre como este:

  Prev0  

Cuando el usuario presiona ingrese y la solicitud va al servidor, puede verificar el valor para Prev111111 en su código del lado del servidor que contiene una colección de formulario Prev2 pares. Por ejemplo, en ASP Classic :

  Prev3  

Referencia: Uso de múltiples botones Enviar en un solo formulario < / em>

 

Give your submit buttons the same name like this:

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

When the user presses Enter and the request goes to the server, you can check the value for submitButton on your server-side code which contains a collection of form name/value pairs. For example, in 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 

Reference: Using multiple submit buttons on a single form

</div
 
 
       
       
31
 
vote

Si el hecho de que el primer botón se usa de forma predeterminada es consistente en todos los navegadores, colóquelos de la manera correcta en el código fuente, y luego use CSS para cambiar sus posiciones aparentes.

Prev4 Izquierda y derecho para cambiarlos visualmente, por ejemplo.

 

If the fact that the first button is used by default is consistent across browsers, put them the right way around in the source code, and then use CSS to switch their apparent positions.

float them left and right to switch them around visually, for example.

</div
 
 
21
 
vote

A veces la solución provista por @palotasb no es suficiente. Hay casos de uso donde, por ejemplo, se coloca un botón de envío de "Filtro" sobre los botones anteriores como "Siguiente y anterior". Encontré una solución para esto: Copiar El botón Enviar que necesita 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, será enviado por un botón diferente al presionar ENTER que al hacer clic en el botón visible Siguiente. 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>   
 

Sometimes the provided solution by @palotasb is not sufficient. There are use cases where for example a "Filter" submits button is placed above buttons like "Next and Previous". I found a workaround for this: copy the submit button which needs to act as the default submit button in a hidden div and place it inside the form above any other submit button. Technically it will be submitted by a different button when pressing Enter than when clicking on the visible Next button. But since the name and value are the same, there's no difference in the result.

<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> 
</div
 
 
18
 
vote

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 botón Siguiente.

Cuando el usuario presiona ingrese en el formulario, el siguiente botón de envío se incendiaría.

 

This cannot be done with pure HTML. You must rely on JavaScript for this trick.

However, if you place two forms on the HTML page you can do this.

Form1 would have the previous button.

Form2 would have any user inputs + the next button.

When the user presses Enter in Form2, the Next submit button would fire.

</div
 
 
17
 
vote

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

Aquí hay dos páginas que dan técnicas sobre cómo hacer esto: 1 , 2 . Sobre la base de estos, 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)" />   
 

I would use JavaScript to submit the form. The function would be triggered by the OnKeyPress event of the form element and would detect whether the Enter key was selected. If this is the case, it will submit the form.

Here are two pages that give techniques on how to do this: 1, 2. Based on these, here is an example of usage (based on here):

<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)" /> 
</div
 
 
     
     
17
 
vote

Si realmente desea que funcione como un cuadro de diálogo de instalación, simplemente dé atención al botón "Siguiente" del botón.

De esa manera, si el usuario llega a devolver , el formulario se somete y avanza. Si quieren volver, pueden golpear pestaña o haga clic en el botón.

 

If you really just want it to work like an install dialog, just give focus to the "Next" button OnLoad.

That way if the user hits Return, the form submits and goes forward. If they want to go back they can hit Tab or click on the button.

</div
 
 
 
 
16
 
vote

Puedes hacerlo con CSS.

Coloque los botones en el botón $(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"); } } });2 primero, luego el botón $(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"); } } });3 después.

Luego use CSS para colocarlos para que aparezcan la forma en que desea.

 

You can do it with CSS.

Put the buttons in the markup with the Next button first, then the Prev button afterwards.

Then use CSS to position them to appear the way you want.

</div
 
 
14
 
vote

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 todo el trabajo.
Como siempre, Internet Explorer es el problema.

Esta versión funciona cuando Javascript se enciende:

  <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, la falla en esta solución es:

La página anterior no funciona si usa Internet Explorer con JavaScript OFF.

¿La mente, el botón Atrás todavía funciona!

 

This works without JavaScript or CSS in most browsers:

<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, and Google Chrome all work.
As always, Internet Explorer is the problem.

This version works when JavaScript is turned on:

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

So the flaw in this solution is:

Previous Page does not work if you use Internet Explorer with JavaScript off.

Mind you, the back button still works!

</div
 
 
   
   
12
 
vote

Si tiene varios botones activos en una página, puede hacer algo así:

Marque el primer botón que desea activar en el ingrese keypress como el botón predeterminado en el formulario. Para el segundo botón, asociarse al botón retroceso en el teclado. El código posterior 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>   
 

If you have multiple active buttons on one page then you can do something like this:

Mark the first button you want to trigger on the Enter keypress as the default button on the form. For the second button, associate it to the Backspace button on the keyboard. The Backspace eventcode is 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>
</div
 
 
11
 
vote

Cambiar la orden de la pestaña 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 a la izquierda, por lo que aparece en la página antes del botón Enviar.

 

Changing the tab order should be all it takes to accomplish this. Keep it simple.

Another simple option would be to put the back button after the submit button in the HTML code but float it to the left so it appears on the page before the submit button.

</div
 
 
 
 
10
 
vote

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

Cambiar la orden de la pestaña debe ser todo lo que se necesita para lograr esto. Manténgalo simple.

 

Another simple option would be to put the back button after the submit button in the HTML code, but float it to the left, so it appears on the page before the submit button.

Changing the tab order should be all it takes to accomplish this. Keep it simple.

</div
 
 
10
 
vote

La primera vez que se me ocurrió esto, me fui a un hack de Onclick () / Javascript cuando las opciones no son prevntes / a continuación que aún me gustan por su sencillez. Va 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 el botón de envío, almacena la operación deseada en un campo oculto (que es un campo de cadena incluido en el modelo, el formulario está asociado) y envía el formulario al controlador, lo que hace todo lo que decide. 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 apretar esto ligeramente usando códigos de operación numéricos para evitar la posibilidad de la cadena, pero a menos que juegue con enumeraciones, el código es menos legible, modificable y autocontrol y el análisis es trivial, de todos modos.

 

The first time I came up against this, I came up with an onclick()/JavaScript hack when choices are not prev/next that I still like for its simplicity. It goes like this:

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

When either submit button is clicked, it stores the desired operation in a hidden field (which is a string field included in the model the form is associated with) and submits the form to the Controller, which does all the deciding. In the Controller, you simply write:

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

You can also tighten this up slightly using numeric operation codes to avoid the string parsing, but unless you play with enumerations, the code is less readable, modifiable, and self-documenting and the parsing is trivial, anyway.

</div
 
 
 
 
9
 
vote

de https://html.spec.whatwg.org/multipage/forms.html# Envío implícito

El botón predeterminado del elemento de formulario es el primer botón enviar en el árbol Pedido cuyo propietario de la forma es ese elemento de forma.

Si el agente de usuario admite que el usuario envíe un formulario implícitamente (Por ejemplo, en algunas plataformas que golpean la tecla "Enter" mientras un texto El campo se centra implícitamente envía el formulario) ...

TIENDO LA INPUT SIGUIENTE SER TIPO = "ENVÍE" Y CAMBIO DE LA ENTRADA ANTERIOR ARRIBA A TIPO = "BOTÓN" DEBE DAR EL COMPORTAMIENTO DE POR DEFECTO DESEADO 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>   
 

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

A form element's default button is the first submit button in tree order whose form owner is that form element.

If the user agent supports letting the user submit a form implicitly (for example, on some platforms hitting the "enter" key while a text field is focused implicitly submits the form)...

Having the next input be type="submit" and changing the previous input to type="button" should give the desired default behavior.

<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> 
</div
 
 
9
 
vote

Esto es lo que he probado:

  1. Necesitas asegurarte de dar sus botones diferentes nombres
  2. Escriba una declaració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(); }   
 

This is what I have tried out:

  1. You need to make sure you give your buttons different names
  2. Write an if statement that will do the required action if either button is clicked.

 

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

In PHP,

if(isset($_POST['prev'])) {     header("Location: previous.html");     die(); }  if(isset($_POST['next'])) {     header("Location: next.html");     die(); } 
</div
 
 
 
 
8
 
vote
  <input type="submit" name="prev" value="Previous Page">  <input type="submit" name="prev" value="Next Page">    

Mantenga el nombre de todos los botones de envío igual: "anterior".

La única diferencia es el atributo <input type="submit" name="prev" value="Previous Page"> <input type="submit" name="prev" value="Next Page"> 7 con valores únicos. Cuando creamos el script, estos valores únicos nos ayudarán a descubrir cuáles de los botones de envío se presionaron.

y escriba 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   
 
<input type="submit" name="prev" value="Previous Page">  <input type="submit" name="prev" value="Next Page">  

Keep the name of all submit buttons the same: "prev".

The only difference is the value attribute with unique values. When we create the script, these unique values will help us to figure out which of the submit buttons was pressed.

And write the following coding:

    btnID = "" if Request.Form("prev") = "Previous Page" then     btnID = "1" else if Request.Form("prev") = "Next Page" then     btnID = "2" end if 
</div
 
 
   
   
7
 
vote

Me encontré con esta pregunta al tratar de encontrar una respuesta a básicamente lo mismo, solo con los controles de ASP.NET, cuando descubrí que el botón ASP tiene una propiedad llamada UseSubmitBehavior que le permite para establecer cuál hace la presentación.

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

Solo en caso de que alguien esté buscando el botón ASP.NET, la forma de hacerlo.

 

I came across this question when trying to find an answer to basically the same thing, only with ASP.NET controls, when I figured out that the ASP button has a property called UseSubmitBehavior that allows you to set which one does the submitting.

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

Just in case someone is looking for the ASP.NET button way to do it.

</div
 
 
6
 
vote

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

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

With JavaScript (here jQuery), you can disable the prev button before submitting the form.

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

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 son " degradados " a los botones en la carga de la página a través de JavaScript (jQuery). Haga clic en Eventos en el botón " degradado ", los botones mecanografiados también se manejan a través de JavaScript.

  2. Si JavaScript no está habilitado, el formulario se sirve al navegador con varios botones de envío. En este caso, ingresar ingresar en un // 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 } 2 dentro del formulario se enviará el formulario con el primer botón en lugar de la intención predeterminada , pero al menos el El formulario aún se puede usar: puede enviar con ambos botones Prev y Siguiente .

Ejemplo de trabajo:

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

I solved a very similar problem in this way:

  1. If JavaScript is enabled (in most cases nowadays) then all the submit buttons are "degraded" to buttons at page load via JavaScript (jQuery). Click events on the "degraded" button typed buttons are also handled via JavaScript.

  2. If JavaScript is not enabled then the form is served to the browser with multiple submit buttons. In this case hitting Enter on a textfield within the form will submit the form with the first button instead of the intended default, but at least the form is still usable: you can submit with both the prev and next buttons.

Working example:

<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>
</div
 
 
1
 
vote

Prueba esto ..!

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

Try this..!

<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>
</div
 
 
 
 
0
 
vote

Puede usar Tabindex para resolver este problema. También cambiar el orden de los botones sería una forma más eficiente de lograr esto.

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

 

You can use Tabindex to solve this issue. Also changing the order of the buttons would be a more efficient way to achieve this.

Change the order of the buttons and add float values to assign them the desired position you want to show in your HTML view.

</div
 
 
0
 
vote

En lugar de luchar con múltiples presentaciones, JavaScript o algo así para hacer algunas cosas anteriores / próximas, una alternativa sería usar un carrusel para simular las diferentes páginas. Haciendo esto:

  • No necesita múltiples botones, entradas o envíos para hacer lo anterior / siguiente, solo tiene uno input type="submit" en un solo form .
  • Los valores en toda la forma están allí hasta que se envíe el formulario.
  • El usuario puede ir a cualquier página anterior y cualquier página siguiente perfectamente para modificar los valores.

Ejemplo usando Bootstrap 5.0.0:

  <div id="carousel" class="carousel slide" data-ride="carousel">     <form action="index.php" method="post" class="carousel-inner">         <div class="carousel-item active">             <input type="text" name="lastname" placeholder="Lastname"/>         </div>         <div class="carousel-item">             <input type="text" name="firstname" placeholder="Firstname"/>         </div>         <div class="carousel-item">             <input type="submit" name="submit" value="Submit"/>         </div>     </form>     <a class="btn-secondary" href="#carousel" role="button" data-slide="prev">Previous page</a>     <a class="btn-primary" href="#carousel" role="button" data-slide="next">Next page</a> </div>   
 

Instead of struggling with multiple submits, JavaScript or anything like that to do some previous/next stuff, an alternative would be to use a carousel to simulate the different pages. Doing this :

  • You don't need multiple buttons, inputs or submits to do the previous/next thing, you have only one input type="submit" in only one form.
  • The values in the whole form are there until the form is submitted.
  • The user can go to any previous page and any next page flawlessly to modify the values.

Example using Bootstrap 5.0.0 :

<div id="carousel" class="carousel slide" data-ride="carousel">     <form action="index.php" method="post" class="carousel-inner">         <div class="carousel-item active">             <input type="text" name="lastname" placeholder="Lastname"/>         </div>         <div class="carousel-item">             <input type="text" name="firstname" placeholder="Firstname"/>         </div>         <div class="carousel-item">             <input type="submit" name="submit" value="Submit"/>         </div>     </form>     <a class="btn-secondary" href="#carousel" role="button" data-slide="prev">Previous page</a>     <a class="btn-primary" href="#carousel" role="button" data-slide="next">Next page</a> </div> 
</div
 
 
0
 
vote

Creo que esta es una solución de esay para esto. Hacer el botón anterior type A button , y un nuevo ADMN type8 ATTRIBUTE EN EL VALOR jQuery(this).attr('type','submit'); .

Entonces, cuando el usuario hace clic en el botón anterior, se cambiará a type10 a float1111111 y el formulario se enviará con el botón anterior.

  float2  
 

I think this is a esay solution for this. Make Previous button type to button, and a new add onclick attribute in button with value jQuery(this).attr('type','submit');.

So, when the user clicks on the Previous button then its type will be changed to submit and the form will be submitted with Previous button.

<form>   <!-- Put your cursor in this field and press Enter -->   <input type="text" name="field1" />    <!-- This is the button that will submit -->   <input type="button" onclick="jQuery(this).attr('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> 
</div
 
 
-1
 
vote

Cuando se hace clic en un botón con un mouse (y, con suerte, por contacto), registra las coordenadas X, Y. Este no es el caso cuando se invoca por un formulario, estos valores son normalmente cero.

para que puedas hacer algo como esto.

  float3  
 

When a button is clicked with a mouse (and hopefully by touch), it records the X,Y coordinates. This is not the case when it is invoked by a form, these values are normally zero.

So you can do something like this.

function(e) {   const isArtificial = e.screenX === 0 && e.screenY === 0     && e.x === 0 && e.y === 0      && e.clientX === 0 && e.clientY === 0;      if (isArtificial) {       return; // DO NOTHING     } else {       // OPTIONAL: Don't submit the form when clicked        // e.preventDefault();       // e.stopPropagation();     }      // ...Natural code goes here } 
</div
 
 
     
     
-4
 
vote

usando el ejemplo que le dio:

  float4  

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

Si sin embargo, presiona ingrese en algún lugar del formulario, ni "Prev" ni "Siguiente" se enviarán.

Entonces usando Pseudocode podría hacer lo siguiente:

  float5  
 

Using the example you gave:

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

If you click on "Previous Page", only the value of "prev" will be submitted. If you click on "Next Page" only the value of "next" will be submitted.

If however, you press Enter somewhere on the form, neither "prev" nor "next" will be submitted.

So using pseudocode you could do the following:

If "prev" submitted then     Previous Page was click Else If "next" submitted then     Next Page was click Else     No button was click 
</div
 
 
 
 

Relacionados problema

0  Haga clic en Enviar botón no funciona siempre  ( Click on submit button doesnt work always ) 
Tengo un formulario con un cuadro de texto y un botón de envío. <div style="float:left; padding:20px;"> <form id="crate_input" method="get"> Create new...

0  Múltiples botones de envío basados ​​en la elección desplegable  ( Multiple submit buttons based on dropdown choice ) 
Pregunta de Newbie ... ¿Se pregunta si JavaScript podría ser la solución? Es posible tener un menú desplegable con una serie de opciones. Luego, según ¿qué ...

1  Usando un botón de envío para insertar una entrada en una base de datos MySQL a través de PHP?  ( Using a submit button to insert an entry into a mysql database via php ) 
Soy bastante nuevo en PHP, así que no estoy seguro de qué hacer con esto. Básicamente, estoy tratando de insertar una entrada en mi base de datos MySQL, a t...

0  Tener en SubmitButton Abra una URL dinámica  ( Having submitbutton open a dynamic url ) 
Tengo una forma simple y un ombligo. Sé que Meybe es una pregunta trivial, pero me gustaría abrir una URL dinámica cuando se haga clic en el botón. Para ser...

0  Desactive el botón de envío hasta que todos los campos sean los FIELD  ( Disable the submit button untill all fields are fielld ) 
Tengo un formulario con entrada de texto, entrada numérica, selección y radio. Estoy tratando de deshabilitar el botón de envío hasta todas las presentaciones...

6  ¿Cómo detectar el botón de envío hizo clic en el escenario de botones de múltiples envíos en una clase de acción única? [duplicar]  ( How to detect submit button clicked in multiple submit buttons scenario in singl ) 
Esta pregunta ya tiene una respuesta aquí : Múltiples botones de envío en puntales 2 Formulario TAG ...

45  ¿Cómo uso una imagen como botón de envío?  ( How do i use an image as a submit button ) 
¿Puede alguien ayudar a cambiar esto para incorporar una imagen llamada BUTTON1.JPG en lugar del botón estándar <form id='formName' name='formName' onsubmi...

273  Múltiples botones de envío en un formulario HTML  ( Multiple submit buttons in an html form ) 
Digamos que crea un asistente en un formulario HTML. Un botón se remonta, y uno avanza. Dado que el botón Atrás aparece primero en el marcado cuando presion...

8  STRUTS2: Atributo del método en <S: Enviar> Botón no funciona  ( Struts2 method attribute in ssubmit button doesnt work ) 
Tengo un formulario en JSP. Hay dos botones de envío: "Buscar" y botón "Agregar nuevo". Había establecido cada botón con su propio atributo de método. <s:f...

1  QUIERE TRABAJO DE ATRIBUTOS DE PATTEL HTML sin golpear un botón de envío  ( Want html pattern attribute work without hitting a submit button ) 
Estoy trabajando en la validación y coloque un atributo de patrón HTML y desea ver el mensaje de error sin golpear un botón GUARDAR / enviar. Cuando haga clic...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos