react - Prevenir el incumplimiento en el formulario Enviar jQuery

onclick preventdefault

Question

¿Qué pasa con esto?

HTML:

<form action="http://localhost:8888/bevbros/index.php/test" method="post" accept-charset="utf-8" id="cpa-form" class="forms">
<input type="text" name="zip" value="Zip code" id="Zip" class="required valid">
<input type="submit" name="Next" value="Submit" class="forms" id="1">
</form>

jQuery:

$("#cpa-form").submit(function(e){
e.preventDefault();
});

Answer 1

DEPRECATED - esta parte está desactualizada así que por favor no la use.

También puede probar este código si, por ejemplo, ha agregado formularios dinámicos posteriormente. Por ejemplo, cargó una ventana asincrónica con ajax y desea enviar este formulario.

$(''#cpa-form'').live(''submit'' ,function(e){
e.preventDefault();
// do something
});

ACTUALIZACIÓN : debe utilizar el método jQuery on () e intentar escuchar el documento DOM si desea manejar el contenido agregado dinámicamente.

Caso 1, versión estática: si tiene solo unos pocos oyentes y su forma de manejar está codificada, entonces puede escuchar directamente en el "nivel del documento". No utilizaría los oyentes a nivel de documento, pero trataría de profundizar en el árbol de la perdición porque podría ocasionar problemas de rendimiento (depende del tamaño de su sitio web y de su contenido).

$(''form#formToHandle'').on(''submit''...

O

$(''form#formToHandle'').submit(function(e) {
e.preventDefault();
// do something
});

Caso 2, versión dinámica: si ya escuchas el documento en tu código, entonces de esta manera sería bueno para ti. Esto también funcionará para el código que se agregó más tarde a través de DOM o dinámico con AJAX.

$(document).on(''submit'',''form#formToHandle'',function(){
// do something like e.preventDefault();
});

O

$(document).ready(function() {
console.log( "Ready, Document loaded!" );
// all your other code listening to the document to load
$("#formToHandle").on("submit", function(){
// do something
})
});

O

$(function() { // <- this is shorthand version
console.log( "Ready, Document loaded!" );
// all your other code listening to the document to load
$("#formToHandle").on("submit", function(){
// do something
})
});

Answer 2

Creo que las respuestas anteriores son todas correctas, pero eso no indica por qué el método de submit no funciona.

Bueno, el método de submit no funcionará si jQuery no puede obtener el elemento de form , y jQuery no da ningún error al respecto. Si su script se coloca en la cabecera del documento, asegúrese de que el código se ejecute después de que DOM esté listo . Entonces, $(document).ready(function () { // your code here // }); resolverá el problema

La mejor práctica es, siempre ponga su script en la parte inferior del documento.

Answer 3

Hola busqué una solución para hacer que un formulario Ajax funcionara con Google Tag Manager (GTM), el retorno falso impedía la finalización y enviar la activación del evento en tiempo real en la solución de Google Analytics para cambiar el retorno falso por e.preventDefault () ; que funcionó correctamente sigue el código:

 $("#Contact-Form").submit(function(e) {
e.preventDefault();
...
});

Answer 4

Prueba esto:

$("#cpa-form").submit(function(e){
return false;
});

Answer 5

Tu código está bien, solo necesitas colocarlo dentro de la función de listo.

$(document).ready( function() {
$("#cpa-form").submit(function(e){
e.preventDefault();
});
}

Answer 6

Use la nueva sintaxis del evento "on".

$(document).ready(function() {
$(''form'').on(''submit'', function(e){
// validation code here
if(!valid) {
e.preventDefault();
}
});
});

Cite: https://api.jquery.com/on/

Answer 7

$(''#cpa-form input[name="Next"]'').on(''click'', function(e){
e.preventDefault();
});

Answer 8

$(document).ready(function(){
$("#form_id").submit(function(){
return condition;
});
});