jQuery - Annulla invio modulo (utilizzando "return false"?)?

Question

Sto riscontrando un po 'di problemi durante il tentativo di annullare l'invio di un modulo. Ho seguito questo tutorial (anche se non sto facendo uno script di accesso), e sembra che stia lavorando per lui.

Ecco la mia 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> 

Ed ecco il jquery:

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

     return false; 

    }); 
}); 

Ho già importato jQuery nell'intestazione e so che sta funzionando. Il mio primo pensiero è che potrebbe essere obsoleto, ma in realtà "solo" un anno fa.

Così qualcuno può vedere cosa c'è che non va?

Grazie in anticipo.

MODIFICA: da quello che ho letto il modo più semplice e più appropriato di annullare l'invio è restituire il valore falso? Ma non riesco a farlo funzionare. Ho cercato nel forum e ho trovato diversi thread utili ma nessuno di loro funziona davvero. Devo incasinare qualcosa.

Answer 1

Provare a utilizzare event.preventDefault

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

Answer 2

ho incontrato problemi simili. Li ho risolti rimuovendo l'azione e il metodo del modulo prima della convalida e quindi aggiungendoli di nuovo dopo la convalida. Ecco il validatore che ho scritto:

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

È possibile implementare in questo modo:

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

È possibile aggiungere selettori CSS per i campi richiesti. Quello per l'email deve essere unico.

Answer 3

Il valore del nome ha bisogno di virgolette. Prova questo:

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

});

Answer 4

Grazie per la risposta a tutti! Un mio amico mi ha consigliato di aggiungere

onsubmit="return(false) 

sul modulo. Funziona, ma mi piacerebbe comunque conoscere un trucco non inline-javascript che funzioni.

Answer 5

Dovrebbe funzionare correttamente. Probabilmente c'è di più in materia. Sfortunatamente il codice nella tua domanda non ha un sapore SSCCE, quindi è difficile individuare la causa principale. Probabilmente non hai importato la libreria jQuery. Oppure hai chiamato $(document).ready()prima del importando la libreria jQuery. Oppure hai un'altra libreria JS che è in conflitto $(). O la forma attuale non ha il nome desiderato. Etc..etc ..

Per iniziare, ecco un completo SSCCE. Tutto quello che devi fare è copiare "n'paste'n'run it.

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

Se funziona (almeno, funziona qui, ricevo un avviso e il modulo non viene presentata a tutti), confrontarlo con il proprio codice e cercare di cutdown il proprio codice in questo sapore così che puoi individuare meglio le differenze (e quindi il tuo errore).

Indipendentemente da ciò, a mio avviso, varrebbe la pena di eseguire alcune esercitazioni jQuery (e preferibilmente anche JavaScript) di base/banali in modo da ottenere una migliore comprensione di ciò che accade sotto le copertine e imparare a utilizzare gli strumenti come Firebug.

Answer 6

Ho anche avuto questo problema, il mio codice (che non ha funzionato) è stato qualcosa di simile:

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

e all'interno della funzione "before_submit" ho avuto "return false" per fermare il modulo di presentare :

function before_submit() { 

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

ho messo "ritorno" quando si associa la funzione di gestore di eventi per la forma e ha funzionato:

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

La funzione associata all'evento di invio deve restituire false (nel mio caso la funzione anonima). Quindi ... questa è una soluzione per una causa di questo problema

Answer 7

Si indica che "l'avviso prima del 'ritorno falso' non viene visualizzato".

Quando si utilizza jQuery, l'ID o il nome dell'elemento di invio non possono essere "invia" - se lo è, l'evento di invio non verrà attivato.

Answer 8

Solo il mio umile contributo a questa domanda (senza risposta, datata). Ho eseguito su questo problema già più volte sempre con la stessa soluzione:

Non utilizzare

<input name="submit" /> 

insieme

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

Questa spara il torto elemento/oggetto portando no errori o avvertimenti. Quindi basta nominare il pulsante Invia qualcos'altro e tutto inizia magicamente a funzionare di nuovo.

Answer 9

Ho avuto lo stesso problema ed era l'utilizzo di Rails e :remote => true nel modulo. Rails era arrivato il driver jQuery e l'invio del modulo da parte di ajax mentre la mia funzione stava tentando di bloccare il processo di invio utilizzando return false e event.preventDefault().

Quindi fai attenzione ai framework e alle azioni predefinite che interferiscono con il tuo javascript. return false dovrebbe funzionare :)

Answer 10

Il modulo a cui stai tentando di accedere potrebbe essere aggiunto dinamicamente alla tua pagina. È necessario utilizzare delegato per accedere a tale forma in quel caso

Esempio:

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

Answer 11

Devi fare una sorta di 'doppio ritorno', o in altre parole, è necessario restituire ciò che viene restituito.Quindi, avete il vostro 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> 

Che basta una funzione jQuery che si chiama onsubmit come vedete sopra:

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

si può inserire qualsiasi tipo di condizionali nella funzione di cui sopra. Sembra che tu voglia semplicemente cancellarlo comunque. Spero che questo aiuti gli altri che incontrano questa risposta.