ajax und javascript Felder auslesen ohne Post absenden

[selfmade01]

Hallo
vor einiger Zeit bekam ich hier super Tipps wie ich eine Tabelle auf einer Seite nachladen kann ohne diese Seite neu zu laden was nun mit Ajax und Euren Tipps hier im Forum sehr gut funktioniert.

Jetzt stehe ich vor dem nächsten Problemchen.
Es soll ein Formular fortlaufend ohne neuem Laden der Seite mit weiteren Eingabefeldern erweitert werden und zuvor eingetragene Werte in die DB geschrieben werden

Hier das Formular:

Ich habe ein Formular Werte aus einer DB besitzt.
id1, id2, id3

Dieses Formular hat noch leere Felder
wert1, wert2, wert3, wert4

Mindestens die Felder wert1 und wert2 oder wert3 und wert4 müssen mit Werten vom User versehen werden.
der User soll dann die Möglichkeit haben einen Button zu klicken wobei diese Werte aus den feldern ausgelesen werden und via Ajax in die DB eingetragen werden.

Anschliessend soll das Formular um eine Reihe weiterer Eingabefelder erweitert werden und die Reihe davor (die ja schon eingetragen wurde), soll gesperrt werden.

ich müsste nun wohl was ich zuvor schon mit Ajax hinbekommen habe (also ohne die Seite neu zu laden) eine Tabelle hinzuzufügen, auch noch wohl mit Javascript Werte aus den Feldern auslesen und überprüfen ob die richtigen gesetzt wurden und auch die Eingaben im Format stimmen.

Kann mir hier jemand etwas helfen?

Viele Grüße

Jürgen

[Encoder]

Ajax ist gedacht um eine Seite nicht komplett neu zu laden, sondern Inhalte per Javascript zu senden und empfangen und diese dann nach Bedarf weiter zu verarbeiten.
Also genau das was du willst und genau das was du bereits getan hast. Du beschreibst einige Schritte die du zudem doch alle schon irgendwie als Code umgesetzt hast. Wo genau hängt es?

ich müsste nun wohl was ich zuvor schon mit Ajax hinbekommen habe (also ohne die Seite neu zu laden) eine Tabelle hinzuzufügen

Du hast nicht per Ajax etwas hinzugefügt sondern mit Javascript. Per Ajax wurde dieses etwas geladen.
Die Feldinhalte hast du mit Javascript ausgelesen und per Ajax versendet. Das auslesen ist schon vorhanden, jetzt musst du die Werte nur nicht versenden sondern was anderes damit tun.

[selfmade01]

Ajax ist gedacht um eine Seite nicht komplett neu zu laden, sondern Inhalte per Javascript zu senden und empfangen und diese dann nach Bedarf weiter zu verarbeiten.
Also genau das was du willst und genau das was du bereits getan hast. Du beschreibst einige Schritte die du zudem doch alle schon irgendwie als Code umgesetzt hast. Wo genau hängt es?

Hallo,
genau so ungefähr , sorry für meine Dummi-Beschreibung.

es ist schon so wie Du es erkannt hast.

Ich bräuchte nun nur eigentlich das Auslesen von eingetragenen Werte in Formularfelder um dann mit diesen die Ajax-Ausführung zu starten.
Zuvor hatte ich die Ajax-Anwendung mit Variablen gestartet die ich in einer php-Variablen schon vorliegen hatte. Jetzt muss ich zusätzlich Eingabefelder auslesen, diese überprüfen ob die Eingaben korrekt und Vollständig oder zuviel waren um dann damit die ajax-Anwendung zu starten.
Wenn diese abgelaufen ist und der Datensatz eingetragen wurde, sollen die zuvor eingetragen Werte in den Eingabefeldern gesperrt werden und eine neue Zeile mit weiteren Eingabefeldern hinzugefügt werden

Das Hinzufügen dieser Eingabefelder hatte ich schon in einer anderen Anwendung erledigt.

Es geht eigentlich nur noch im die javascript-seite wie ich jetzt erkannt habe, also Auslesen von Eingabefelder und das Überprüfen dieser

Grüße Jürgen

[1UnitedPower]

Hakuna matata!

Ich bräuchte nun nur eigentlich das Auslesen von eingetragenen Werte in Formularfelder um dann mit diesen die Ajax-Ausführung zu starten.

Dafür gibt es seit HTML5 die FormValidation-API, das macht es extrem einfach für dich. Du musst den Formular-Eingabefeldern lediglich die richtigen Attribute verpassen, zum Beispiel:

<input type="number"> für ein numerisches Eingabefeld, oder <input required> für ein Pflichtfeld.

Mit HTML5-FormValidation und AJAX ergibt sich dann folgendes Grundgeürst (ungetestet):

// AJAX-Request vorbereiten  
var request = new XMLHttpRequest();  
request.open('post','action.php');  
  
// Referenz auf das <form>-Element holen  
var form = document.querySelector('form');  
  
// Event-Handler für das submit-Ereignis registrieren  
form.addEventListener('submit', function ( submitEvent ) {  
  
   // Standard-Verhalten unterdrücken  
   submitEvent.preventDefault();  
  
   // Formuardaten überprüfen und Feedback an den Nutzer geben  
   var isValid = submitEvent.target.reportValidity();  
  
   // Im Erfolgsfall Formular abschicken  
   if ( isValid ) {  
  
      // Formulardaten auslesen  
      var formData = new FormData( submitEvent.target );  
  
      // Formulardaten mit AJAX abschicken  
       request.send( formData );  
  
   } else {  
  
      // Fehlerbehandlung  
   }  
  
});

[selfmade01]

Hallo,

gibt es für diese Eingabedefintionen auch eine Liste wo man sich das anschauen kann?
Bzw. kann man die Eingabedefinition selbst bestimmen?

Beispiel: meine werte müssen alle in der Form
8,2 , 8,20 oder 08,2 bzw. 08,20 sein. Wegen des Kommas weiss ich nicht ob das nun rein numerisch ist
oder eher Decimal mit Komma oder float.

Dann der request.open('post','action.php'); irritiert mich ein wenig.

Ich habe ja im Formular noch keinen Post da ich alles erstmal via Ajax nachladen will und die eingetragenen Werte ohne echtem Absenden des Formulars auswerten muss.

Sorry, weiss das jetzt nicht besser zu beschreiben.
Grundsätzlich ist es aber so, dass alles auf der Formularseite so ablaufen muss dass das Formular nicht neu geladen werden müsste.

Was ja meines Erachtens via Javascript auf Client-seite und dann auf dem server via Ajax ablaufen muss oder?

Grüße Jürgen

[selfmade01]

ps...

die required="required'
Methode kann ich ja eigentlich leider nicht anwenden da ich ja

insgesamt 8 Eingabefelder/Zeile habe und davon müssen 4 ausgefüllt sein.
Also entweder die Kombination von Wert1 bis Wert4 oder die Kombination Wert5 bis Wert8

so glaube ich bleibt mir fast nichts anderes übrig als die mit herkömmlicher Javascript-Methoden zu lösen oder?

Grüße Jürgen

[1UnitedPower]

Hakuna matata!

gibt es für diese Eingabedefintionen auch eine Liste wo man sich das anschauen kann?

Ja, schlag mal in der Doku unter Formular nach.

Bzw. kann man die Eingabedefinition selbst bestimmen?

Auch das geht. Mit dem pattern-Attribut kann man Eingabefelder gegen reguläre Ausdrücke prüfen lassen. Wenn selbst das nicht reicht, dann kann man in einer eigenen Funktion mit setCustomValidity() eine benutzerdefinierte Fehlermeldung generieren.

<input class="custom">

function check ( input ) {  
   if ( input.value !== 'erlaubt') {  
      input.setCustomValidity('Unerhörtheit! Eine Frechheit ohne Gleichen!');  
   }  
}  
  
check( document.querySelector('input.custom') );

Die benutzerdefinierte check-Funktion müsste in dem vorherigen Grundgerüst vor reportValidity() aufgerufen werden.

Beispiel: meine werte müssen alle in der Form
8,2 , 8,20 oder 08,2 bzw. 08,20 sein. Wegen des Kommas weiss ich nicht ob das nun rein numerisch ist
oder eher Decimal mit Komma oder float.

Das Komma soll höchstwahrscheinlich ein Dezimaltrenner sein, oder nicht? In dem Fall solltest du type="number" verwenden. Und damit bleibt die Wahl des Dezimaltrenners auch dem Browser überlassen, kein Grund hier etwas eigenes zu stricken.

Dann der request.open('post','action.php'); irritiert mich ein wenig.

Ich habe ja im Formular noch keinen Post da ich alles erstmal via Ajax nachladen will und die eingetragenen Werte ohne echtem Absenden des Formulars auswerten muss.

Achso, ich dachte du möchtest das Formular mit Ajax abschicken. Stattdessen willst du das Formular wohl erstmal nur über AJAX holen. Dann hab ich dich in dem Punkt einfach missverstanden. Für die Validierung macht das aber keinen Unterschied, nur der Zeitpunkt würde sich vermutlich ändern: statt beim Abschicken (submit) müsstest du die Validierung dann wannanders vornehmen, wo genau kann ich deinem Posting nicht entnehmen.

Sorry, weiss das jetzt nicht besser zu beschreiben.
Grundsätzlich ist es aber so, dass alles auf der Formularseite so ablaufen muss dass das Formular nicht neu geladen werden müsste.

Aber das hast du doch schon implementiert, oder nicht?

Was ja meines Erachtens via Javascript auf Client-seite und dann auf dem server via Ajax ablaufen muss oder?

Am besten du erklärst uns nochmal, was du bisher schon gebastelt hast und was dir noch fehlt und wo genau deine Schwierigkeiten liegen, sonst reden wir hier nur noch länger aneinander vorbei, und das ist vergeudete Energie.

[selfmade01]

Hallo,

Achso, ich dachte du möchtest das Formular mit Ajax abschicken. Stattdessen willst du das Formular wohl erstmal nur über AJAX holen. Dann hab ich dich in dem Punkt einfach missverstanden. Für die Validierung macht das aber keinen Unterschied, nur der Zeitpunkt würde sich vermutlich ändern: statt beim Abschicken (submit) müsstest du die Validierung dann wannanders vornehmen, wo genau kann ich deinem Posting nicht entnehmen.

Bingo. eigentlich Ja/nein.

Es ist ganz einfach sich das bildlich vorzustellen.
Ich habe ein Formular.
dort wird beim Aufruf des Formulars nur eine Zeile mit mehreren Feldern geladen.
ein ID die am Anfang leer ist da sie später von der Datenbank die Datensatzid ist
und dann noch zwei andere ID's die mit in den Datensatz übertragen werden

jetzt kommen die ganzen Felder
Woche1, Wert1, Wert2, Wert3, Wert4, Wert5, Wert6, Wert7 und Wert8

Dann kommen zwei submit-buttons
<submit-plus> und <submit-fertig>

Beim Klick auf submit-plus sollen die felder Wert1 bis Wert8 ausgelesen werden und samt der ganzen ID's an Ajax übergeben werden.
Ajax speichert im Hintergrund den Datensatz ab.
Wenn der Datensatz abgespeichert wurde, werden die ersten Eingabefelder gesperrt.
Dann wird über Javascript und Ajax das Formular erweitert und sieht dann so aus

Woche1, Wert1-0, Wert2-0, Wert3-0, Wert4-0, Wert5-0, Wert6-0, Wert7-0 und Wert8-0
Woche2, Wert1-1, Wert2-1, Wert3-1, Wert4-1, Wert5-1, Wert6-1, Wert7-1 und Wert8-1

der user kann somit Woche für Woche bis zu n Wochen beliebig hinzufügen

Später habe ich dann alle werte die ich unter den ID's in der Datenbak finde in der Datenbank und zwar für n Wochen und kann sie je nach Bedarf aulesen.

Da ich nicht ständig das Formular nachladen und absenden will möchte ich das alles im Hintergrund laufen lassen

Da ich auch immer die gleichen Werte habe also Wert1 bis Wert8, jedoch zum, Beispiel für 10 Wochen muss ich ja jedesmal via javascript dei Wette aus diesen Feldern auslesen

Vielleicht kann man das auch noch einfacher machen denn so muss ich ja die feldnamen also name=Wert1-0 oder name= Wert1-7 immer zuvor als variabel generieren die auch von Ajax kommen damit dann javascript die Felder auch im Formular findet.

Ich könnte natürlich auf der Webseite ein Formular machen mit z.B. 20 Wochen
aber wie sieht das denn aus wenn der User eh nur 3 oder 7 oder max 10 Wochen eingibt.

Am besten du erklärst uns nochmal, was du bisher schon gebastelt hast und was dir noch fehlt und wo genau deine Schwierigkeiten liegen, sonst reden wir hier nur noch länger aneinander vorbei, und das ist vergeudete Energie.

Was ich bis dato mit Ajax gemacht habe.
Fast genau das wie oben.

Ich wähle auf einer Seite in einem Option-feld was aus und auf Grund der Auswahl wird dann eine Ajax-Aplikation gestartet die im Hintergrund ein Formular generiert was abhängig von der zuvor gewählten Auswahl sich aufbaut und dann auf der Webseite auftaucht.
Ohne neuem Laden der webseite . Funktioniert einwandfrei und ich bin schlichtweg begeistert was es heute für Programmiermöglichkeiten gibt
genial dieses Ajax-zeugs.

Ich bin halt so ein hobby-programmierer der alle Schaltjahre mal was bastelt und deshalb muss ich mich dan erst wieder reinfinden und die ganzen Jungs in den Foren nerven bis zum abwinken :(

Wurde das jetzt ein bisschen deutlicher was ich möchte.

ach ja...

wenn der user dann seinen letzten datensatz eingegeben hat kann er auf <submit-fertig> klicken und der letzte Datensatz wird noch in die DB geschrieben aber die komplette Eingabemaske verschwindet dann und es tauchen dann nur noch bestimmte Infos in einer Tabelle auf z.B. für welche Aktion er Werte bereits eingegeben hat und wieviel Wochen er davon abgespeichert hat.

Viele Grüße

Jürgen