Pregunta Cómo evitar que los botones envíen formularios


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

683
2018-05-31 19:16


origen


Respuestas:


Estás usando 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 W3C HTML5

Por lo tanto, debe 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 =)

=)


1266
2018-05-31 14:56



Establezca el tipo en sus 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 desencadenen una acción de envío cuando se produce una excepción en el controlador de eventos. Entonces, arregla tu removeItem() función 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 de jQuery, y luego trató de llamar a un método jQuery; arrojó una excepción, lo que dio como resultado el comportamiento predeterminado del botón.

FWIW, hay otra manera en que podrías ir con esto ... Conecta tus manejadores de eventos usando jQuery, y usa el preventDefault () método en jQuery evento objeto 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 retroceso cambiando el type en los botones de vuelta a submit y manejando el lado del servidor del evento - esto se conoce como JavaScript discreto.


551
2018-05-31 19:22



Hace algún tiempo necesitaba algo muy similar ... y lo obtuve.

Entonces, lo que puse aquí es cómo hago los trucos para que un formulario sea enviado por JavaScript sin ninguna validación y ejecución solo cuando el usuario presiona un botón (por lo general, un botón de envío).

Por ejemplo, usaré una forma mínima, solo con dos campos y un botón de enviar.

Recuerde lo que se quiere: Desde JavaScript, debe poder enviarse sin ninguna verificación. Sin embargo, si el usuario presiona un botón, la validación debe hacerse y el formulario enviado solo si pasa la validación.

Normalmente todo comenzaría desde algo cercano a esto (eliminé todas las cosas extra no 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 del formulario no tiene onsubmit="..." (recuerde que era una condición no tenerlo).

El problema es que el formulario siempre se envía, no importa si onclick devoluciones 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 usé 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 function Validator, dónde return True; es, también agrego una oración 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);
   }
}

los id="" es solo para JavaScript getElementById, el name="" es solo para que aparezca en los datos POST.

De esa manera funciona como lo necesito.

Puse esto solo para personas que no necesitan onsubmit función en el formulario, pero realice alguna validación cuando el usuario presione un botón.

¿Por qué no necesito onsubmit 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 las 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 que se usen sesiones PHP y ¡no se permiten cookies!

Por lo tanto, cualquier enlace debe convertirse a dicho formulario para que los datos de inicio de sesión no se pierdan. Cuando aún no se haya 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 ingresó ambos campos, usuario y pase. Entonces, si falta uno, ¡no se debe enviar el formulario! 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 del formulario, necesitaría saber si es el usuario u otro JavaScript. Como no se pueden pasar parámetros, no es posible hacerlo directamente, por lo que algunas personas agregan una variable para indicar si se debe validar o no. Lo primero en la función de validación es verificar el valor de la variable, etc ... Demasiado complicado y el código no dice lo que realmente se quiere.

Así que la solución es no tener onsubmit en la etiqueta del formulario. Insead lo puso donde realmente se necesita, en el botón.

Por otro lado, ¿por qué poner un código de envío ya que conceptualmente no quiero la validación onsubmit? Realmente quiero la validación del botón.

No solo el código es más claro, sino que debe estarlo. Solo recuerda esto: - No quiero que JavaScript valide el formulario (debe hacerlo siempre PHP en el lado del servidor) - Quiero mostrarle al usuario un mensaje que diga que todos los campos no deben estar vacíos, que necesita JavaScript (lado del cliente)

Entonces, ¿por qué algunas personas (piensan o me dicen) debe hacerse en una validación onsumbit? No, conceptualmente, no estoy haciendo una validación onsumbit en el lado del cliente. Solo estoy presionando un botón, así que ¿por qué no dejar que se implemente?

Bueno, ese código y estilo hace el truco perfectamente. En cualquier JavaScript que necesite 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 lo necesito. Simplemente envía el formulario y carga una página diferente, etc.

Pero si el usuario hace clic en el botón Enviar (aka type="button" no type="submit") la validación se realiza antes de enviar el formulario y si no es válido no se envía.

Bueno, espero que esto ayude a otros a no probar el código largo y complicado. Simplemente no use onsubmit si no es necesario, y usa onclick. Pero solo recuerda cambiar type="submit" a type="button" y por favor no te olvides de hacer el submit() por JavaScript


27
2018-03-21 09:29



Estoy de acuerdo con Shog9, aunque en su lugar podría usar:

<input type = "button" onClick="addItem(); return false;" value="Add Item" />

De acuerdo con w3schools, el <button> la etiqueta tiene un comportamiento diferente en diferentes navegadores.


22
2018-05-31 19:28



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

17
2018-06-24 16:46



$("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"/>en lugar de <input type="submit"/> Lo cual solo funcionará si este botón no es el único en este formulario.


13
2018-06-27 15:39



Este es un error html5 como se ha dicho, aún puede tener el botón como un envío (si desea cubrir tanto a los usuarios de javascript como a los que no lo hacen) utilizándolo como:

     <button type="submit" onclick="return false"> Register </button>

De esta forma, cancelará el envío pero aún hará lo que esté haciendo en las funciones de jquery o javascript y lo enviará a los usuarios que no tengan javascript.


9
2018-01-17 01:27



Estoy seguro de que en FF

removeItem 

función encuentra un error de JavaScript, esto no sucedió en IE

Cuando aparece el error javascript, no se ejecuta el código "return false", lo que hace que la página vuelva a ser devuelta


7
2018-05-31 19:24



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;

});

2
2018-01-07 03:19