Codice JavaScript per interrompere l'invio del modulo

206

Un modo per interrompere l'invio del modulo è restituire false dalla funzione JavaScript.

Quando si fa clic sul pulsante Invia, viene chiamata una funzione di convalida. Ho un caso in forma di convalida. Se tale condizione è soddisfatta, chiamo una funzione denominata returnToPreviousPage ();

function returnToPreviousPage() {
    window.history.back();
}

Sto usando JavaScript e Dojo Toolkit .

Piuttosto tornando alla pagina precedente, invia il modulo. Come posso annullare questo invio e tornare alla pagina precedente?

javascript html forms

— Muhammad Imran Tariq
fonte

RU Sicuro che questa funzione stia chiamando ?? prova a mettere un avviso ('test'); prima di window.history

— samirprogrammer il

sì, sono sicuro; viene chiamato.

— Muhammad Imran Tariq,

8

possibile duplicato di Come impedire l'invio del modulo?

— TJ,

292

È possibile utilizzare il valore restituito della funzione per impedire l'invio del modulo

<form name="myForm" onsubmit="return validateMyForm();">

e funziona come

<script type="text/javascript">
function validateMyForm()
{
  if(check if your conditions are not satisfying)
  { 
    alert("validation failed false");
    returnToPreviousPage();
    return false;
  }

  alert("validations passed");
  return true;
}
</script>

Nel caso di Chrome 27.0.1453.116 m se il codice precedente non funziona, impostare il campo returnValue del parametro del gestore eventi su false per farlo funzionare.

Grazie Sam per aver condiviso le informazioni.

MODIFICARE :

Grazie a Vikram per la sua soluzione alternativa se if validateMyForm () restituisce false:

 <form onsubmit="event.preventDefault(); validateMyForm();">

dove validateMyForm () è una funzione che restituisce false se la validazione fallisce. Il punto chiave è usare l'evento name. Non possiamo usare per egepreventDefault ()

— Hemant Metalia
fonte

1

Solo una supposizione: non funziona per me nell'ultima versione di Chrome.

— Sam

5

Tutto ciò che ritorna falsenon sembra avere alcun effetto; Chrome invia ancora il modulo. Ad esempio onsubmit="return false;",. Tuttavia, l'impostazione del returnValuecampo del parametro del gestore eventi su falsefunziona per me.

— Sam,

3

Ciao Sam / Hemant, puoi fornire un esempio di codice su come impostare il campo returnValue del parametro del gestore eventi su false per favore.

— JackDev,

2

Penso che, poiché questa è la risposta accettata, probabilmente dovrebbe dire come farlo correttamente. Insieme a JackDev, mi chiedo come farlo funzionare correttamente. Così com'è, questo non funziona

— Cruncher,

1

Se validateMyForm()ha errori return falsenon sarà raggiunto. Quindi questo potrebbe fallire. Dopo molte ore, ho trovato una soluzione che funziona e l'ho pubblicata di seguito.

— Vikram Pudi,

116

Usa impedisce predefinito

Dojo Toolkit

dojo.connect(form, "onsubmit", function(evt) {
    evt.preventDefault();
    window.history.back();
});

jQuery

$('#form').submit(function (evt) {
    evt.preventDefault();
    window.history.back();
});

Vanilla JavaScript

if (element.addEventListener) {
    element.addEventListener("submit", function(evt) {
        evt.preventDefault();
        window.history.back();
    }, true);
}
else {
    element.attachEvent('onsubmit', function(evt){
        evt.preventDefault();
        window.history.back();
    });
}

— Greg Guida
fonte

3

Consiglierei event.preventDefault () su return false per molte ragioni, questa dovrebbe essere la risposta migliore: blog.nmsdvid.com/…

— acidjazz

1

Buona risposta. Meglio di quello scelto.

— Ani Menon,

2

Bene, ma dove eseguiresti la convalida richiesta dall'OP?

— Sahand,

1

@acidjazz Ma come si accede ai dati del modulo dopo aver impedito l'impostazione predefinita?

— CodeAt30

@Sahand @ codeat30 È possibile accedere all'evento target.

— Adrien,

50

Di seguito funziona (testato su Chrome e Firefox):

<form onsubmit="event.preventDefault(); validateMyForm();">

Dove validateMyForm () è una funzione che restituisce falsese la validazione fallisce. Il punto chiave è usare il nome event. Non possiamo usare per es e.preventDefault().

— Vikram Pudi
fonte

15

Usa semplicemente buttonun pulsante invece di un pulsante di invio. E chiama una funzione JavaScript per gestire l'invio del modulo:

<input type="button" name="submit" value="submit" onclick="submit_form();"/>

Funzione all'interno di un scripttag:

function submit_form() {
    if (conditions) {
        document.forms['myform'].submit();
    }
    else {
        returnToPreviousPage();
    }
}

Puoi anche provare window.history.forward(-1);

— dku.rajkumar
fonte

Mi piace questo approccio perché consente il mio caso d'uso, i callback.

— Eddie,

12

Questo impedisce l'uso del tasto Invio per inviare il modulo. Inoltre, i nuovi attributi HTML5 come requirednon funzioneranno.

— Sam

8

Molti modi difficili per fare una cosa semplice:

<form name="foo" onsubmit="return false">

— Danial
fonte

3

Questa risposta esatta (OK, non esatta, poiché nella tua manca un punto e virgola) è stata inviata 8 mesi prima e ha voti negativi per una buona ragione. Funziona quasi sempre. Ma non su tutti i browser per tutto il tempo.

— Auspex,

3

Non ho detto che avevi bisogno di un punto e virgola; Ho sottolineato che era tutto ciò che era diverso tra la tua risposta e una molto più vecchia. Il fatto che ora mi stai chiedendo di indicare quali browser non lo supportano (non ho mai detto che ce ne fossero, ho semplicemente sottolineato che non funzionerà sempre), prova che non hai ancora letto l'intera pagina .

— Auspex,

2

Di solito non esamino i voti negativi, tranne per il fatto che non sapevo che le persone votassero il codice corretto. Tecnicamente, il punto e virgola è estraneo, quindi è sbagliato. E tu hai detto "il tuo punto e virgola manca" indica che è necessario, il che è sbagliato. Dici che "non funzionerà sempre" ma non puoi indicare un singolo caso o browser in cui non funzionerà? Questa è logica del suono? È il codice corretto. Quindi, a meno che tu non possa indicare il caso in cui non funzionerà, allora non hai alcun punto.

— Danial,

In che modo questo non ha più voti? È molto più conciso rispetto agli altri esempi.

— Sal Alturaigi,

Probabilmente perché il titolo non corrisponde a quello che il ragazzo stava effettivamente chiedendo.

— Danial,

6

Tutte le tue risposte hanno dato qualcosa su cui lavorare.

FINALMENTE, questo ha funzionato per me: (se non scegli almeno una casella di controllo, avverte e rimane nella stessa pagina)

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <form name="helloForm" action="HelloWorld" method="GET"  onsubmit="valthisform();">
            <br>
            <br><b> MY LIKES </b>
            <br>
            First Name: <input type="text" name="first_name" required>
            <br />
            Last Name: <input type="text" name="last_name"  required />
            <br>
            <input type="radio" name="modifyValues" value="uppercase" required="required">Convert to uppercase <br>
            <input type="radio" name="modifyValues" value="lowercase" required="required">Convert to lowercase <br>
            <input type="radio" name="modifyValues" value="asis"      required="required" checked="checked">Do not convert <br>
            <br>
            <input type="checkbox" name="c1" value="maths"     /> Maths
            <input type="checkbox" name="c1" value="physics"   /> Physics
            <input type="checkbox" name="c1" value="chemistry" /> Chemistry
            <br>

            <button onclick="submit">Submit</button>

            <!-- input type="submit" value="submit" / -->
            <script>
                <!---
                function valthisform() {
                    var checkboxs=document.getElementsByName("c1");
                    var okay=false;
                    for(var i=0,l=checkboxs.length;i<l;i++) {
                        if(checkboxs[i].checked) {
                            okay=true;
                            break;
                        }
                    }
                    if (!okay) { 
                        alert("Please check a checkbox");
                        event.preventDefault();
                    } else {
                    }
                }
                -->
            </script>
        </form>
    </body>
</html>

— GDBA
fonte

Ha funzionato anche per me.

— chetan,

4

Basandoci sulla risposta di @Vikram Pudi, possiamo anche fare così con Javascript puro

<form onsubmit="submitForm(event)">
    <input type="text">
    <input type="submit">
</form>

<script type="text/javascript">

    function submitForm(event){
        event.preventDefault();


    }
</script>

— Phan Van Linh
fonte

3

Consiglierei di non utilizzare onsubmite invece di allegare un evento nello script.

var submit = document.getElementById("submitButtonId");
if (submit.addEventListener) {
  submit.addEventListener("click", returnToPreviousPage);
} else {
  submit.attachEvent("onclick", returnToPreviousPage);
}

Quindi utilizzare preventDefault()(o returnValue = falseper i browser più vecchi).

function returnToPreviousPage (e) {
  e = e || window.event;
  // validation code

  // if invalid
  if (e.preventDefault) {
    e.preventDefault();
  } else {
    e.returnValue = false;
  }
}

— Isaac Abramowitz
fonte

Potresti spiegare perché non dovresti usare onsubmit?

— theFreedomBanana,

Forse è solo una preferenza, ma trovo più facile capire la funzionalità di una pagina web se tutti i listener di eventi sono collegati usando JSinvece di HTMLusare gli attributi. In questo modo non è necessario saltare avanti e indietro tanto durante la lettura del codice di qualcun altro

— Isaac Abramowitz,

cosa succede se qualcuno preme invio su uno degli ingressi invece di fare clic sul pulsante? in generale, secondo

— me

1

Diciamo che hai una forma simile a questa

<form action="membersDeleteAllData.html" method="post">
    <button type="submit" id="btnLoad" onclick="confirmAction(event);">ERASE ALL DATA</button>
</form>

Ecco il javascript per la funzione confirmAction

<script type="text/javascript">
    function confirmAction(e)
    {
        var confirmation = confirm("Are you sure about this ?") ;

        if (!confirmation)
        {
            e.preventDefault() ;
            returnToPreviousPage();
        }

        return confirmation ;
    }
</script>

Questo funziona su Firefox, Chrome, Internet Explorer (edge), Safari, ecc.

In caso contrario, fammi sapere

— Mauricio Gracia Gutierrez
fonte

1

La combinazione di preventDefault()ed returnToPreviousPage()è perfetta ed elegante. Interrompe il normale funzionamento proprio come se si progettasse qualsiasi ricevitore di eccezioni per funzionare. +1.

— 1934286

1

Le risposte di Hemant e Vikram non hanno funzionato perfettamente per me in Chrome. L'evento.preventDefault (); lo script ha impedito l'invio della pagina indipendentemente dal superamento o dal fallimento della convalida. Invece, ho dovuto spostare event.preventDefault (); nell'istruzione if come segue:

    if(check if your conditions are not satisfying) 
    { 
    event.preventDefault();
    alert("validation failed false");
    returnToPreviousPage();
    return false;
    }
    alert("validations passed");
    return true;
    }

Grazie a Hemant e Vikram per avermi messo sulla strada giusta.

— Jesperai
fonte

Ha funzionato anche per me. Grazie.

— ivbtar

1

Ad esempio, se sul modulo è presente il pulsante di invio, per interrompere la sua propagazione basta scrivere event.preventDefault (); nella funzione che viene chiamata facendo clic sul pulsante Invia o sul pulsante Invio.

— Dheeraj Nalawade
fonte

0

Fallo semplicemente ....

<form>
<!-- Your Input Elements -->
</form>

e qui va il tuo JQuery

$(document).on('submit', 'form', function(e){
    e.preventDefault();
    //your code goes here
    //100% works
    return;
});

— Matee Gojra
fonte

1

hai usato jquery qui?

— Selva Ganapathi,