javascript - recargar - Cómo evitar que los botones envíen formularios
formulario en javascript codigo (16)
Configure su botón de manera normal y use event.preventDefault como ..
<button onclick="myFunc(e)"> Remove </button>
...
...
In function...
function myFunc(e){
e.preventDefault();
}
En la página siguiente, con Firefox el botón Eliminar envía el formulario, pero el botón Agregar no lo hace. ¿Cómo evito que el botón de eliminar envíe el formulario?
<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
function addItem() {
var v = $(''form :hidden:last'').attr(''name'');
var n = /(.*)input/.exec(v);
var newPrefix;
if ( n[1].length == 0 ) {
newPrefix = ''1'';
} else {
newPrefix = parseInt(n[1])+1;
}
var oldElem = $(''form tr:last'');
var newElem = oldElem.clone(true);
var lastHidden = $(''form :hidden:last'');
lastHidden.val(newPrefix);
var pat = ''=/"''+n[1]+''input'';
newElem.html(newElem.html().replace(new RegExp(pat, ''g''), ''=/"''+newPrefix+''input''));
newElem.appendTo(''table'');
$(''form :hidden:last'').val('''');
}
function removeItem() {
var rows = $(''form tr'');
if ( rows.length > 2 ) {
rows[rows.length-1].html('''');
$(''form :hidden:last'').val('''');
} else {
alert(''Cannot remove any more rows'');
}
}
</script>
</head>
<body>
<form autocomplete="off" method="post" action="">
<p>Title:<input type="text" /></p>
<button onclick="addItem(); return false;">Add Item</button>
<button onclick="removeItem(); return false;">Remove Last Item</button>
<table>
<th>Name</th>
<tr>
<td><input type="text" id="input1" name="input1" /></td>
<td><input type="hidden" id="input2" name="input2" /></td>
</tr>
</table>
<input id="submit" type="submit" name="submit" value="Submit">
</form>
</body>
</html>
Aquí hay un enfoque simple:
$(''.mybutton'').click(function(){
/* Perform some button action ... */
alert("I don''t like it when you press my button!");
/* Then, the most important part ... */
return false;
});
El siguiente código de muestra le muestra cómo evitar que un clic de botón envíe un formulario.
Puedes probar mi código de muestra:
<form autocomplete="off" method="post" action="">
<p>Title:
<input type="text" />
</p>
<input type="button" onclick="addItem()" value="Add Item">
<input type="button" onclick="removeItem()" value="Remove Last Item">
<table>
<th>Name</th>
<tr>
<td>
<input type="text" id="input1" name="input1" />
</td>
<td>
<input type="hidden" id="input2" name="input2" />
</td>
</tr>
</table>
<input id="submit" type="submit" name="submit" value="Submit">
</form>
<script language="javascript">
function addItem() {
return false;
}
function removeItem() {
return false;
}
</script>
Estás utilizando un elemento de botón HTML5. Recuerde que la razón es que este botón tiene un comportamiento predeterminado de envío, como se indica en la especificación W3 como se ve aquí: Botón HTML5 de W3C
Entonces necesitas especificar su tipo explícitamente:
<button type="button">Button</button>
para anular el tipo de envío predeterminado. Solo quiero señalar la razón por la que esto sucede =)
=)
Establece el tipo en tus botones:
<button type="button" onclick="addItem(); return false;">Add Item</button>
<button type="button" onclick="removeItem(); return false;">Remove Last Item</button>
... eso evitará que activen una acción de envío cuando se produce una excepción en el controlador de eventos. Luego, arregla tu función removeItem() para que no active una excepción:
function removeItem() {
var rows = $(''form tr'');
if ( rows.length > 2 ) {
// change: work on filtered jQuery object
rows.filter(":last").html('''');
$(''form :hidden:last'').val('''');
} else {
alert(''Cannot remove any more rows'');
}
}
Tenga en cuenta el cambio: su código original extrajo un elemento HTML del conjunto jQuery y luego trató de invocar un método jQuery en él. Esto generó una excepción, lo que dio como resultado el comportamiento predeterminado del botón.
FWIW, hay otra forma en la que podría ir con esto ... Conecte sus controladores de eventos con jQuery y use el preventDefault() en el objeto de event de jQuery para cancelar el comportamiento predeterminado por adelantado:
$(function() // execute once the DOM has loaded
{
// wire up Add Item button click event
$("#AddItem").click(function(event)
{
event.preventDefault(); // cancel default behavior
//... rest of add logic
});
// wire up Remove Last Item button click event
$("RemoveLastItem").click(function(event)
{
event.preventDefault(); // cancel default behavior
//... rest of remove last logic
});
});
...
<button type="button" id="AddItem" name="AddItem">Add Item</button>
<button type="button" id="RemoveLastItem" name="RemoveLastItem">Remove Last Item</button>
Esta técnica mantiene toda su lógica en un solo lugar, lo que facilita la depuración ... también le permite implementar un repliegue cambiando el type en los botones para submit y manejar el servidor de eventos, esto se sabe como un discreto JavaScript .
Este es un error html5, como se ha dicho, aún puede tener el botón como envío (si desea cubrir usuarios de javascript y no javascript) usándolo como:
<button type="submit" onclick="return false"> Register </button>
De esta manera, cancelará el envío pero seguirá haciendo lo que esté haciendo en las funciones jquery o javascript y realice el envío para los usuarios que no tienen javascript.
Estoy de acuerdo con Shog9, aunque podría usar:
<input type = "button" onClick="addItem(); return false;" value="Add Item" />
De acuerdo con w3schools , la etiqueta <button> tiene un comportamiento diferente en diferentes navegadores.
Estoy seguro de que en FF la
removeItem
La función encuentra un error de JavaScript, esto no ha ocurrido en IE
Cuando aparece un error de javascript, el código "devolver falso" no se ejecutará, lo que hace que la página devuelva
Hace algún tiempo necesitaba algo muy similar ... y lo conseguí.
Entonces, lo que pongo aquí es cómo hago los trucos para que un formulario pueda ser enviado por JavaScript sin ninguna validación y ejecute la validación solo cuando el usuario presiona un botón (generalmente un botón de envío).
Para el ejemplo usaré una forma mínima, solo con dos campos y un botón de envío.
Recuerde lo que se desea: desde JavaScript debe poder enviarse sin ninguna comprobación. Sin embargo, si el usuario presiona dicho botón, la validación debe realizarse y enviarse el formulario solo si se pasa la validación.
Normalmente, todo comenzaría desde algo cerca de esto (eliminé todas las cosas adicionales que no son importantes):
<form method="post" id="theFormID" name="theFormID" action="">
<input type="text" id="Field1" name="Field1" />
<input type="text" id="Field2" name="Field2" />
<input type="submit" value="Send" onclick="JavaScript:return Validator();" />
</form>
Vea cómo la etiqueta de formulario no tiene onsubmit="..." (recuerde que era una condición para no tenerla).
El problema es que el formulario siempre se envía, sin importar si onclick devuelve true o false .
Si cambio type="submit" para type="button" , parece funcionar pero no funciona. Nunca envía el formulario, pero eso se puede hacer fácilmente.
Así que finalmente utilicé esto:
<form method="post" id="theFormID" name="theFormID" action="">
<input type="text" id="Field1" name="Field1" />
<input type="text" id="Field2" name="Field2" />
<input type="button" value="Send" onclick="JavaScript:return Validator();" />
</form>
Y en la function Validator , donde return True; Es decir, también agrego una sentencia de envío de JavaScript, algo similar a esto:
function Validator(){
// ...bla bla bla... the checks
if( ){
document.getElementById(''theFormID'').submit();
return(true);
}else{
return(false);
}
}
El id="" es solo para JavaScript getElementById , el name="" es solo para que aparezca en los datos POST.
De tal manera funciona como yo necesito.
onsubmit esto solo para las personas que no necesitan ninguna función de onsubmit en el formulario, pero hago alguna validación cuando un botón es presionado por el usuario.
¿Por qué no necesito enviar en la etiqueta del formulario? Fácil, en otras partes de JavaScript necesito realizar un envío pero no quiero que haya ninguna validación.
La razón: si el usuario es el que realiza el envío, quiero y necesito que se realice la validación, pero si es JavaScript, a veces necesito realizar el envío mientras que tales validaciones lo evitarían.
Puede sonar extraño, pero no cuando se piensa, por ejemplo: en un inicio de sesión ... con algunas restricciones ... ¡como no permitir sesiones de PHP y no se permiten cookies!
Por lo tanto, cualquier enlace se debe convertir a dicho formulario para que los datos de inicio de sesión no se pierdan. Cuando aún no se ha iniciado sesión, también debe funcionar. Por lo tanto, no se debe realizar ninguna validación en los enlaces. Pero quiero presentar un mensaje al usuario si el usuario no ha ingresado ambos campos, usuario y pase. Así que si falta uno, el formulario no debe ser enviado! Ahí está el problema.
Vea el problema: el formulario no debe enviarse cuando un campo está vacío solo si el usuario ha presionado un botón. Si es un código JavaScript, debe poder enviarse.
Si hago el trabajo en onsubmit en la etiqueta de formulario, necesitaría saber si es el usuario u otro JavaScript. Dado que no se pueden pasar parámetros, no es posible directamente, por lo que algunas personas agregan una variable para determinar si la validación debe realizarse o no. Lo primero en la función de validación es verificar ese valor variable, etc. Muy complicado y el código no dice lo que realmente se quiere.
Así que la solución es no tener que enviar en la etiqueta del formulario. Insead lo puso donde realmente se necesita, en el botón.
Por otro lado, ¿por qué poner el código de envío de solicitudes ya que conceptualmente no quiero la validación de envío de solicitudes? Realmente quiero validación de botones.
No solo el código es más claro, es donde debe estar. Solo recuerde esto: - No quiero que JavaScript valide el formulario (que debe ser realizado siempre por PHP en el lado del servidor) - Quiero mostrarle al usuario un mensaje que dice que todos los campos no deben estar vacíos, que necesita JavaScript (cliente lado)
Entonces, ¿por qué algunas personas (piensen o me dicen) debe hacerse con una validación de onsumbit? No, conceptualmente no estoy haciendo una validación de atributos en el lado del cliente. Solo estoy haciendo algo con un botón que me presionen, así que, ¿por qué no dejar que eso se implemente?
Bueno, ese código y estilo hacen el truco perfectamente. En cualquier JavaScript que necesito enviar el formulario que acabo de poner:
document.getElementById(''theFormID'').action=''./GoToThisPage.php''; // Where to go
document.getElementById(''theFormID'').submit(); // Send POST data and go there
Y eso omite la validación cuando no la necesito. Simplemente envía el formulario y carga una página diferente, etc.
Pero si el usuario hace clic en el botón Enviar (también conocido como type="button" no type="submit" ), la validación se realiza antes de permitir que se type="submit" el formulario y, si no es válido, no se envía.
Bueno espero que esto ayude a otros a no probar código largo y complicado. Simplemente no use onsubmit si no es necesario, y use onclick . Pero recuerde cambiar type="submit" a type="button" y no se olvide de submit() mediante JavaScript.
He resuelto este problema de tres maneras que te ayudarán.
Si usamos el plugin de validación jquery en
$("form").validate({
submitHandler: function (form) {
console.log(''test'');
}
});
2º método utilizando prevent por defecto
$( "form" ).submit(function( event ) {
event.preventDefault();
console.log(''test'');
});
3º utilizando javscript (evento onsubmit)
si usamos el evento onsubmit dentro de la etiqueta del formulario, se activa la URL.
<button type="submit" onsubmit="submitfunction()">submit</button>
function submitfunction(event){
event.preventDefault();
console.log(''test'');
}
espero que ayude
La función removeItem en realidad contiene un error, lo que hace que el botón del formulario realice su comportamiento predeterminado (enviar el formulario). La consola de errores de javascript usualmente dará un puntero en este caso.
Echa un vistazo a la función removeItem en la parte javascript:
La línea:
rows[rows.length-1].html('''');
no funciona Intenta esto en su lugar:
rows.eq(rows.length-1).html('''');
No puedo probar esto ahora, pero creo que podrías usar el método preventDefault() de jQuery.
Simplemente puede obtener la referencia de sus botones utilizando jQuery, y evitar que se propague como se muestra a continuación:
$(document).ready(function () {
$(''#BUTTON_ID'').click(function(e) {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
return false;
});});
Supongamos que su formulario HTML tiene id="form_id"
<form id="form_id">
<!--your HTML code-->
</form>
Agregue este fragmento de jQuery a su código para ver el resultado,
$("#form_id").submit(function(){
return false;
});
$("form").submit(function () { return false; }); eso evitará que el botón se envíe o simplemente puede cambiar el tipo de botón a "botón" <input type="button"/> lugar de <input type="submit"/> Lo cual solo funcionará si este botón no es el Solo botón en esta forma.
return false;
Puede devolver falso al final de la función o después de la llamada a la función.
Siempre que sea lo último que suceda, el formulario no se enviará.