Ajax Post variable Felder

AxelM · 20.02.2018

Hallo,
Ich habe einige Eingabefelder (Kein <form> Tag).
Alle eingabefelder haben die Klasse ff.
Nun würde ich gern, sobald sich der Inhalt eines Eingabefeldes ändert einen Postrequest absenden, der Alle Felder der Klasse ff beinhaltet.
Soweit wäre das zunächst auch kein Problem.
Nun ist es aber so, dass die Anzahl und Bezeichnungen der Eingabefelder dynamisch sind.
Gitb es eine Möglichkeit, das mit JQUERY zu lösen, ohne, dass ich das Script mit PHP basteln muss?

Myhar · 20.02.2018

Woran genau scheiterst du?

AxelM schrieb:
Hallo,
Nun würde ich gern, sobald sich der Inhalt eines Eingabefeldes ändert einen Postrequest absenden, der Alle Felder der Klasse ff beinhaltet.
Soweit wäre das zunächst auch kein Problem.

Damit ist dein Problem schon gelöst. Du sendest alle Felder ab, egal welchen Namen sie haben oder wie viele es sind.

AxelM · 20.02.2018

Und wie mache ich das?

Code:

$.post("ajax.php",
                        {
                            <?PHP
                                foreach($felder as $feld)
                                {
                                    echo $feld.": $('.ff[name=".$feld."]').val(), \n";
                                }
                            ?>
                            action: "setQuery"
                        },
                        function(data, status){
                            console.log("Data: " + data + "\nStatus: " + status);
                        });

im Moment sieht das so aus....

Gelöschtes Mitglied 633957 · 20.02.2018

Eine Möglichkeit ist die Felder mit gleicher Klasse in ein Array zu schreiben.

HTML:

<!doctype html>
<html lang="de">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   <title>Input in Array</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

  <div class="inputs">
    <input type="text" class="ein-text">
    <input type="text" class="ein-text">
  </div>
    <br><br>
  <div class="inputs">
    <input type="text" class="ein-text">
    <input type="text" class="ein-text">
  </div>

</body>

<script>
  var texte = [];
  $('.inputs .ein-text').keyup(function() {             // Update nach jedem Tastenschlag
    texte = $('.inputs .ein-text').map(function() {     // Inputs auslesen und in Array packen
     return $(this).val();
    }).get();
    console.log(texte);                                 // Array an Konsole
  });
</script>

</html>

Die Funktion muss natürlich nicht nach jedem Tastenanschlag ausgeführt werden.

Myhar · 21.02.2018

@AxelM warum ist dort php code in der ajax funktion? PHP wird nur am Server ausgeführt und ist irrelevant für dein Problem. Du musst per Javascript alle Elemente herausfiltern, so wie es @tynick gemacht hat. Allerdings filtert er in seinem Beispiel keine leeren Elemente heraus, schaffst du das selber? Wenn du das möchtest, musst du die value überprüfen bevor du sie speicherst.

Curanai · 22.02.2018

Kritisch sehe ich hier "dynamische Anzahl und Namen". Dir bleibt da keine andere Wahl als alles zu verarbeiten, was am Server ankommt. Da wirst Du höllisch aufpassen müssen (Merksatz: Alles vom User/Client ist toxisch!). Ist der Inhalt denn typengleich? Damit Du "casten" kannst. Wenn Du jetzt "String" (beliebige Texte) sagst, zweifel ich am Lösungsweg. Bedenke: Nur weil Du bspw. zwei Inputs anbietest zur Eingabe, heißt es nicht, dass ich Dir auch nur zwei schicke.

@Myhar: Weil er sich auf diese Weise Client-seitig die Inhalte seines Forms da hinein mogelt (reine Ausgabe), um übertragen werden zu können. Dass man JavaScript mit PHP schreibt, war noch nie verboten

- ist nur weiterhin skuril und lässt sich daher nur erschwert auslagern. Auch reicht es nicht, nur auf "leere Elemente" zu schauen - selbst ".trim()" kann hier Sinn ergeben, um die Übertragung zu minimieren, die per AJAX raus geht.

Was mir an tynicks Muster weniger gefällt (ein Hauch mimimi, sorry), ist ".keyup()". Der Grund ist aber ein anderer - ich bevorzuge ".on('keyup', ...)". Der Grund: Wenn man tatsächlich mal seine Event-Handler sucht, muss man diese manuell und einzeln im Projekt abfragen. Ich suche da bevorzugt lieber projektweit nach ".on('".

Ebenfalls lässt sich ein unbind() mit gleichem Selektor kinderleicht realisieren. Das hängt aber wirklich vom Projektumfang ab.

Was mir gar nicht gefällt: "var texte;" - das funktioniert zwar, ist aber der Grund, warum es genügend Leute gibt, die sich über JavaScript und die lasche Variablendefinition/-verfremdung beschweren. Bitte gleich als Array klassifizieren, denn das wird es später!

Gelöschtes Mitglied 633957 · 22.02.2018

Curanai schrieb:
Was mir gar nicht gefällt: "var texte;" - das funktioniert zwar, ist aber der Grund, warum es genügend Leute gibt, die sich über JavaScript und die lasche Variablendefinition/-verfremdung beschweren. Bitte gleich als Array klassifizieren, denn das wird es später!

Hast ja recht!

Ist korrigiert!

Curanai · 22.02.2018

Najaaaaa ... wenn wir jetzt noch über ES6 reden würden, wäre "const texte = []" top.

Alternativ würde ich auch "let" gelten lassen - aber "var" ist raus.

Und wieso ist mein Kaffeebecher schon wieder leer ... ?!

Myhar · 22.02.2018

@Curanai Ich weiß schon, dass er hier JS mit PHP zusammenbastelt. Aber wieso? Nur weil es möglich ist heißt es nicht, dass es auch Sinn ergibt. Mir würde kein Anwendungsfall einfallen, wo es notwndig ist, das JS mit PHP aufzubauen. Zumindest in dem Fall ist es absolut nicht sinnvoll, er hat da ja nur die initialwerte in der Funktion stehen aber nicht die, die sich ändern? Dafür is JS doch da, damit er sich die Werte dynamisch aus allen Feldern auslesen kann.

Und zweitens: const texte = []; ist doch nur sinnvoll wenn sich bei den texten nie etwas ändert (sprich es immer [] bleibt) oder? const kann ja im nachhinein nicht geändert werden? Oder kann man einem const [] trotzdem Werte hinzufügen?

Gelöschtes Mitglied 633957 · 22.02.2018

Myhar schrieb:
const kann ja im nachhinein nicht geändert werden?

Der Wert der Konstante kann verändert werden, der Bezeichner jedoch nicht.

Curanai · 22.02.2018

@Myhar: Um Dir ein lebendiges Beispiel zu geben, wann es Sinn macht, mit PHP in JavaScript zu schreiben: Wenn beim Seitenaufruf Daten aus einer Datenbank in einem Chart zu stehen haben, welches via JavaScript generiert wird. Da werden dann immer gern Drittanbieter genommen, die per Object die Values aufgelistet haben wollen. Ist der Zeitraum des Aufrufs dynamisch, kommst nicht drumherum, sofern Du es nicht async umschreibst.

Ich gebe Dir recht: Nur weil möglich, muss man es nicht machen!

Zu Deiner zweiten Frage: "const" ist keine Konstante wie in bspw. PHP. So ist das natürlich möglich:

Code:

"use strict"; // immer empfohlen!
const foo = {};
foo.bar = 42;
console.log(foo.bar);
// → 42

"const" soll man eigentlich verwenden, wenn kein Rebinding gemacht wird. Wenn ich also - ordentlich geschrieben - "const foo" als Array deklariere, bleibt es permanent dabei und soll (für andere Devs) auch nicht plötzlich als "String" verwendet werden. Dann gibt es quasi die geliebten Exceptions in der Konsole. Auch der Einsatz von Unary (--var; ++var) oder Postfix (var--; var++) oder von Rechenoperationen oder bitweisem Verschieben führt zu Exceptions beim Einsatz von const.

Du kannst also nicht aus Versehen das hier machen:

Code:

let position = { x: 2, y: 3 };
position += 1; // weil irgendein Coder im Team das nutzt
// position wird '[object Object]1' (Typ: String)

Mein Leitsatz hierzu: Der einzige Unterschied zwischen "let" und "const" ist, dass "const" einen "Vertrag" mit dem Inhalt macht. Dieser untersagt/verhindert "Rebinding".