wake-up-neo.com

jQuery: Formular wird nicht mit $ ("# id"). submit () gesendet, wird aber mit einem "submit" -Button gesendet?

<form method="post" action="load_statements.php?action=load" id="loadForm"
                            enctype="multipart/form-data">

das ist meine Form, die für mich gut aussieht. In dieser Form habe ich diese Schaltfläche:

<input type="button" name="submit" id="submit" value="Submit" onclick="confirmSubmit()" class="smallGreenButton" />

hier ist die Funktion, die es aufruft:

function confirmSubmit() {
    // get the number of statements that are matched
    $.post(
        "load_statements.php?action=checkForReplace",
        {
            statementType : $("#statementType").val(),
            year : $("#year").val()
        },
        function(data) {
            if(data['alreadyExists']) {
                if( confirm("Statements already exist for " + $("#statementType").html() + " " + $("#year").val() +
                    ". Are you sure you want to load more statements with these settings? (Note: All duplicate files will be replaced)"
                )) {
                    $("#loadForm").submit();
                }
            } else {
                $("#loadForm").submit();
            }
        }, "json"
    );
}

und wie Sie sehen können, ruft es $("#loadForm").submit(); auf, aber das Formular wird nicht gesendet (dh die Seite wird nicht aktualisiert). Warum das?

vielen Dank!

37
Garrett

http://api.jquery.com/submit/

Das Ereignis jQuery submit() fügt einen Ereignis-Listener hinzu, der beim Absenden des Formulars auftritt. Ihr Code bindet also im Wesentlichen nichts an das Submit-Ereignis. Wenn Sie möchten, dass dieses Formular gesendet wird, verwenden Sie JavaScript der alten Schule document.formName.submit().


Ich lasse meine ursprüngliche Antwort oben intakt, um darauf hinzuweisen, wo ich abwesend war. Was ich damit gemeint habe , ist, dass es verwirrend ist, wenn Sie eine Funktion wie diese haben, warum Sie die Werte in einem Ajax-Teil posten und dann jQuery verwenden, um das Formular zu senden. In diesem Fall würde ich das Ereignis an den Klick auf die Schaltfläche binden und dann true zurückgeben, wenn Sie möchten, dass es zurückgegeben wird. Andernfalls wird false zurückgegeben. Beispiel:

$('#submit').click( function() {
  // ajax logic to test for what you want
  if (ajaxtrue) { return confirm(whatever); } else { return true;}
});

Wenn diese Funktion true zurückgibt, wird dies als erfolgreiches Klicken auf die Schaltfläche zum Senden gewertet und das normale Browserverhalten wird ausgeführt. Dann haben Sie auch die Logik in Form eines Event-Handlers vom Markup getrennt.

Hoffentlich macht das mehr Sinn.

17
NateDSaint

Ändern Sie den "Submit" -Namen der Schaltfläche in einen anderen Namen. Das verursacht das Problem. Siehe die Antwort von dennisjq unter: http://forum.jquery.com/topic/submiting-a-form-programmatically-not-working

Siehe die Dokumentation zu jQuery submit ():

Formulare und ihre untergeordneten Elemente sollten keine Eingabenamen oder IDs verwenden, die mit den Eigenschaften eines Formulars in Konflikt stehen, z. B. Übergeben, Länge oder Methode. Namenskonflikte können verwirrende Fehler verursachen. Eine vollständige Liste der Regeln und Informationen zum Überprüfen Ihres Markups auf diese Probleme finden Sie unter DOMLint.

76
Adam Berecz

Ich benutze $("form")[0].submit()

hier gibt $("form") ein Array von DOM-Elementen zurück, sodass wir durch Zugriff auf den entsprechenden Index das DOM-Objekt für das Formularelement abrufen und die Funktion submit() in diesem DOM-Element ausführen können.

Ein Nachteil ist, wenn Sie mehrere Formularelemente auf einer HTML-Seite haben, müssen Sie eine Vorstellung von der richtigen Reihenfolge der "Formulare" haben

19
sahan maldeniya

Ich hatte ein ähnliches Problem und brauchte eine Weile, um es herauszufinden. Die .submit () - Funktion von jQuery sollte eine Formularübermittlung auslösen, wenn Sie keinen Handler übergeben. Dies liegt jedoch daran, dass Ihre Übermittlungsschaltfläche den Namen "submit" trägt und die Übermittlungsfunktion des Formulars überschreibt.

jQuery ruft die Funktion <form>.submit() des DOM-Objekts auf, aber auf alle Eingaben in einem Formular kann auch durch Aufrufen von <form>.<inputname> zugegriffen werden. Wenn eine Ihrer Eingaben den Namen 'submit' trägt, überschreibt sie die Funktion <form>.submit() mit <form>.submit - als Eingabe-DOM-Element. Wenn jQuery also <form>.submit() aufruft, funktioniert es nicht, weil submit keine Funktion mehr ist. Wenn Sie also den Namen Ihrer Schaltfläche ändern, sollte dies funktionieren.

Sie sind sich nicht sicher, warum die Konsole keinen Fehler protokolliert. Vielleicht überprüft jQuery zuerst, ob die Sendefunktion vorhanden ist, und ignoriert die Anforderung nur, wenn die Funktion nicht vorhanden ist.

13
Donovan

ich habe dem Formular eine unsichtbare Schaltfläche zum Senden hinzugefügt. Anstatt die Funktion submit () aufzurufen, rufe ich die Funktion click () auf der Schaltfläche submit =) auf.

die Schaltfläche: <div style="display:none"><input id="alternateSubmit" type="submit" /></div>

der verrückte Weg, um die Formularübermittlung zu umgehen: $("#alternateSubmit").click();

4
Garrett

lösche das Attribut "name" in deiner Submit-Schaltfläche:

das ist dein Code:

<input type="button" name="submit" id="submit" value="Submit" onclick="confirmSubmit()" class="smallGreenButton" />

sollte so sein:

<input type="button" id="submit" value="Submit" onclick="confirmSubmit()" class="smallGreenButton" />
3
Robith Ritz