✔ Dynamisches Formular-Verhalten

G

GottiRhg

Mitglied
Hallo zusammen,
ich weiß nicht so recht in welches Forum ich diese Frage packen soll.
Daher bitte ich davon abzusehen, ob es hier vielleicht falsch platziert ist.

Folgendes Problem:
Ich habe auf meiner PHP-Seite ein Formular eingebunden.
Nun soll der User die Möglichkeit haben, neben den Pflichfeldern, n-beliebige Felder einzugeben. Sprich: Klickt der User auf einen Link wie z.B. "Wert einfügen" so muss ein weiteres Input-Feld eingeblendet werden, wo der User diesen Wert eintragen kann.

Konkret zum Thema bezogen sieht es bei mir so aus:
Es handelt sich hierbei um die Eingabe von Spielberichten zu Fußballspielen.
Ein paar grundlegende Felder sind eingeblendet. Nun kommen aber Sachen hinzu wie:
Tore, Auswechselungen, Karten etc.
Da hier die Anzahl stark abweichen kann, muss das ganze irgendwie dynamisch laufen.

Freue mich über Ideen & Vorschläge und sage natürlich auch schonmal im voraus DANKE!
 
Dies lässt sich sehr einfach per JavaScript lösen:
http://de.selfhtml.org/javascript/objekte/node.htm#append_child

Zu dem Formular werden weitere Child-Nodes (in deinem Fall: input) hinzugefügt.

Es geht auch per PHP, wobei so die Seite ständig neu laden würde. In einer Schleife einfach n Felder anzeigen und ein Klick auf "Weiter" oder "Mehr" erhöht die Anzahl (evtl. per Query in der URL / $_GET).

Beides solltest du umsetzen, wenn es für Besucher gedacht ist. Die JavaScript Lösung mindert den Traffic und die PHP-Lösung ist für alle die kein JS aktiviert haben.
 
Hallo!

Irgendwie hatten wir das Thema vor garnicht so langer Zeit.
Ich bin mir jetzt aber nicht sicher ob es hier oder im JavaScript Forum war (evtl. wurde es ja auch verschoben).

Gruss Dr Dau
 
Nun stellt sich mir noch folgendes Problem.
Ich habe nun einen netten DIV-Container etc. per JavaScript eingefügt.
Klappt alles einwandfrei.
In dem Container soll eine SELECT-Auswahl sein (Auswahl von Usern aus Datenbank).
Diese muss aus einer Datenbankabfrage generiert werden.
Gibt es hierfür auch eine Möglichkeit?
 
Prima,
das hat mir auch geholfen :)
Klappt "fast" super...

Im Firefox ist alles bestens.

Im IE bekomm ich folgenden Fehler:
Fehler: 'document.getElementById(....)' ist Null oder kein Objekt

Meine Code-Ausschnitte:
HTML
Code: 
<form ...>
<input id="add_matchreport_count_statistics" name="add_matchreport_count_statistics" type="hidden" value="16" />
- Formularelemente -
<a class="content" onclick="javascript:addStatistic(1)">Spielereignis hinzufügen</a>
</form>

javascript
Code: 
<script type="text/javascript">
function addStatistic(Index){
	// Anzahl bisheriger Spielstatistiken
	var index = document.getElementById("add_matchreport_count_statistics").value;
    
    // Zähler um 1 erhöhen
   	var indexNext = parseInt(index) + 1;	
			
	// Zähler an Formular zurückgeben
   	document.getElementById("add_matchreport_count_statistics").setAttribute("value", indexNext);
   
	// XMLHttpRequest erzeugen
	var http = null;
	http = new XMLHttpRequest();
	
	if (http != null) {
		http.open("GET", "test.php?id="+indexNext, true);
		http.onreadystatechange = ausgabe;
		http.send(null);
	}
		
	// Erzeugtes Formular aufrufen
	function ausgabe(){
		if (http.readyState == 4) {
			document.getElementById('add_matchreport_statistic'+indexNext).innerHTML = http.responseText;
   		}	
	}   
   
    // Neue Tabellenzeile einfügen
  	var TR = document.getElementById("add_matchreport_table").insertRow(indexNext);

	// Neue Tabellenspalte mit colspan = 2 einfügen
  	var TD = document.createElement("td");
  	TD.setAttribute("colspan","2");
  	
  	// Neuen DIV-Container einfügen
  	var TDDIV = document.createElement('div');
  	TDDIV.id = 'add_matchreport_statistic'+indexNext;
  	TDDIV.innerHTML = http.responseText;
 	
 	// Child-Knoten der Reihe nach einfügen
	TD.appendChild(TDDIV);
	TR.appendChild(TD);			
}
</script>

In der test.php gibt es einen DIV-Container mit einem einfachen Text. Mehr nicht.

Hat wer eine Idee woran es liegen könnte?
 
Hmm geht leider auch nicht.
Dann bekomm ich sogar im Firefox keine neue Zeile mehr...

Code: 
<script type="text/javascript">
function addStatistic(Index){
	// Anzahl bisheriger Spielstatistiken
	var index = document.getElementById("add_matchreport_count_statistics").value;
    
    // Zähler um 1 erhöhen
   	var indexNext = parseInt(index) + 1;	
			
	// Zähler an Formular zurückgeben
   	document.getElementById("add_matchreport_count_statistics").setAttribute("value", indexNext);  
   
    // Neue Tabellenzeile einfügen
  	var TR = document.getElementById("add_matchreport_table").insertRow(indexNext);

	// Neue Tabellenspalte mit colspan = 2 einfügen
  	var TD = document.createElement("td");
  	TD.setAttribute("colspan","2");
  	
  	// Neuen DIV-Container einfügen
  	var TDDIV = document.createElement('div');
  	TDDIV.id = 'add_matchreport_statistic'+indexNext;
  	TDDIV.innerHTML = http.responseText;
 	
 	// Child-Knoten der Reihe nach einfügen
	TD.appendChild(TDDIV);
	TR.appendChild(TD);	
	
	// XMLHttpRequest erzeugen
	var http = null;
	http = new XMLHttpRequest();
	
	if (http != null) {
		http.open("GET", "action_admin_matches_statistic.inc.php?id="+indexNext, true);
		http.onreadystatechange = ausgabe;
		http.send(null);
	}
		
	// Erzeugtes Formular aufrufen
	function ausgabe(){
		if (http.readyState == 4) {
			document.getElementById('add_matchreport_statistic'+indexNext).innerHTML = http.responseText;
   		}	
	} 			
}
</script>
 
Hi,

Du weist da ja auch einen http.responseText zu, wo noch gar kein http-Objekt existiert.

GottiRhg hat gesagt.:
Code: 
<script type="text/javascript">
   /* schnipp */
  	TDDIV.id = 'add_matchreport_statistic'+indexNext;
  	TDDIV.innerHTML = http.responseText;
 	
 	// Child-Knoten der Reihe nach einfügen
   /* schnapp */
</script>
Zum Vergrößern anklicken....

Was soll das an der Stelle überhaupt? Das wird doch in Deinem readyState-Handler ausgabe() gefüllt.

Installier Dir mal Firebug...

LG
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück