estructura - formularios en html y css
Múltiples botones de envío en un formulario HTML (23)
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.
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 predeterminado, además, también podría agregarle el atributo
default
para que su navegador lo resalte así:
<input type="submit" name="next" value="Next Page" default />
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
Desde https://html.spec.whatwg.org/multipage/forms.html#implicit-submission
El botón predeterminado de un elemento de formulario es el primer botón de envío en orden de árbol cuyo propietario de formulario es ese elemento de formulario.
Si el agente de usuario admite permitir que el usuario envíe un formulario de forma implícita (por ejemplo, en algunas plataformas, al presionar la tecla "enter" mientras el campo de texto está enfocado, se envía el formulario de manera implícita) ...
Tener la siguiente entrada sea type = "submit" y cambiar 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>
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:
- Debes asegurarte de darle a tus botones diferentes nombres.
-
Escriba una instrucción
ifque 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 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 todos.
Como siempre, Internet Explorer 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>
Así que la falla en esta solución es:
La página anterior no funciona si utiliza Internet Explorer con JavaScript desactivado.
Eso sí, ¡el botón Atrás sigue funcionando!
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.
Me encontré con esta pregunta cuando intenté encontrar una respuesta básicamente a la misma cosa, solo con los controles de ASP.NET, cuando descubrí que el botón ASP tiene una propiedad llamada
UseSubmitBehavior
que le permite establecer cuál de ellos envía.
<asp:Button runat="server" ID="SumbitButton" UseSubmitBehavior="False" Text="Submit" />
En caso de que alguien esté buscando la forma de botón de ASP.NET para hacerlo.
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 hacerlo con CSS.
Coloque los botones en el marcado con el botón
Next
primero, y luego el botón
Prev
después.
Luego usa CSS para posicionarlos para que aparezcan de la manera que deseas.
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:
-
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.
-
Si JavaScript no está habilitado, el formulario se envía al navegador con varios botones de envío. En este caso, al
textfieldEntrar en un campo detextfielddentro 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 el hecho de que el primer botón se use de forma predeterminada es coherente en todos los navegadores, colóquelos de manera correcta en el código fuente y luego use CSS para cambiar sus posiciones aparentes.
float
a la izquierda y la derecha para cambiarlos visualmente, por ejemplo.
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>
Usando el ejemplo que dio:
<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 Entrar en algún lugar del formulario, no se enviarán "prev" ni "next".
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
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