Ajax sendet verschiedene Eingabewerte beim Klicken auf die JQuery UI-Schaltfläche "Next" ab

Question

Ich arbeite derzeit mit jquery ui tabs und ajax/post submit ohne Seitenaktualisierung. Mit einigen Anleitungen konnte ich das div #wmd-preview erfolgreich absenden, wenn ich auf die Schaltfläche "Next" klicke. Das Problem ist, dass ich auch andere Felder habe, die ich gleichzeitig mit dem Klicken der Schaltfläche "Next" in verschiedenen Tabs absenden möchte.

Wie kann ich die Eingabewerte verschiedener Eingabefelder in verschiedenen Tabs absenden, wenn ich auf die Schaltfläche "Next" klicke? BEISPIEL

(für einige Tests lasse ich derzeit die anderen Eingabefelder mit der Tastatur und einer Timer-Einrichtung absenden)

JS- NEXT/Vorherige Schaltfläche kombiniert mit Submit/Ajax

        var currentTab = 0;
          $(function() {
            var $tabs = $('#tabs').tabs({
                disabled: [0, 1, 2]
                , select: function() {
                    if (currentTab == 0) {
                        $.ajax({
                        type: "POST",
                        url: "test1.php",
                        data: { "wmdVal": $("#wmd-preview").html() },
            success: function(result) {
                $('#wmd_result').html( $('#resultval', result).html()); 
            }
                      });
                    }
                }
                , show: function(event, ui) {
                    currentTab = ui.index;
                }
            });

            $(".ui-tabs-panel").each(function(i) {
                var totalSize = $(".ui-tabs-panel").size() - 1;
                if (i != totalSize) {
                    next = i + 2;
                    $(this).append("<a href='#' class='next-tab mover' rel='" + next + "'>Next Page &#187;</a>");
                }
                if (i != 0) {
                    prev = i;
                    $(this).append("<a href='#' class='prev-tab mover' rel='" + prev + "'>&#171; Prev Page</a>");
                }
            });

            $('.next-tab, .prev-tab').click(function() {
                var tabIndex = $(this).attr("rel");
                $tabs.tabs('enable', tabIndex)
                    .tabs('select', tabIndex)
                    .tabs("option","disabled", [0, 1]);
                return false;
            });
        });

HTML

  Titel

    Name

PHP

 Titel Echo Ergebnis:'.$wmdVal.'');
}

if (isset($_POST['wmdVal'])){
        $wmdVal = $_POST['wmdVal']; 
        echo ('Beschreibung Echo Ergebnis:'.$wmdVal.'');
}

if (isset($_POST['name'])){
    $name = $_POST['name']; 
        echo ('Beschreibung Echo Ergebnis:'.$name.'');
}
?>

Answer 1

So weit ich weiß, spielt es keine Rolle, ob die Felder in Registerkarten oder versteckt sind, solange sie eine ID haben, können Sie sie abrufen. Wenn Sie z. B. folgendes verwenden: $('#bla').val(), sucht es die gesamte Seite, bis es ein Element mit der ID "bla" findet.

Fügen Sie es daher einfach zur Datenoption hinzu, wie folgt:

{key1: 'value1', key2: 'value2'}

Versuchen Sie es:

data: { "wmdVal": $("#wmd-preview").html() , "name": $("#name").val() , "title": $("#title").val() },

Sollte funktionieren (nicht getestet)

UPDATE:

Nachdem ich mir den Quellcode Ihrer Website angesehen habe, glaube ich, das Problem gefunden zu haben. Aus den Ergebnissen des Klickens auf die Schaltfläche "Weiter" können Sie erkennen, dass eine $_POST['title']-Variable (isset) vorhanden ist, aber sie ist leer. Es gibt also ein Problem bei der Ajax-Anfrage. Diese Zeile:

"title": $("#title").html()

Sie suchen nicht nach dem html() dieses Eingabefelds. Sie suchen nach val().

Ändern Sie die obige Zeile in:

"title": $("#title").val()

Sollte jetzt funktionieren, bitte aktualisieren Sie mich, wenn nicht

Answer 2

Wenn Sie den AJAX POST jedes Mal ausführen möchten, wenn Sie den Tab ändern, müssen Sie diese Bedingung entfernen: if(currentTab == 0){. Denn diese zwingt den Code dazu, nur ausgeführt zu werden, wenn der erste TAB ausgewählt ist.

Davon abgesehen können Sie beliebige Daten posten, die Sie möchten. Sie müssen sie einfach an die "data:" Eigenschaften des Ajax übergeben. Und da sie global und eindeutig sind, können Sie jede von ihnen anhand ihrer IDs aufrufen. So:

data:{ 
        param1: $("#input1").val(),
        param2: $("#input2").val(),
        paramHtml1: $("#elementHtml1").html()
    }

Answer 3

"title": $("#title").val() sollte sein
"title": $("#title").val() -> Du möchtest den Wert des betreffenden Feldes. Dies sendet den korrekten Wert an den Server.

Es scheint fast so, als würdest du dich jetzt fragen, warum nichts im Bereich 'Titel Echo Ergebnis:' gedruckt wird.

Ich denke, ein guter nächster Schritt könnte sein:

success: function(result) {
    //fülle title_input mit dem Ergebnis des Ajax-Aufrufs
    $('#title_input').html(result);
}

Das gibt dir eine Ausgabe, aber ich denke wahrscheinlich nicht die Ausgabe, die du möchtest. Vielleicht antworte mit welchem Inhalt du den 'Titel Echo Bereich' haben möchtest