dynamische Formular mit Php, Mysql und Javscript

ronny130286 · 29. Oktober 2006

Ich wollte mir formular erstellen mit dem ich daten in eine Datenbank eintragen kann, das Problem dabei ist in diesem Formular 2 DropDownMenüs gibt welche ihre inhalte aus einer datenbank bezieht.
Nun will ich das so machen das das 2 DropDownMenü dynamisch gestalte ist und diese nun unter der bedingung des 1st Menüs gehen.

So sollte es dann aussehen:
DropDownMenü 1: ließe daten aus datenbank und zeigt diese im menü an
DropDownMenü 2: soll nach dem selecten von DropDownMenü 1 auch daten auch aus der datenbank holen aber nur die die im DropDownMenü 1 begrenzt werden

im javascript ist das ja alles kein problem aber die wert in den tabellen sind halt variabel

hat da jemand ne idee wie man das realisieren könnt???

so sieht es im javascript aus:

Code:

<script language="JavaScript1.1" type="text/javascript"><!--
function update_auswahl()
 {
 var kategorieAuswahl = document.forms.verzeichnis.Fachbereich;
 var unterkategorieAuswahl = document.forms.verzeichnis.Vorlesung;
 unterkategorieAuswahl.options.length = 0; // DropDown Menü entleeren
 if (kategorieAuswahl.options[kategorieAuswahl.selectedIndex].value == "Informatik")
 {
 unterkategorieAuswahl.options[0] = new Option("Softwareentwicklung","Softwareentwicklung");
 unterkategorieAuswahl.options[1] = new Option("Programmierung","Programmierung");
 unterkategorieAuswahl.options[2] = new Option("Parallelverarbeitung","Parallelverarbeitung");
 enable();
 }
 else if (kategorieAuswahl.options[kategorieAuswahl.selectedIndex].value == "Mathematik")
 {
 unterkategorieAuswahl.options[0] = new Option("Numerik","Numerik");
 unterkategorieAuswahl.options[1] = new Option("Statistik","Statistik");
 unterkategorieAuswahl.options[2] = new Option("Algebra","Algebra");
 enable();
 }
 else if (kategorieAuswahl.options[kategorieAuswahl.selectedIndex].value == "Betriebswirtschaft")
 {
 unterkategorieAuswahl.options[0] = new Option("Betriebswirtschaftslehre","Betriebswirtschaftslehre");
 unterkategorieAuswahl.options[1] = new Option("Volkswirtschaftslehre","Volkswirtschaftslehre");
 unterkategorieAuswahl.options[2] = new Option("Personalwesen","Personalwesen");
 enable();
 }
 else if (kategorieAuswahl.options[kategorieAuswahl.selectedIndex].value == "default")
 {
 disable();
 }
 }


function enable()
 {
 if (document.all || document.getElementById)
 {
 if (document.verzeichnis.Vorlesung.disabled == true)
 {
 document.verzeichnis.Vorlesung.disabled = false;
 document.verzeichnis.Submit.disabled = false;
 }
 }
 }


function disable()
 {
 if (document.all || document.getElementById)
 {
 if (document.verzeichnis.Vorlesung.disabled == false)
 {
 document.verzeichnis.Vorlesung.disabled=true;
 }
 }
 }


function callPage()
 {
 var unterkategorieAuswahl = document.forms.verzeichnis.Vorlesung;
 location.href = "../vorlesungen/" + unterkategorieAuswahl.options[unterkategorieAuswahl.selectedIndex].value + ".html";
 }
// -->
</script>


<b>Vervollständigen Sie bitte untenstehendes Formular:</b>
<form name="verzeichnis" method="post" action="javascript:callPage();" onsubmit="javascript:message();">
 <table summary="">
 <tr>
 <td><label for="Fachbereich">Fachbereich</label>:</td>
 <td>
 <select size="1" name="Fachbereich" onchange="update_auswahl();" id="Fachbereich">
 <option value="default" selected="selected">Bitte Fachbereich auswählen</option>
 <option value="Informatik">Informatik</option>
 <option value="Mathematik">Mathematik</option>
 <option value="Betriebswirtschaft">Betriebswirtschaft</option>
 </select>
 </td>
 </tr>
 <tr>
 <td><label for="Vorlesung">Vorlesung</label>:</td>
 <td>
 <select size="1" name="Vorlesung" id="Vorlesung" disabled="disabled">
 <option selected="selected">Softwareentwicklung</option>
 <option>Programmierung</option>
 <option>Parallelverarbeitung</option>
 </select>
 </td>
 </tr>
 <tr>
 <td><br/></td>
 </tr>
 <tr>
 <td><label for="Anrede">Anrede</label>:</td>
 <td>
 <select size="1" name="Anrede" onchange="update_auswahl()" id="Anrede">
 <option value="Herr" selected="selected">Herr</option>
 <option value="Frau">Frau</option>
 </select>
 </td>
 </tr>
 <tr>
 <td><label for="Vorname">Vorname</label>:</td>
 <td><input name="Vorname" id="Vorname" value="Ihr Vorname" onfocus="this.value='';" /></td>
 </tr>
 <tr>
 <td><label for="Nachname">Nachname</label>:</td>
 <td><input name="Nachname" id="Nachname" value="Ihr Nachname" onfocus="this.value='';" /></td>
 </tr>
 <tr>
 <td><label for="Mitteilung">Mitteilung</label>:</td>
 <td><textarea name="Mitteilung" id="Mitteilung" cols="35" rows="5">Ihre Mitteilung</textarea></td>
 </tr>
 <tr>
 <td></td>
 <td><input type="submit" name="Submit" id="Submit" value="Abschicken" disabled="disabled" /></td>
 </tr>
 </table>
</form>

und genauso soll das auch gehen nur halt das die variablen aus einer mysql tabelle benutze werden sollen

Anzeige

schiene · 29. Oktober 2006

AW: dynamische Formular mit Php, Mysql und Javscript

moin!
also wenn ich das richtig verstehe ist dein problem die daten ohne nachladen aus der mysql auszulesen oder?
also unter der vorraussetzung, dass ich das richtig verstanden habe.. dann ist ajax dein freund musste mal bei wikipedia gucken da sind gute tuts verlinkt

greetz schiene

ronny130286 · 29. Oktober 2006

AW: dynamische Formular mit Php, Mysql und Javscript

ja genauso meine ich das (ohne neuladen) aber kannst mir da tut seiten empfehlen weil um erlich zu sein höre ich ajax jetzt das erste mal

schiene · 29. Oktober 2006

AW: dynamische Formular mit Php, Mysql und Javscript

also kannste dir hier erstmal durchlesen wikipedia was ajax überhaupt ist und wo es ansetzt
http://de.wikipedia.org/wiki/Ajax_(Programmierung)
kurz gesagt ist ajax eine verbindung zwischen javascript und php. Ajax ermöglicht dir von javascript aus eine php datei aufzurufen.
hier kannste dich ein bisschen mit tut's schlau machen.. also ich hab mal das Chat Tut genommen und daran erkennt man sofort eigentlich wie ajax arbeitet. ist zwar alles auf englisch aber.. wirst du schon durchblicken

http://ajaxpatterns.org/

http://ajaxpatterns.org/Examples

~ Die Seite scheint gerade irgendwelche mysql probleme zu haben, aber auf ihr lassen sich eigentlich schöne beispiele finden..

Kolazomai · 29. Oktober 2006

AW: dynamische Formular mit Php, Mysql und Javscript

~moved~

Mfg,

Kolazomai

ronny130286 · 29. Oktober 2006

AW: dynamische Formular mit Php, Mysql und Javscript

schade das die seite nicht geht

momentan habe ich das nur mit php programmiert aber da ist es jetzt halt so das egal was ich im 1sten Menü selecte wir im 2ten immer alles angezeit und der soll aber um missverständnisse auszuschließen nur das anzeigen was im ersten begrenzt wird, weil man ja auch in dem script mehr hinzufügen kann zu jedem einzelnen was halt im menü 1 angezeigt wir

ich habe auch schon in inet as gefunden das das angeblich auch mit php reinweg gehen soll aber das ist so umständlich das ich das erst garnet versucht habe

mein erster gedanke was das ich es einfach über eine variabel mache und das im php so durch schleife , aber dann würde mir ja der refresh fehlen und es passiert nix

gibt es noch ne alterative zu der seite???

das bescheftigt mich heute schon denn ganzen tag
ich könnte es ja auch im javascript machen aber dann muss ich ja immer wenn was neue hinzukommt das wieder im code ändern (mit java script geht es einwandfrei)

Schmitz · 29. Oktober 2006

AW: dynamische Formular mit Php, Mysql und Javscript

wenn du JS und PHP kannst, könnte ich dir dieses script von mir anbieten ^^
ist aus einem angefangenen onlinegame

Code:

function res_go1 (kind) 
 { 
 http_request = false; 
 if (window.XMLHttpRequest) 
 { // Mozilla, Safari,... 
 http_request = new XMLHttpRequest(); 
 if (http_request.overrideMimeType) 
 { 
 http_request.overrideMimeType('text/text'); 
 } 
 } 
 else if (window.ActiveXObject) { // IE 
 try { 
 http_request = new ActiveXObject("Msxml2.XMLHTTP"); 
 } catch (e) { 
 try { 
 http_request = new ActiveXObject("Microsoft.XMLHTTP"); 
 } catch (e) {} 
 } 
 } 
 if (!http_request) { 
 return false; 
 } 
 param = "ajax=go"; 
 http_request.onreadystatechange = res_go2; 
 http_request.open('POST', './res.php?kind='+kind, true); 
 http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
 http_request.setRequestHeader("Content-length", param.length); 
 http_request.setRequestHeader("Connection", "close"); 
 http_request.send(param); 
 } 
 function res_go2 () 
 { 
 if (http_request.readyState == 4) 
 { 
 if (http_request.status == 200) 
 { 
 if (http_request.responseText.substr(0, 2) == "OK") 
 { 
 var splitted = parse_headers (http_request.responseText.substr(2)); 
 document.getElementById('box_res').innerHTML = splitted[2]; 
 countdowntime = splitted[0][0]; 
 res_kind = splitted[0][1]; 
 res_countdown(); 
 CountdownSchleife = window.setInterval ("res_countdown();", 1000); 
 } 
 else 
 { 
 alert ("Ein Fehler ist aufgetreten!\nWahrscheinlich bist du schon unterwegs."); 
 } 
 } 
 } 
 }

musste halt selber verstehen und bearbeiten

ronny130286 · 29. Oktober 2006

AW: dynamische Formular mit Php, Mysql und Javscript

nice thx ich werde das mal versuchen

the_player · 30. Oktober 2006

AW: dynamische Formular mit Php, Mysql und Javscript

Hey Ronny,

da php serverseitig läuft und javascript clientseitig kannst du eine Kommunikation zwischen den beiden Sprachen und auch das mit den Variablen vergessen. Ohne Ajax gibt es 2 Möglichkeiten, wie du es realisieren kannst:

1. bei dem Aufruf der ersten Box alle vom User vorgenommenen Eingaben zwischenspeichern und die Seite neu aufrufen. Dann kannst du per php die 2. Auswahlbox aus der Datenbank füllen und die restlichen Werte mit denen aus den gespeicherten Variablen. Aber erstens ein wenig aufwändig und zweitens läd die ganze Seite neu.

2. du bettest javascript in deinen php-Code ein. Das heißt:
- Datensätze für die erste Auswahlbox laden
- Datensätze mit foreach o.ä. durchlaufen. Pro Schleifeerzeugst du ein neues Javascript-Array (oder besser benutzt du ein zweidimensionales Array)
- Diese Javascript-Arrays kannst du dann dynamisch aufrufen.

Allerdings sollten es nicht tausende von Daten sein und sie erscheinen halt alle im Quellcode, wenn den jemand anzeigen will.

Wenn du mit dieser "Anleitung" nicht zurechtgekommen bist einfach nochmal nachfragen ;-)

The_player

ronny130286 · 30. Oktober 2006

AW: dynamische Formular mit Php, Mysql und Javscript

@player
ich weis nicht ob ich da jetzt ein problem entdeckt habe aber bei der version mit dem javascript im php einbetten:
da begrenzt er ja nich das 2 menü weil dann muss er ja von ersten bekommen mit einer $_Post [] variablen was aber heisen würde das es neu läde oder sehe ich das falsch???

ich hätte das dann doch schon gern über ajax gemacht (ist sicher) aber ich kann im inet eine guten tut´s finden hast du da vielleicht noch welche??

Schmitz · 30. Oktober 2006

AW: dynamische Formular mit Php, Mysql und Javscript

dann benutz doch mein script
dann gibst du mit PHP einfach nen JS-Code code aus, in dem die neunen variabeln definiert werden, machst einmal eval (http_request.responseText); und gehst mit ner schleife durch und addest alle variabeln

the_player · 30. Oktober 2006

AW: dynamische Formular mit Php, Mysql und Javscript

hab mir deines Problems jetzt mal genau angenommen und hab es dir umgeschrieben. Wenn du den mysql-dump noch willst, auch kein Thema, aber die DB hast du ja wahrscheinlich schon...

Code:

<script language="JavaScript1.1" type="text/javascript">
function update_auswahl()
 {
 var kategorieAuswahl = document.forms.verzeichnis.Fachbereich;
 var unterkategorieAuswahl = document.forms.verzeichnis.Vorlesung;
 unterkategorieAuswahl.options.length = 0; // DropDown Menü entleeren
 for (var i = 0; i < vorlesung[kategorieAuswahl.selectedIndex].length; i++){
 unterkategorieAuswahl.options[i] = new Option(vorlesung[kategorieAuswahl.selectedIndex][i], vorlesung[kategorieAuswahl.selectedIndex][i]);
 }
 enable();
 }


function enable()
 {
 if (document.all || document.getElementById)
 {
 if (document.verzeichnis.Vorlesung.disabled == true)
 {
 document.verzeichnis.Vorlesung.disabled = false;
 document.verzeichnis.Submit.disabled = false;
 }
 }
 }



function callPage()
 {
 var unterkategorieAuswahl = document.forms.verzeichnis.Vorlesung;
 location.href = "../vorlesungen/" + unterkategorieAuswahl.options[unterkategorieAuswahl.selectedIndex].value + ".html";
 }

</script>


<b>Vervollständigen Sie bitte untenstehendes Formular:</b>
<form name="verzeichnis" method="post" action="javascript:callPage();" onsubmit="javascript:message();">
<?
$fachbereich = 0;
$vorlesung = 0;
$verbindung = mysql_connect("localhost", "root");
$abfrage = "select * from vorlesung order by fach_id";
$erg = mysql_db_query("rr", $abfrage, $verbindung);
echo "<script language='JavaScript1.1' type='text/javascript'>";
echo "vorlesung = new Array();";
 while ($arr = mysql_fetch_row($erg)){
 if ($fachbereich < $arr[2]){
 echo "vorlesung[".$arr[2]."] = new Array();";
 $vorlesung = 0;
 $fachbereich = $arr[2];
 }
 echo "vorlesung[".$fachbereich."][".$vorlesung."] = '".$arr[1]."';";

 $vorlesung++;
 }
echo "</script>";
 ?>


 <table summary="">
 <tr>
 <td><label for="Fachbereich">Fachbereich</label>:</td>
 <td>
 <select size="1" name="Fachbereich" onchange="update_auswahl();" id="Fachbereich">
 <option value="default" selected="selected">Bitte Fachbereich auswählen</option>
 <?

 $abfrage = "select * from fachbereich";
 $erg = mysql_db_query("rr", $abfrage, $verbindung);
 echo $erg;
 while ($arr = mysql_fetch_row($erg)){
 echo "<option value='".$arr[0]."'>".$arr[1]."</option>";
 }
 ?>
 </select>
 </td>
 </tr>
 <tr>
 <td><label for="Vorlesung">Vorlesung</label>:</td>
 <td>
 <select size="1" name="Vorlesung" id="Vorlesung" disabled="disabled">
 <option selected="selected">Softwareentwicklung</option>
 <option>Programmierung</option>
 <option>Parallelverarbeitung</option>
 </select>
 </td>
 </tr>
 <tr>
 <td><br/></td>
 </tr>
 <tr>
 <td><label for="Anrede">Anrede</label>:</td>
 <td>
 <select size="1" name="Anrede" onchange="update_auswahl()" id="Anrede">
 <option value="Herr" selected="selected">Herr</option>
 <option value="Frau">Frau</option>
 </select>
 </td>
 </tr>
 <tr>
 <td><label for="Vorname">Vorname</label>:</td>
 <td><input name="Vorname" id="Vorname" value="Ihr Vorname" onfocus="this.value='';" /></td>
 </tr>
 <tr>
 <td><label for="Nachname">Nachname</label>:</td>
 <td><input name="Nachname" id="Nachname" value="Ihr Nachname" onfocus="this.value='';" /></td>
 </tr>
 <tr>
 <td><label for="Mitteilung">Mitteilung</label>:</td>
 <td><textarea name="Mitteilung" id="Mitteilung" cols="35" rows="5">Ihre Mitteilung</textarea></td>
 </tr>
 <tr>
 <td></td>
 <td><input type="submit" name="Submit" id="Submit" value="Abschicken" disabled="disabled" /></td>
 </tr>
 </table>
</form>

Ich hoffe, dass dir das hilft ;-)

ronny130286 · 1. November 2006

AW: dynamische Formular mit Php, Mysql und Javscript

also geholfen hat es mir sehr nur jetzt ist das problem das er mir beim immer nur eine vorlesung im 2ten menü ausgibt und komischer weise nimmt er auch immer nur die letzte

????

Nützliche Suchen

dynamische Formular mit Php, Mysql und Javscript

Videos zum Themenbereich