Nicht die Seite aktualisieren, wenn die EINGABETASTE gedrückt wird

Ich habe einige Probleme mit der enter-Taste auslösen einer Aktualisierung der Seite, wenn es eine Eingabe in einem Formular.

Den folgenden code nicht aktualisieren Sie die Seite, wenn die EINGABETASTE gedrückt wird, und wenn es ist kein text eingegeben, der in dem Textfeld (#Eingabe), aber die Seite aktualisieren, wenn die EINGABETASTE gedrückt wird, und es wird Eingang in #input ODER wenn sich der cursor in den Textbereich. Ich bin mir nicht sicher, was es auslösen, da #abschicken ist ein regelmäßiges klicken.

<div id="forms" class="container">
            <form>
                Enter your verb here in plain (dictionary) form:
                <input type="text" class="input-sm" id="input"></input>
                <div class="radio">
                    <label>
                        <input type="radio" name="input-method" value="Hiragana" checked />Radio 1
                    </label>
                </div>
                <div class="radio">
                    <label>
                        <input type="radio" name="input-method" value="Romaji" />Radio 2
                    </label>
                </div>
                <input type="button" class="btn btn-default" id="submit" value="Submit">
                </input
            </form>
        </div>

Ich versuche jquery zu lösen das problem, benötigen aber die Hilfe in diesem Zusammenhang. Anregungen wäre dankbar!

  • wo ist dein script???
  • Sorry, habe ich gerade Hinzugefügt.
  • Du hast eine schließende tag für eine Schaltfläche, die nicht vorhanden ist gibt es...
  • Sorry, behoben.
  • Diese ist einfach ein standard-Verhalten von text-input-Elemente, die innerhalb einer form. Das Formular wird eingereicht, wenn ENTER gedrückt wird auf eine Texteingabe.
InformationsquelleAutor cardboardtheory | 2014-09-02
  1. 6

    können Sie entweder fügen Sie Folgendes Skript an das Ende des Körpers

    <script>
        $("form").submit(function (e) {
            e.preventDefault();
            alert("call some function here");
        });
</script>

    oder Sie können einfach legen Sie Ihre Formular-tag wie diesem

    <form onsubmit="return false">

    entweder Weg, Sie haben dann schreiben Sie eine onClick="SOMEFUNCTION ()", um die Eingabe

    auch es ist ein Fehler mit einer extra-Taste /tag...entfernen Sie diese und verwenden Sie stattdessen 

    <input type="button" class="btn btn-default" id="submit" value="Conjugate" />

    Hinweis: die Endung slash

    • Der endende slash ist völlig unnötig, dies ist nicht XHTML.
    • nicht einverstanden, auch jsfiddle beschwert sich w/o-das Ende Schrägstrich ...
    • Es ist "Teemu" haha. Auch Amol, danke für die Jquery-Skript, es funktioniert. Ich wünschte, ich könnte daneben zwei Antworten, aber ich werde mark dir, weil ich zufällig zu wollen, reines JQuery-ohne HTML -, obwohl beide einwandfrei funktionieren!
    • Bitte siehe Quentin ' s Antwort zum Thema self-closing-tags und HTML. Und die specs ...
    InformationsquelleAutor Amol
  2. 4

    einfach ändern Sie Ihre html:

    <div id="forms" class="container">
        <form action="javascript:void(-1)">
            Enter your verb here in plain (dictionary) form:
            ....

    jsfiddle hier - funktioniert wie Charme

    • Vielen Dank, das funktioniert! Können Sie erklären, was es tut und warum das andere nicht funktioniert hat? Auch gibt es trotzdem, dies zu tun außerhalb der HTML?
    • Es wird ausdrücklich "nichts" tun und da es keinen Rückgabewert true auf das "nichts", wird das Formular nicht gesendet werden. Das ist ein "so-90" - Lösung für single-pager, dass es oft einfach vergessen.
    • sorry, der zweite Teil: gehen mit @Amol die Lösung für eine Reine JS/jQuery und keiner-html
    • Habe es und danke für die Hilfe. Nur merkte ich gar nicht brauchen, ein form-element: ich habe nicht einen server zu übermitteln nichts, ich bin einfach mit den Tasten zum ausführen von javascript-Funktionen mit JQuery.
    • ohne form-element wird wahrscheinlich dazu führen, dass Fehler / zufällige Ergebnisse, die in IE - tests empfohlen!
    • Axel Amthor ich habe Zweifel. Wenn wir hinzufügen action="javascript:void(-1)" dann wird das Formular nicht eingereicht werden, auch wenn wir auf Absenden klicken.. hab ich Recht ?? Was ist, wenn mussten wir reichen Sie das Formular beim klicken des submit-button ?? Frage nur für mein eigenes wissen.
    • Danke, ich werde Experimentieren.

    InformationsquelleAutor Axel Amthor
  3. 0

    haben Sie syntax-Fehler in Ihrem html-codes:

    <input type="button" class="btn btn-default" id="submit" value="Submit">
            </button>

    ändern Sie diese:

     <button type="button" class="btn btn-default" id="submit" value="Submit">
            </button>

    Außerdem müssen Sie mit Javascript/jquery, um das Formular Absenden zu verhindern erfrischen Sie Ihre gesamte Seite

    • Danke für den Fang, die!
    InformationsquelleAutor Super Hornet
Schreibe einen Kommentar