it-swarm.com.de

JavaScript-Code zum Stoppen der Formularübermittlung

Eine Möglichkeit, die Übermittlung von Formularen zu stoppen, besteht darin, von Ihrer JavaScript-Funktion false 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 mit dem Namen returnToPreviousPage () auf;

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

Ich benutze JavaScript und Dojo Toolkit .

Statt zur vorherigen Seite zurückzukehren, wird das Formular gesendet. Wie kann ich diese Einreichung abbrechen und zur vorherigen Seite zurückkehren?

176

Sie können den Rückgabewert der Funktion verwenden, um die Übermittlung 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>

Im Fall von Chrome 27.0.1453.116 m funktioniert der obige Code nicht, bitte setze das returnValue-Feld des Event-Handler-Parameters auf false , damit er funktioniert.

Vielen Dank an Sam für den Informationsaustausch.

EDIT:

Vielen Dank an Vikram für die Problemumgehung für den Fall, dass 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 z. e.preventDefault ()

245
Hemant Metalia

Verwenden Sie Standard 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();
    });
}
108
Greg Guida

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

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

Dabei ist validateMyForm () eine Funktion, die false zurückgibt, wenn die Validierung fehlschlägt. Der Schlüsselpunkt ist die Verwendung des Namens event. Wir können nicht für z. e.preventDefault().

41
Vikram Pudi

Verwenden Sie einfach ein einfaches button anstelle einer Senden-Schaltfläche. Und rufen Sie eine JavaScript-Funktion auf, um das Absenden von Formularen zu handhaben:

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

Funktion innerhalb eines script -Tags:

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

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

14
dku.rajkumar

Alle Ihre Antworten gaben etwas zu arbeiten.

ENDLICH hat das bei mir geklappt: (Wenn Sie nicht mindestens ein Kontrollkästchen aktivieren, warnt es und bleibt auf der gleichen 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>
5
Gdba

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

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

Ich würde empfehlen, onsubmit nicht zu verwenden und stattdessen ein Ereignis in das Skript einzufügen.

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

Verwenden Sie dann preventDefault() (oder returnValue = false für ältere Browser).

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

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

Die Antworten von Hemant und Vikram haben in Chrome nicht ganz funktioniert. Die event.preventDefault (); Das Skript verhinderte, dass die Seite gesendet wurde, unabhängig davon, ob die Validierung bestanden wurde oder nicht. 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.

1
Jesperai

Zum Beispiel, wenn Sie einen Submit-Button auf dem Formular haben, schreiben Sie einfach event.preventDefault (), um die Weitergabe zu stoppen. in der Funktion, die beim Klicken auf Submit Button oder Enter Button aufgerufen wird.

0

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

<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

Mach es einfach ....

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

und hier geht Ihre JQuery

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