Javascript Bestätigung stellt das Formular automatisch zur Verfügung

Question

Ich habe eine Teilansicht, die eine Dateieingabe für das Hochladen von Dateien enthält. Ein Benutzer auf dieser Ansicht wählt eine Datei von ihrem Arbeitsplatz aus und klickt auf die Schaltfläche "Hochladen". Der Klick auf die Schaltfläche "Hochladen" sendet das Formular an eine Aktionsmethode, und die Dateien werden analysiert. Anschließend wird dieselbe Ansicht zurückgegeben, um einige Felder automatisch auszufüllen.

Alles funktioniert perfekt. Ich füge der vorhandenen Ansicht eine neue Anforderung hinzu, die wie folgt lautet:

Anforderung

Benutzer wählen eine Datei aus und klicken auf die Schaltfläche "Hochladen". Sobald die Schaltfläche "Hochladen" geklickt wird, wird ein JavaScript-Bestätigungsdialog mit zwei Schaltflächenoptionen angezeigt, bevor das Formular an die Kontrolleraktionsmethode gesendet wird. Diese Schaltflächen sind "Buffer Run Parsing" und "Normal Parsing". Durch Klicken auf eine dieser Schaltflächen wird an die Kontrolleraktionsmethode gesendet.

In der Kontrolleraktionsmethode beim Posten lautet mein Ziel, welche Schaltfläche sie gedrückt haben zu erfassen und basierend auf der gedrückten Schaltfläche die Datei-Analyse-Logik auszuwählen.

Das Problem

Ich habe eine JavaScript-Funktion erstellt, die die beiden Schaltflächen anzeigt, aber das Dialogfeld verschwindet automatisch und das Formular wird an den Kontroller gepostet. Ich möchte, dass es nicht gepostet wird, bis ich eine der Schaltflächen mit der Bestätigung klicke.

Hier ist, was ich tue:

Hauptansicht:

@using (Html.BeginForm("Create", "RunLogEntry", FormMethod.Post, new { id = "form", enctype = "multipart/form-data"}))
{

        @Html.Partial("_RunLogEntryPartialView", Model)

}

Teilansicht:

    Hochladen

JS-Funktion:

 function initUploadDailog(e) {
        currentForm = $(this).closest('form');
        UploadDialog = $("#uploadConfirmation").dialog({
            modal: true,
            width: 400,
            autoOpen: true,
            title: 'Bitte wählen Sie den Parsertyp für die Test abgeschlossene Berechnung',
            buttons: {
                "Normal Parsing": function () {
                    $("#hiddenInput").val("Normal");
                    alert(currentForm.innerHtml());
                    currentForm.submit();
                },
                "Buffer Parsing": function () {
                    $("#hiddenInput").val("Buffer Run");
                    currentForm.submit();
                }
            }
        });
    }

Kontroller:

   [HttpPost]
        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult Create(RunLogEntry runLogEntry, String ServiceRequest, string Hour, string Minute, string AMPM,
                                     string submit, IEnumerable file, String AssayPerformanceIssues1, List Replicates)
        {
}

Answer 1

Herzlichen Glückwunsch! Du hast einen sehr obskuren Bug gefunden und schwer zu beheben!

Das Problem liegt in deinem Markup; dein Button hat das Attribut name="submit". Entferne es wie unten gezeigt:

Upload

Wenn du currentForm.submit() aufrufst, ruft es nicht die native form.submit() Funktion auf; es versucht, das Button-Element als Funktion zu verwenden!

Hier ist ein funktionierendes jsFiddle deines Codes.

---

Ein wenig Geschichte: Aufgrund des allmächtigen Internet Explorers werden Elemente mit dem Attribut name automatisch in Objekte (oder Unterobjekte) umgewandelt, die direkt über JavaScript zugänglich sind. Dies wurde vor Jahren vom IE-Team konzipiert (ohne die JavaScript/EMCA-Standards einzuhalten), und aufgrund der Vielzahl von Legacy-Websites haben WebKit (Chrome, Safari) und Gecko (Firefox) dasselbe fehlerhafte Verhalten implementiert.

Answer 2

Es gibt mehrere Dinge, die du tun musst.

Erstens, setze Modal auf true. False bedeutet, dass es den Benutzer nicht daran hindert, auf andere Dinge auf der Seite zu klicken, außer dem Kasten.

Zweitens musst du das onclick auf den Submit-Button ändern, um ;return false; einzuschließen. Es sollte so aussehen: onclick=initUploadDailog();return false;". Dadurch wird verhindert, dass das Formular einfach übermittelt wird, sobald der Submit-Button angeklickt wird.

Drittens muss der Dialog selbst das Formular übermitteln, sobald die entsprechende Schaltfläche ausgewählt ist. Siehe hier: jquery dialog: confirm the click on a submit button

Answer 3

Ich sehe 2 Lösungen. Erstens, wenn Sie einfach alles so verwenden möchten, versuchen Sie, Ihr onclick="initUploadDailog();return false;" in onclick="return initUploadDailog();" zu ändern. Dann denke ich, dass Ihr Browser auf ein true oder false wartet, bevor er das Formular sendet.

Aber wenn Sie jQuery so verwenden möchten, wie es vorgesehen ist, sollten Sie sich event.preventDefault() von jQuery ansehen. Geben Sie Ihrem Button zuerst eine ID wie id="art-button". Ändern Sie dann Ihre Funktion, um auf den Klick des Buttons zu reagieren (ich verwende gerne .bind anstelle von .click für die Browserkompatibilität).

Ändern Sie dies:

function initUploadDailog(e) {
    // Ihr Code
}

Zu diesem:

$("#art-button").bind('click', function(e) {
    e.preventDefault();
    // Ihr Code
    $("#form-id").submit();
});

Sie könnten auch auf das tatsächliche Formular-Submit binden, das Standardverhalten verhindern und AJAX verwenden, um Ihre Daten zu senden.