Willst du HTML-Formular senden, um nichts zu tun

70

Ich möchte, dass ein HTML-Formular nach dem Absenden nichts mehr tut.

action=""

ist nicht gut, da dadurch die Seite neu geladen wird.

Grundsätzlich möchte ich, dass eine Ajax-Funktion aufgerufen wird, wenn eine Taste gedrückt wird oder jemand Enternach der Eingabe der Daten drückt . Ja, ich könnte das Formular-Tag löschen und hinzufügen, indem ich einfach die Funktion aus dem Onclick-Ereignis der Schaltfläche aufrufe, aber ich möchte auch die Funktion "Enter drücken", ohne hacken zu müssen.

Steven Biggums
quelle
3
"Ich möchte auch die" Hiting Enter "-Funktionalität, ohne hacken zu werden." Ich denke, dass das Schiff gesegelt ist, nachdem Sie sich für ein Formular mit action = "" entschieden haben. Warum nicht einfach Handler für Onclick-Ereignisse und Tastendruckereignisse verkabeln?
RPM1984

Antworten:

92

Indem Sie return false;den JavaScript-Code verwenden, den Sie über die Schaltfläche "Senden" aufrufen, können Sie das Senden des Formulars verhindern.

Grundsätzlich benötigen Sie folgenden HTML-Code:

<form onsubmit="myFunction(); return false;">
    <input type="submit" value="Submit">
</form>

Dann der unterstützende JavaScript-Code:

<script language="javascript"><!--
    function myFunction() {
        // Do stuff
    }
//--></script>

Wenn Sie möchten, können Sie auch bestimmte Bedingungen festlegen, unter denen das Skript das Formular senden kann:

<form onSubmit="return myFunction();">
    <input type="submit" value="Submit">
</form>

Gepaart mit:

<script language="JavaScript"><!--
    function myFunction() {
        // Do stuff
        if (condition)
            return true;

        return false;
    }
//--></script>
Jeffrey Blake
quelle
3
Fehlendes functionSchlüsselwort:function myFunction() { }
John Kugelman
12
<form id="my_form" onsubmit="return false;">

reicht ...

einfach
quelle
Ich denke nicht, dass es über ein POSTFELD funktioniert, das speziell JS verwendet, um das Formular einzureichen. Kannst du uns bitte eine jsfiddle-Demo geben ?
PYK
10

Es funktioniert auch:

<form id='my_form' action="javascript:myFunction(); return false;">

quelle
2
Obwohl das nichts bringt, heißt es auf der Konsole Uncaught SyntaxError: Illegal return statement.
Alejandro Nava
2

Wie wäre es mit

<form id="my_form" onsubmit="the_ajax_call_function(); return false;">
 ......
</form>
ZX12R
quelle
2

Sie können den folgenden HTML-Code verwenden

<form onSubmit="myFunction(); return false;">
  <input type="submit" value="Submit">
</form>
Keyur Shah
quelle
0
<form onsubmit="return false;">
Ali Jamal
quelle
1
Sie sollten eine Erklärung hinzufügen, was Ihre Lösung tut.
Charliefortune
0

Geben Sie als Teil des Onclick-Ereignisses der Schaltfläche false zurück, wodurch das Senden des Formulars verhindert wird.

Dh:

function doFormStuff() {
    // Ajax function body here
    return false;
}

Rufen Sie diese Funktion einfach beim Klicken auf die Schaltfläche "Senden" auf. Es gibt viele verschiedene Möglichkeiten.

Ross
quelle
0

Verwenden Sie jQuery . Vielleicht setzen Sie ein Div um Ihre Elemente aus dem Formular. Verwenden Sie dann PreventDefault () und führen Sie Ihre Ajax-Aufrufe durch.

Matt Phillips
quelle
0

Verwenden:

<form action='javascript:functionWithAjax("search");'>
  <input class="keyword" id="keyword" name="keyword" placeholder="input your keywords" type="search">
  <i class="iconfont icon-icon" onclick="functionWithAjax("search");"></i>
</form>

<script type="text/javascript">
  function functionWithAjax(type) {
    // Ajax action

    return false;
  }
</script>
Junjie Li
quelle
Sie sollten den Code wirklich ein wenig erklären. Es wird eine gute Antwort in eine großartige verwandeln.
Neil