Formular ohne Aktion und wo eingeben, wird die Seite nicht neu geladen


94

Ich suche nach der besten Möglichkeit, ein HTML-Formular ohne Senden-Schaltfläche zu erstellen. Das selbst ist einfach genug, aber ich muss auch verhindern, dass sich das Formular selbst neu lädt, wenn übermittlungsähnliche Dinge erledigt werden (z. B. Enterin einem Textfeld).


Möchten Sie, dass es niemals eingereicht wird?
UpTheCreek

Wenn Sie nur ein <Formular> mit einem einzelnen <Eingang> haben, das ein Textfeld ist, sollte es nicht gesendet werden, wenn Sie die Eingabetaste drücken, oder?
Zack The Human

Ich möchte, dass es sich unter einer anderen Bedingung unterwirft (tatsächlich einen bestimmten Knopf drückt). Das Problem ist, dass ich das Verhalten "Eingabe im Textfeld" beim Posten / Aufrufen derselben URL nicht erhalten konnte, damit dies nicht passiert. Mein sorgfältig erstelltes Formular, in dem Sie X, Y und Z ausführen müssen, damit es gesendet werden kann, kann vom Benutzer, der die Eingabetaste drückt, fälschlicherweise gesendet werden.
Matt Roberts

Antworten:


45

Fügen Sie dem Formular einen Onsubmit-Handler hinzu (entweder über einfaches js oder jquery $ (). Submit (fn)) und geben Sie false zurück, sofern Ihre spezifischen Bedingungen nicht erfüllt sind.

Wenn Sie nicht möchten, dass das Formular jemals gesendet wird, lassen Sie in diesem Fall einfach das Attribut 'action' für das Formularelement weg.


148
Ein Formular ohne actionAttribut ist gemäß den Standards kein Formular - und führt in einigen Browsern tatsächlich zu einem erneuten Laden der Seite. Ich habe festgestellt, dass dies action="javascript:void(0);"gut funktioniert.
Dutchie432

Die Antwort der Holländer funktioniert perfekt. Firefox hat gerade die Seite aktualisiert.
Doomsknight

1
@ Dutchie432 sollte dies zu einer Antwort anstelle eines Kommentars machen. Dann würde es seinen Weg nach oben machen, wo es hingehört. Alternativ könnte KPrime seine Antwort anpassen, da das Auslassen der Aktion für mich nicht funktioniert hat ...
Salbei

209

Sie sollten es action="javascript:void(0);"in Ihr Formular aufnehmen, um das erneute Laden von Seiten zu verhindern und den HTML-Standard beizubehalten.


4
Ich habe gerade 2 Tage lang versucht, die Standardaktion der Schaltfläche "Senden" zu unterdrücken, wenn die Eingabetaste gedrückt wird, da die Seite zwar ausgeführt wurde, die Seite jedoch neu geladen wurde (Firefox). Durch Hinzufügen der Javascript-Leere als Aktion im Formular wurde das Problem behoben. Dank dafür.
Tony Payne

Danke für diese zusätzliche Antwort. das funktioniert immer noch - aber ist dies auch 2016 noch die "State of the Art" -Lösung?
low_rents

1
@low_rents Ich benutze es immer noch und habe persönlich keine bessere Lösung gefunden.
Dutchie432

1
Vielen Dank für die präzise und großartige Lösung, um das Neuladen der Seite beim Drücken der Eingabetaste zu beheben :) Beste Lösung.
Imran Rafiq Eher

9

Fügen Sie dieses Ereignis einfach Ihrem Textfeld hinzu. Es verhindert eine Übermittlung beim Drücken der Eingabetaste, und Sie können nach Bedarf eine Übermittlungsschaltfläche hinzufügen oder form.submit () aufrufen:

onKeyPress="if (event.which == 13) return false;"

Beispielsweise:

<input id="txt" type="text" onKeyPress="if (event.which == 13) return false;"></input>

1
Danke für das. Ich fürchte, die Klarheit Ihrer Antwort hat mir die Richtigkeit einer früheren Antwort deutlich gemacht, sodass Sie nicht die akzeptierte Antwort erhalten, aber meine Dankbarkeit und eine positive Bewertung!
Matt Roberts

2
Danke dir. Froh, dass ich Helfen kann. Ich war sowieso nie einer im Rampenlicht. ;)
GenericMeatUnit

5

Wenn Sie in einem Formular die Eingabetaste drücken, muss das natürliche Verhalten des Formulars gesendet werden. Um dieses nicht natürliche Verhalten zu stoppen, müssen Sie mit jquery verhindern, dass es gesendet wird (Standardverhalten):

$("#yourFormId").on("submit",function(event){event.preventDefault()})

4

eine Idee:

<form method="POST" action="javascript:void(0);" onSubmit="CheckPassword()">
    <input id="pwset" type="text" size="20" name='pwuser'><br><br>
    <button type="button" onclick="CheckPassword()">Next</button>
</form>

und

<script type="text/javascript">
    $("#pwset").focus();
    function CheckPassword()
    {
        inputtxt = $("#pwset").val();
        //and now your code
        $("#div1").load("next.php #div2");
        return false;
    }
</script>

1

Zwei Möglichkeiten zu lösen:

  1. Der Aktionswert des Formulars lautet "Javascript: void (0);".
  2. Fügen Sie einen Tastendruck-Ereignis-Listener für das Formular hinzu, um das Senden zu verhindern.

Das Abhören eines Tastendruckereignisses (z. B. Eingabe der Taste) kann zu Problemen mit textareas führen und möglicherweise die automatische Vervollständigung oder Dropdowns auswählen. Mobilgeräte können eine weitere Problemquelle sein.
Luckydonald

0

Die erste Antwort ist die beste Lösung:

Fügen Sie dem Formular einen Onsubmit-Handler hinzu (entweder über einfaches js oder jquery $ (). Submit (fn)) und geben Sie false zurück, sofern Ihre spezifischen Bedingungen nicht erfüllt sind.

Genauer gesagt mit jquery:

$('#your-form-id').submit(function(){return false;});

Wenn Sie nicht möchten, dass das Formular jemals gesendet wird, lassen Sie in diesem Fall einfach das Attribut 'action' für das Formularelement weg.

Das Schreiben von Chrome-Erweiterungen ist ein Beispiel dafür, wo Sie möglicherweise ein Formular für Benutzereingaben haben, das Sie jedoch nicht senden möchten. Wenn Sie action = "javascript: void (0);" verwenden, funktioniert der Code wahrscheinlich, aber es tritt dieses Problem auf, bei dem beim Ausführen von Inline-Javascript eine Fehlermeldung angezeigt wird.

Wenn Sie die Aktion vollständig auslassen, wird das Formular neu geladen, was in einigen Fällen auch beim Schreiben einer Chrome-Erweiterung unerwünscht ist. Oder wenn Sie eine Webseite mit einer Art eingebettetem Taschenrechner hätten, auf der der Benutzer Eingaben machen und auf "Berechnen" oder ähnliches klicken würde.

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.