Utilizzo di JQuery - impedisce l'invio del modulo

178

Come posso impedire l'invio di un modulo tramite jquery?

Ho provato di tutto: vedi 3 diverse opzioni che ho provato di seguito, ma non funzionerà:

    $(document).ready(function() { 

            //option A
            $("#form").submit(function(e){
                e.preventDefault();
            });

            //option B
            $("#form").submit(function(e){
                stopEvent(e);
            });

            //option C
            $("#form").submit(function(){
                return false;
            });
    });

Cosa potrebbe esserci di sbagliato?

Aggiornamento: ecco il mio HTML:

    <form id="form" class="form" action="page2.php" method="post"> 
       <!-- tags in the form -->
       <p class="class2">
           <input type="submit" value="Okay!" /> 
       </p>
    </form>

C'è qualcosa che non va qui?

jquery forms

— Lucy Weatherford
fonte

Mostra il tuo HTML perché non c'è nulla di sbagliato in preventDefault o restituisci false quando lo hai pubblicato, a parte il fatto che il tuo selettore è totalmente sbagliato.

— Sparky,

1

return false;dopo che ha .submit()funzionato per me! Avevo lo stesso problema

— d -_- b

Se si verifica un errore JavaScript nel gestore, il e.preventDefault();codice non viene raggiunto / eseguito.

— Tom,

263

Due cose si distinguono:

È possibile che il nome del tuo modulo non lo sia form. Piuttosto, fai riferimento al tag rilasciando il #.

Anche la e.preventDefaultsintassi JQuery è corretta, ad es

    //option A
    $("form").submit(function(e){
        e.preventDefault();
    });

Anche l'opzione C dovrebbe funzionare. Non ho familiarità con l'opzione B

Un esempio completo:

<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

        <script type='text/javascript'>
         $(document).ready(function() {
            //option A
            $("form").submit(function(e){
                alert('submit intercepted');
                e.preventDefault(e);
            });
        });
        </script>
    </head>

    <body>
        <form action="http://google.com" method="GET">
          Search <input type='text' name='q' />
          <input type='submit'/>
        </form>
    </body>
</html>

— Philip Fourie
fonte

2

Qualcos'altro non va. Sto usando questa tecnica su base giornaliera. La migliore ipotesi sarebbe che ci siano errori JavaScript nella pagina, forse controllalo con FireBug?

— Philip Fourie,

@LucyWeatherford, ho aggiornato la mia risposta con un esempio che funziona. Forse vedi qualcosa.

— Philip Fourie,

Nel tuo aggiornamento HTML ho notato che hai l'attributo di classe per il tuo modulo. Cambia il tuo selettore JQuery da $('#form')a $('.form')per gli attributi di classe.

— Philip Fourie,

1

Grazie! Ho finito per usare il tuo codice sulla stessa pagina, e ha funzionato, ancora non sono sicuro di cosa fosse sbagliato, ma ora va tutto bene. Grazie!

— Lucy Weatherford,

1

@ ÂngeloRigo e è semplicemente il nome che dai al parametro, in questo caso è l'evento submit.

— squall3d

34

Probabilmente hai pochi moduli sulla pagina e usando $ ('form'). Submit () aggiunge questo evento alla prima occorrenza del modulo sulla tua pagina. Utilizzare invece il selettore di classe o provare questo:

$('form').each(function(){
    $(this).submit(function(e){
        e.preventDefault();
        alert('it is working!');
        return  false;
    })
})

o versione migliore di esso:

$(document).on("submit", "form", function(e){
    e.preventDefault();
    alert('it works!');
    return  false;
});

— Artem Kiselev
fonte

1

Nel mio caso, restituire false era una chiave.

— elquimista

19

Per impedire l'impostazione predefinita / impedire l'invio del modulo, utilizzare

e.preventDefault();

Per interrompere il gorgoglio degli eventi, utilizzare

e.stopPropagation();

Per impedire l'invio del modulo, dovrebbe funzionare anche "return false".

— L'Alfa
fonte

Vedi questa risposta perché jQuery li gestisce in modo diverso. stackoverflow.com/questions/1357118/…

— Sparky

1

Controlla questo per capire quirksmode.org/js/events_order.html di bubling di

— L'Alfa del

2

Il jQuery sull'API afferma: "Restituire false da un gestore di eventi chiamerà automaticamente event.stopPropagation()e event.preventDefault(). Un falsevalore può anche essere passato per il gestore come scorciatoia per function(){ return false; }."

— Paul,

7

Ho anche avuto lo stesso problema. Ho anche provato quello che avevi provato. Quindi cambio il mio metodo non per usare jquery ma usando l'attributo "onsubmit" nel tag del modulo.

<form onsubmit="thefunction(); return false;">

Funziona.

Ma, quando ho provato a mettere il valore di ritorno falso solo in "thefunction ()", non impedisce il processo di invio, quindi devo mettere "return false;" nell'attributo onsubmit. Quindi, concludo che la mia domanda di modulo non può ottenere il valore restituito dalla funzione Javascript. Non ne ho idea.

— Luki B. Subekti
fonte

1

È la differenza tra false;e return false;. Dovresti avereonsubmit="return thefunction();"

— xr280xr

4

Ho avuto lo stesso problema e ho risolto in questo modo (non elegante ma funziona):

$('#form').attr('onsubmit','return false;');

E ha il vantaggio, secondo me, che puoi ripristinare la situazione ogni volta che vuoi:

$('#form').attr('onsubmit','return true;');

— vinxxe
fonte

Forse sarebbe un po 'più comodo rimuovere l'attributo quando si ripristina il modulo invia prevenzione$('#form').removeAttr('onsubmit');

— barbieswimcrew

4

Collegare l'evento all'elemento submit non all'elemento form. Ad esempio nel tuo HTML, fai così

$('input[type=submit]').on('click', function(e) {
    e.preventDefault();
});

— M Weiss
fonte

2

Puoi semplicemente verificare se il modulo è valido se sì, esegui la logica di invio, altrimenti mostrerà un errore.

HTML

<form id="form" class="form" action="page2.php" method="post">
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />

    <input type="submit" value="Okay!" />
</form>

Javascript

    $(document).ready(function () {
        var isFormValid = true;

        function checkFormValidity(form){
            isFormValid = true;
            $(form).find(".check-validity").each(function(){
                var fieldVal = $.trim($(this).val());
                if(!fieldVal){
                    isFormValid = false;
                }
            });
        }


        //option A
        $("#form").submit(function (e) {
            checkFormValidity("#form");
            if(isFormValid){
                alert("Submit Form Submitted!!! :D");
            }else{
                alert("Form is not valid :(");
            }
            e.preventDefault();
        });
    });

— Codice spia
fonte

1

Quando sto usando il <form>tag senza l'attributo id="form"e lo chiamo con il nome del suo tag direttamente in jquery, funziona con me.
il tuo codice nel file html:

<form action="page2.php" method="post">

e nello script di Jquery:

$(document).ready(function() {
      $('form').submit(function(evt){
          evt.preventDefault();// to stop form submitting
      });
 });

— Noha Salah
fonte

1

$('#form')cerca un elemento con id="form".

$('form') cerca l'elemento del modulo

— Rahul
fonte

0

Dimentichi l'ID del modulo e funziona

$('form#form').submit(function(e){
   e.preventDefault();
   alert('prevent submit');             
});

— Shintadoniku Alyssa
fonte

0

// Prevent form submission
$( "form" ).submit(function( event ) {
  event.preventDefault();
});

da qui: https://api.jquery.com/submit-selector/ (pagina interessante sui tipi di invio)

— Chris Strong
fonte

0

Anche questo sembra funzionare e potrebbe essere leggermente più semplice:

$('#Form').on('submit',function(){
    return false;
})

— Ukuser32
fonte

0

Utilizzando jQuery, è possibile effettuare le seguenti operazioni:

1- Utilizzare l'evento di invio modulo nativo con un pulsante Invia, impedendo al contempo che l'evento venga generato, quindi

2- Verifica il modulo Proprietà valida Questo può essere implementato come segue:

1- HTML:

 <form id="yourForm">
    <input id="submit" type="submit" value="Save"/>
</form>

2- Javascript

 $("form").on("submit", function (e) {
        e.preventDefault();
        if ($(this).valid()) {  
           alert('Success!');
        }
    });

— Mohamed Nagieb
fonte