jQuery - Cancelar el formulario enviado (usando "return false"?)?

Question

Me estoy metiendo en problemas mientras trato de cancelar el envío de un formulario. He estado siguiendo este tutorial (aunque no estoy haciendo un script de inicio de sesión), y parece estar funcionando para él.

Aquí es mi forma:

<form action="index.php" method="post" name="pForm"> 
     <textarea name="comment" onclick="if(this.value == 'skriv här...') this.value='';" onblur="if(this.value.length == 0) this.value='skriv här...';">skriv här...</textarea> 
     <input class="submit" type="submit" value="Publicera!" name="submit" /> 
    </form> 

Y aquí está el jQuery:

$(document).ready(function() { 
    $('form[name=pForm]').submit(function(){ 

     return false; 

    }); 
}); 

yo ya he importado jQuery en la cabecera y sé que está funcionando. Mi primer pensamiento fue que podría estar desactualizado, pero en realidad es "justo" hace un año.

Entonces, ¿alguien ve lo que está mal?

Gracias de antemano.

EDITAR: De lo que he leído, la forma más fácil y más apropiada para abortar el envío es a return false? Pero parece que no puedo hacer que funcione. He buscado en el foro y he encontrado varios hilos útiles, pero ninguno realmente funciona. Debo estar jodiendo algo.

Answer 1

Intente utilizar event.preventDefault

$(document).ready(function(event) { 
    $('form[name=pForm]').submit(function(event){ 
     event.preventDefault(); 
     //add stuff here 
    }); 
}); 

Answer 2

me he encontrado con problemas similares. Los resolví eliminando la acción y el método del formulario antes de la validación y luego volviéndolos a agregar después de la validación. Aquí está el validador escribí:

var Validator = function (formSelector) { 
    this.formSelector = formSelector; 
// $(formSelector).submit(function() {return false;}); 
     this.Action = $(formSelector).attr("action"); 
     this.Method = $(formSelector).attr("method"); 
    $(formSelector).attr("action",function(){return ""}).attr("method",function(){return ""}); 
     var donotsubmit = false; 
     var notjustcheckbox = false; 
     var checknotchecked = false; 
    this.Required = new Array(); 
    this.Email = new Array(); 
    this.validate = function() { 
     this.form = $(this.formSelector); 
     var i = 0; 
     for (i in this.Required){ 
      $(this.Required[i]).attr("value", function(index,attr){ 
       // Check on checkboxes... 
       if (this.getAttribute("type") == "checkbox"){ 
        if (this.checked == false){ 
         checknotchecked = true; 
         donotsubmit = true; 
        } else { 
        }  
       } else {  
        if (attr == "" || attr == undefined){ 
         this.style.border = "1px solid red"; 
         notjustcheckbox = true; 
         donotsubmit = true;  
        } else { 
         this.style.border = "1px solid green"; 
        } 
       } 
      }); 
     } 
     i = 0; 
     for (i in this.Email){ 
      $(this.Email[i]).attr("value", function(index,email){ 
       var filter=/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i ; 
       if (filter.test(email) == true || filter.test(email) == "true") { 
        this.style.border = "1px solid green"; 
       } else if (filter.test(email) == false) { 
        donotsubmit = true; 
        notjustcheckbox = true; 
        this.style.border = "1px solid red"; 
       } 
      }); 
     } 
     if (donotsubmit == true){ 
      if (checknotchecked == true && notjustcheckbox == true){  
       alert("Please correct the fields in red and check the required checkboxes"); 
      } else if (checknotchecked == true && notjustcheckbox == false){ 
       alert("Please check the required checkboxes"); 
      } else { 
       alert("Please correct the fields in red"); 
      } 
      checknotchecked = false; 
      notjustcheckbox = false; 
      donotsubmit = false; 
     } else { 
      $(formSelector).attr({action : ''+this.Action+''}); 
      $(formSelector).attr({method : ''+this.Method+''}); 
      $(formSelector).submit(); 
     } 
     return true; 
    }; 
}; 

Se puede implementar de esta manera:

$(document).ready(function(){ 
    var myForm = new Validator("#formId"); 
     myForm.Required = new Array("input.lightborder"); 
       myForm.Email = new Array("#email"); 
       $("#form-submit-button-id").click(function(){ 
        myForm.validate(); 
       }); 
}); 

Puede agregar selectores CSS para los campos obligatorios. El de Correo electrónico debe ser único.

Answer 3

El valor del nombre necesita citas a su alrededor. Pruebe esto:

$(document).ready(function() { 
    $("form[name='pForm']").submit(function(){ 
     return false; 
    }); 

});

Answer 4

¡Gracias por responder a todos! Un amigo me aconsejó agregar

onsubmit="return(false) 

en el formulario. Eso funciona, pero aún me gustaría saber un truco de JavaScript no en línea que funciona.

Answer 5

Debería funcionar bien. Es probable que haya más en la materia. Lamentablemente, el código en su pregunta no está en un sabor SSCCE por lo que es difícil determinar la causa raíz. Probablemente no haya importado la biblioteca jQuery. O llamó $(document).ready()antes de importando la biblioteca jQuery. O tiene otra biblioteca JS que está en conflicto $(). O el formulario real no tiene el nombre deseado. Etc..etc ..

Para comenzar, aquí hay una completa SSCCE. Todo lo que necesitas hacer es copiarlo y pegarlo.

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <title>SO question 3569072</title> 
     <script src="http://code.jquery.com/jquery-latest.min.js"></script> 
     <script> 
      $(document).ready(function() { 
       $('form[name=pForm]').submit(function() { 
        alert('Submit blocked!'); 
        return false; 
       }); 
      }); 
     </script> 
    </head> 
    <body> 
     <form action="index.php" method="post" name="pForm"> 
      <textarea name="comment" onclick="if(this.value == 'skriv här...') this.value='';" onblur="if(this.value.length == 0) this.value='skriv här...';">skriv här...</textarea> 
      <input class="submit" type="submit" value="Publicera!" name="submit" /> 
     </form> 
    </body> 
</html> 

Si funciona (al menos, funciona aquí, me sale una alerta y el formulario no se presenta en absoluto), compararlo con su propio código y tratar de cutdown su propio código en este sabor tan que puedes detectar mejor las diferencias (y por lo tanto tu error).

Independientemente, en mi opinión, valdrá la pena el esfuerzo de obtener a través de algunos tutoriales JQuery básicos/triviales (y preferiblemente también JavaScript) para que pueda comprender mejor lo que está sucediendo debajo de las cubiertas y aprender a usar herramientas como Firebug.

Answer 6

También tuve este problema, mi código (que no funcionaba) fue algo como esto:

$('#upload_form').submit(function(){ before_submit('argument') }); 

y dentro de la función "before_submit" que tenía "return false" para detener la forma de presentación :

function before_submit() { 

......................................................... 
return false; 
} 

pongo "retorno" al enlazar la función de controlador de eventos a la forma y funcionó:

$('#upload_form').submit(function(){ return before_submit('argument') }); 

La función adjunta al evento submit debe devolver false (en mi caso, la función anónima). Entonces ... esta es una solución a una de las causas de este problema

Answer 7

Usted indica que "no se muestra la alerta antes del 'retorno falso'".

Al usar jQuery, la identificación o el nombre del elemento de envío no pueden ser 'enviados' - si lo es, entonces el evento de envío no se activará.

Answer 8

Simplemente mi humilde contribución a esta pregunta (sin respuesta, también con fecha). me he encontrado en este problema ya varias veces siempre con la misma solución:

No utilice

<input name="submit" /> 

junto con

$('form').submit(function(){...}); 

Esto dispara el elemento/artículo incorrecto que no trae ningún errores ni advertencias Así que solo nombre el botón de enviar otra cosa y mágicamente todo vuelve a funcionar.

Answer 9

Tuve el mismo problema y se debió a utilizar Rails y :remote => true en el formulario. El controlador Rails jQuery entraba y enviaba el formulario por ajax mientras mi propia función intentaba detener el proceso de envío usando return false y event.preventDefault().

Por lo tanto, tenga cuidado con los marcos y las acciones predeterminadas que interfieren con su propia javascript. return false debería funcionar :)

Answer 10

El formulario al que está intentando acceder se puede agregar dinámicamente a su página. Es necesario utilizar delegado para acceder a esa forma en ese caso

Ejemplo:

$(document).delegate("#myform","submit",function(){ 
     return false; 
}); 

Answer 11

Tienes que hacer una especie de 'doble vuelta', o en otras palabras, usted tiene que devolver lo que se devuelve.Por lo tanto, usted tiene su html:

<form action="index.php" onsubmit="return cancelSubmit()" method="post" name="pForm"> 
    <textarea name="comment" onclick="if(this.value == 'skriv här...') this.value='';" onblur="if(this.value.length == 0) this.value='skriv här...';">skriv här...</textarea> 
    <input class="submit" type="submit" value="Publicera!" name="submit" /> 
</form> 

De lo que apenas tiene una función jQuery que se llama onsubmit como se ve arriba:

function cancelSubmit() { 
    return false; // return true if you want submission to carry through 
} 

se puede poner cualquier tipo de condicionales en la función anterior. Sin embargo, parece que simplemente quieres cancelarlo. Espero que esto ayude a otros que se encuentran con esta respuesta.