Seite mit dynamischen Formular

Himhilion

Grünschnabel
Hallo,

Ich habe ein mehr oder weniger großes Problem mit dem nachladen von Daten.

Hier erst mal die Struktur:

"Was ist zu tun:" Dropdown (Aufgabe erstellen/Aufgabe bearbeiten/Aufgabe löschen) Button(OK)

// Nun, je nach dem was angewäht wurde soll folgendes erscheinen:

Aufgabe erstellen:

"Aufgabenname:" Eingabefeld
"Interner Bezeichner:" Eingabefeld
"Aufgabentext:" Großes Eingabefeld

"Musterlösung angeben?" Checkbox -> wenn aktiviert -> "Musterlösung" aktiv
"Musterlösung:" Großes Eingabefeld

"Schwierigkeitsgrad:" Dropdown(0,..,10; 0 Std)
"Empfohlene Punktzahl:" Eingabefeld (akzeptiert Zahlen von 0-100)

"Aufgabenart:" Dropdown (-> Werte die aus der Datenbank (db2) über eine Procedure geladen werden)
"Tag:" Dropdown(-> Werte die aus der Datenbank (db2) über eine Procedure geladen werden)

Button(Absenden)


hier ist, was ich bisher geschrieben habe.

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Assistent</title>
<script type="text/javascript">
//<![CDATA[	
	function UpdateMlForm() {
	document.form_2.ml.disabled = !document.form_2.ml_exist.checked;
	}
	
	function CheckInternalId(intId) {
	}

	function UpdateFormType(type) {
		var del;
		if (type[type.selectedIndex].value == "val1") {
			var fid2 = document.getElementById("form_2");

			var in1 = document.createElement("input");
			in1.setAttribute("type","text");
			in1.setAttribute("id","exersice_name");
			in1.setAttribute("name","Aufgabenname");
			fid2.appendChild(in1);
			
			var in2 = document.createElement("input");
			in2.setAttribute("type","text");
			in2.setAttribute("id","int_name");
			in2.setAttribute("name","Interne Bezeichnung");
			in2.setAttribute("onchange","CheckInternalId(this.form.int_name)");
			fid2.appendChild(in2);
			
			var in3 =document.createElement("input");
			in3.setAttribute("type","checkbox");
			in3.setAttribute("id","ml_exist");
			in3.setAttribute("name","Musterlösung angeben");
			in3.setAttribute("onclick","UpdateMlForm()");
			
	
		}
	}
    //]]>
</script>
</head>
<body>
<h1 style="text-align:center">Willkommen beim Aufgabenassistenten</h1>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div id="div_1">
<form id="form_1" action="">
	<div>Bitte wählen Sie:  &nbsp; &nbsp; &nbsp;
	<select id="form_type" name="form_type">
    	<option value="val1">Aufgabe erstellen</option>
        <option value="val2">Aufgabe bearbeiten</option>
        <option value="val3">Aufgabe löschen</option>
    </select>
    <input type="button" value="OK" onclick="UpdateFormType(this.form.form_type)"/>
    </div>
</form>
</div>
<form id="form_2" action="">
</form>
</body>
</html>

Jedoch habe ich derzeit ein weiteres Problem. JS kommt (so wie ich es als leihe kann) nicht mit Datenbankzugriffen klar. Gibt es da eine Möglichkeit Daten von der Datenbank zu holen?

Nun sind meine Probleme:

1. Wenn ich auf den "OK" Button drücke, kommen die neu eingefügten felder (Aufgabenname, Interne Bezeichnung etc ) erneut, was ich aber nicht will.
2. Der Zugriff auf die DB.:
Ich habe mir überlegt, eine Anfrage an eine PHP Datei zu stellen, die mir die gewünschten Daten ausgibt, aber wie mache ich dass dann und wie sieht es aus, wenn ich mehre ergebnisse bekomme (die ich dann z.b. wieder in Dropdown Menüs) nutzen kann.

LG Himhilion
 
Moin,


zu 1: du könntest bspw. den Button komplett entfernen, ihn seines onclick-Attributes berauben, oder in der Funktion prüfen, ob sie bereits einmal ausgeführt wurde.(z.B. durch Prüfung der Existenz der erzeugten Formularfelder)

zu 2: dafür nimmt man heutzutag einen XMLHttpRequest, gemeinhin als AJAX bekannt.
 
Zurück