JavaScript-Code zum Stoppen der Formularübermittlung

205

Eine Möglichkeit, die Formularübermittlung zu stoppen, besteht darin, false von Ihrer JavaScript-Funktion zurückzugeben.

Wenn Sie auf die Schaltfläche "Senden" klicken, wird eine Validierungsfunktion aufgerufen. Ich habe einen Fall in der Formularvalidierung. Wenn diese Bedingung erfüllt ist, rufe ich eine Funktion namens returnToPreviousPage () auf.

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

Ich verwende JavaScript und Dojo Toolkit .

Anstatt zur vorherigen Seite zurückzukehren, wird das Formular gesendet. Wie kann ich diese Übermittlung abbrechen und zur vorherigen Seite zurückkehren?

javascript html forms Muhammad Imran Tariq
quelle

RU Sicher, dass diese Funktion aufruft? versuchen Sie, Alarm zu setzen ('Test'); vor window.history

samirprogrammer

ja, ich bin sicher; es wird gerufen.

Muhammad Imran Tariq

8

Mögliches Duplikat von Wie kann verhindert werden, dass ein Formular eingereicht wird?

TJ

291

Sie können den Rückgabewert der Funktion verwenden, um das Senden des Formulars zu verhindern

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

und funktionieren wie

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

Wenn in Chrome 27.0.1453.116 m der obige Code nicht funktioniert, setzen Sie das returnValue- Feld des Ereignishandlerparameters auf false, damit es funktioniert.

Vielen Dank an Sam für den Informationsaustausch.

EDIT:

Vielen Dank an Vikram für seine Problemumgehung, wenn validateMyForm () false zurückgibt:

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

Dabei ist validateMyForm () eine Funktion, die false zurückgibt, wenn die Validierung fehlschlägt. Der entscheidende Punkt ist die Verwendung des Namensereignisses. Wir können nicht für egepreventDefault () verwenden

Hemant Metalia
quelle

1

Nur eine Vermutung: In der neuesten Version von Chrome funktioniert das bei mir nicht.

Sam

5

Alles, was zurückkehrt, falsescheint keine Wirkung zu haben. Chrome sendet das Formular weiterhin. Zum Beispiel onsubmit="return false;". Das Setzen des Parameterfelds des Ereignishandlers returnValueauf falsefunktioniert jedoch für mich.

Sam

3

Hallo Sam / Hemant, können Sie ein Codebeispiel bereitstellen, wie Sie das returnValue-Feld des Ereignishandlerparameters auf false setzen können.

JackDev

2

Ich denke, da dies die akzeptierte Antwort ist, sollte es wahrscheinlich zeigen, wie man das richtig macht. Ich frage mich zusammen mit JackDev, wie ich das richtig zum Laufen bringen kann. Wie ist, tut dies nicht Arbeit

Cruncher

1

Wenn validateMyForm()hat, werden Fehler return falsenicht erreicht. Das kann also fehlschlagen. Nach vielen Stunden habe ich eine Lösung gefunden, die funktioniert, und sie unten veröffentlicht.

Vikram Pudi

116

Verwenden Sie Standardeinstellung verhindern

Dojo Toolkit

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

jQuery

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

Vanille 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
quelle

3

Ich würde event.preventDefault () aus vielen Gründen empfehlen, false zurückzugeben. Dies sollte die beste Antwort sein: blog.nmsdvid.com/…

acidjazz

1

Gute Antwort. Besser als der Auserwählte.

Ani Menon

2

Gut, aber wo würden Sie die vom OP gewünschte Validierung durchführen?

Sahand

1

@acidjazz Aber wie greift man auf die Formulardaten zu, nachdem man die Standardeinstellung verhindert hat?

CodeAt30

@Sahand @ codeat30 Sie können auf das Ereignis zugreifen target.

Adrien

49

Folgendes funktioniert ab sofort (getestet in Chrome und Firefox):

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

Wobei validateMyForm () eine Funktion ist, die zurückgegeben wird, falsewenn die Validierung fehlschlägt. Der entscheidende Punkt ist die Verwendung des Namens event. Wir können zB nicht verwenden e.preventDefault().

Vikram Pudi
quelle

15

Verwenden Sie einfach eine einfache buttonSchaltfläche anstelle einer Senden-Schaltfläche. Rufen Sie eine JavaScript-Funktion auf, um das Senden von Formularen zu handhaben:

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

Funktion innerhalb eines scriptTags:

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

Sie können es auch versuchen window.history.forward(-1);

dku.rajkumar
quelle

Ich mag diesen Ansatz, weil er meinen Anwendungsfall Rückrufe ermöglicht.

Eddie

12

Dies verhindert die Verwendung der Eingabetaste zum Senden des Formulars. Außerdem requiredfunktionieren neue HTML5-Attribute wie nicht.

Sam

8

Viele schwierige Möglichkeiten, eine einfache Sache zu tun:

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

Danial
quelle

3

Diese genaue Antwort (OK, nicht genau, da bei Ihnen ein Semikolon fehlt) wurde 8 Monate zuvor eingereicht und hat aus gutem Grund negative Stimmen. Das funktioniert meistens . Aber nicht auf allen Browsern all der Zeit.

Auspex

3

Ich habe nicht gesagt, dass Sie ein Semikolon brauchen . Ich habe darauf hingewiesen, dass das alles war, was zwischen Ihrer und einer viel älteren Antwort anders war . Die Tatsache, dass Sie mich jetzt bitten, darauf hinzuweisen, welche Browser dies nicht unterstützen (ich habe nie gesagt, dass es welche gibt, ich habe lediglich darauf hingewiesen, dass es nicht immer funktioniert), zeigt, dass Sie diese ganze Seite immer noch nicht gelesen haben .

Auspex

2

Normalerweise überprüfe ich die Abstimmungen nicht, außer ich wusste nicht, dass die Leute den richtigen Code herabstimmen. Technisch gesehen ist das Semikolon irrelevant, also ist es falsch. Und Sie sagten, "Ihnen fehlt das Semikolon", was bedeutet, dass es benötigt wird, was falsch ist. Sie sagen, es wird "nicht immer funktionieren", aber Sie können nicht auf einen einzelnen Fall oder Browser hinweisen, in dem es nicht funktioniert? Das ist Klanglogik? Es ist der richtige Code. Wenn Sie also nicht auf den Fall hinweisen können, in dem es nicht funktioniert, haben Sie überhaupt keinen Punkt.

Danial

Wie hat das nicht mehr Upvotes? Es ist viel knapper im Vergleich zu den anderen Beispielen.

Sal Alturaigi

Wahrscheinlich, weil der Titel nicht mit dem übereinstimmt, was der Typ tatsächlich gefragt hat.

Danial

6

Alle Ihre Antworten gaben etwas zu arbeiten.

ENDLICH hat dies bei mir funktioniert: (Wenn Sie nicht mindestens ein Kontrollkästchen auswählen, wird es gewarnt und bleibt auf derselben Seite.)

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

Hat auch für mich gearbeitet.

Chetan

4

Basierend auf der Antwort von @Vikram Pudi können wir dies auch mit reinem Javascript tun

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

<script type="text/javascript">

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


    }
</script>

Phan Van Linh
quelle

3

Ich würde empfehlen, kein onsubmitEreignis im Skript zu verwenden und stattdessen anzuhängen.

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

Dann verwenden preventDefault()(oder returnValue = falsefür ältere Browser).

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

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

Isaac Abramowitz
quelle

Können Sie erklären, warum Sie nicht verwenden würden onsubmit?

theFreedomBanana

Vielleicht ist es nur eine Präferenz, aber ich finde es einfacher, die Funktionalität einer Webseite zu verstehen, wenn alle Ereignis-Listener mithilfe JSvon HTMLAttributen angehängt werden . Auf diese Weise müssen Sie nicht so viel hin und her springen, während Sie den Code eines anderen lesen

Isaac Abramowitz

Was ist, wenn jemand die Eingabetaste an einem der Eingänge drückt, anstatt auf die Schaltfläche zu klicken? im allgemeinen reicht

ich

1

Nehmen wir an, Sie haben ein ähnliches Formular

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

Hier ist das Javascript für die Funktion verifyAction

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

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

        return confirmation ;
    }
</script>

Dieser funktioniert unter Firefox, Chrome, Internet Explorer (Edge), Safari usw.

Wenn dies nicht der Fall ist, lassen Sie es mich wissen

Mauricio Gracia Gutierrez
quelle

1

Die Kombination von preventDefault()und returnToPreviousPage()ist perfekt und elegant. Es unterbricht den normalen Betrieb, genau wie Sie einen Ausnahmefänger für die Arbeit entwerfen würden. +1.

1934286

1

Die Antworten von Hemant und Vikram haben in Chrome für mich nicht ganz funktioniert. Das event.preventDefault (); Das Skript verhinderte, dass die Seite gesendet wurde, unabhängig davon, ob die Validierung bestanden oder nicht bestanden wurde. Stattdessen musste ich das event.preventDefault () verschieben; in die if-Anweisung wie folgt:

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

Vielen Dank an Hemant und Vikram, die mich auf den richtigen Weg gebracht haben.

Jesperai
quelle

Hat auch für mich gearbeitet. Vielen Dank.

ivbtar

1

Wenn Sie beispielsweise eine Senden-Schaltfläche im Formular haben, schreiben Sie einfach event.preventDefault (), um die Übertragung zu stoppen. in der Funktion, die beim Klicken auf die Schaltfläche "Senden" oder die Eingabetaste aufgerufen wird.

Dheeraj Nalawade
quelle

0

Mach es einfach ....

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

und hier geht deine JQuery

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

Matee Gojra
quelle

1

Hast du hier jquery benutzt?

Selva Ganapathi

JavaScript-Code zum Stoppen der Formularübermittlung

Antworten: