Dynamisches Formular - Chained Checkboxes

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Dynamisches Formular - Chained Checkboxes

    Moin moin,

    Vorweg: Ich bin in Javascript absoluter Anfänger und ich habe nicht einmal ein Referenzhandbuch da.

    Ihr alle kennt sicher miteinander verknüpfte Selectboxen... Die Auswahl eines Elements in Box 1 bestimmt, welche in Box 2 zur Auswahl stehen.

    Das habe ich auch (mit Hilfe von google->snippets) ganz gut hinbekommen.

    Meine Boxen lesen ihre Einträge aus ner MySQL-DB aus. (PHP)

    Jetzt möchte ich aber, dass nach der Auswahl in Box 2 eine Reihe von Checkboxen erscheint, bzw. vorher vorhandene Checkboxen verschwinden.

    Die jeweiligen Checkboxen sollen wiederum mit Name und ID in einer Datenbanktabelle stehen.

    Vielleicht kann mir jemand helfen. Ich habe zwar

    Hier der Code, den ich schon habe.

    start.php:

    Quellcode

    1. <script type="text/javascript" src="ajax.js"></script>
    2. <script type="text/javascript">

    Quellcode

    1. /************************************************************************************************************
    2. Ajax chained select
    3. Copyright (C) 2006 DTHMLGoodies.com, Alf Magne Kalleland
    5. This library is free software; you can redistribute it and/or
    6. modify it under the terms of the GNU Lesser General Public
    7. License as published by the Free Software Foundation; either
    8. version 2.1 of the License, or (at your option) any later version.
    10. This library is distributed in the hope that it will be useful,
    11. but WITHOUT ANY WARRANTY; without even the implied warranty of
    12. MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
    13. Lesser General Public License for more details.
    15. You should have received a copy of the GNU Lesser General Public
    16. License along with this library; if not, write to the Free Software
    17. Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
    19. Dhtmlgoodies.com., hereby disclaims all copyright interest in this script
    20. written by Alf Magne Kalleland.
    22. Alf Magne Kalleland, 2006
    23. Owner of DHTMLgoodies.com
    26. ************************************************************************************************************/
    27. var ajax = new Array();
    29. function getModelList(sel){
    30. var brand = sel.options[sel.selectedIndex].value;
    31. document.getElementById('model').options.length = 0; // Empty select box
    32. if(brand.length>0){
    33. var index = ajax.length;
    34. ajax[index] = new sack();
    36. ajax[index].requestFile = 'getModels.php?brand='+brand; // Specifying which file to get
    37. ajax[index].onCompletion = function(){ createModels(index) }; // Specify function that will be executed after file has been found
    38. ajax[index].runAJAX(); // Execute AJAX function
    39. }
    40. }
    41. function createModels(index){
    42. var obj = document.getElementById('model');
    43. eval(ajax[index].response); // Executing the response from Ajax as Javascript code
    44. }
    Alles anzeigen

    Quellcode

    1. </script>
    2. <form action="form.php" method="post" name="form" id="form" dir="ltr" lang="de">
    3. <fieldset><legend>Reperaturauftrag</legend>
    4. <p>
    5. <label>Wählen Sie Ihre Marke:</label><br />
    6. <select name="brand" id="brand" size="1" onchange="getModelList(this)" style="width:256px;">
    7. <?php include('getBrands.php'); ?>
    8. </select>
    9. </p>
    10. <p>
    11. <label>Wählen Sie Ihr Modell:</label><br />
    12. <select name="model" id="model" size="1" style="width:256px;">
    13. <? include('getModels.php'); ?>
    14. </select>
    15. </p>
    16. <p>
    17. <label>Was können wir für Sie tun?</label><br />
    18. <!--- Hier sollen die Checks hin! !--->
    19. </p>
    20. <p>
    21. <input type="submit" value=" Absenden ">
    22. <input type="reset" value=" Abbrechen">
    23. </p>
    24. </fieldset>
    25. </form>
    Alles anzeigen


    ajax.js:

    Quellcode

    1. /* Simple AJAX Code-Kit (SACK) v1.6.1 */
    2. /* ©2005 Gregory Wild-Smith */
    3. /* www.twilightuniverse.com */
    4. /* Software licenced under a modified X11 licence,
    5. see documentation or authors website for more details */
    7. function sack(file) {
    8. this.xmlhttp = null;
    10. this.resetData = function() {
    11. this.method = "POST";
    12. this.queryStringSeparator = "?";
    13. this.argumentSeparator = "&";
    14. this.URLString = "";
    15. this.encodeURIString = true;
    16. this.execute = false;
    17. this.element = null;
    18. this.elementObj = null;
    19. this.requestFile = file;
    20. this.vars = new Object();
    21. this.responseStatus = new Array(2);
    22. };
    24. this.resetFunctions = function() {
    25. this.onLoading = function() { };
    26. this.onLoaded = function() { };
    27. this.onInteractive = function() { };
    28. this.onCompletion = function() { };
    29. this.onError = function() { };
    30. this.onFail = function() { };
    31. };
    33. this.reset = function() {
    34. this.resetFunctions();
    35. this.resetData();
    36. };
    38. this.createAJAX = function() {
    39. try {
    40. this.xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    41. } catch (e1) {
    42. try {
    43. this.xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    44. } catch (e2) {
    45. this.xmlhttp = null;
    46. }
    47. }
    49. if (! this.xmlhttp) {
    50. if (typeof XMLHttpRequest != "undefined") {
    51. this.xmlhttp = new XMLHttpRequest();
    52. } else {
    53. this.failed = true;
    54. }
    55. }
    56. };
    58. this.setVar = function(name, value){
    59. this.vars[name] = Array(value, false);
    60. };
    62. this.encVar = function(name, value, returnvars) {
    63. if (true == returnvars) {
    64. return Array(encodeURIComponent(name), encodeURIComponent(value));
    65. } else {
    66. this.vars[encodeURIComponent(name)] = Array(encodeURIComponent(value), true);
    67. }
    68. }
    70. this.processURLString = function(string, encode) {
    71. encoded = encodeURIComponent(this.argumentSeparator);
    72. regexp = new RegExp(this.argumentSeparator + "|" + encoded);
    73. varArray = string.split(regexp);
    74. for (i = 0; i < varArray.length; i++){
    75. urlVars = varArray[i].split("=");
    76. if (true == encode){
    77. this.encVar(urlVars[0], urlVars[1]);
    78. } else {
    79. this.setVar(urlVars[0], urlVars[1]);
    80. }
    81. }
    82. }
    84. this.createURLString = function(urlstring) {
    85. if (this.encodeURIString && this.URLString.length) {
    86. this.processURLString(this.URLString, true);
    87. }
    89. if (urlstring) {
    90. if (this.URLString.length) {
    91. this.URLString += this.argumentSeparator + urlstring;
    92. } else {
    93. this.URLString = urlstring;
    94. }
    95. }
    97. // prevents caching of URLString
    98. this.setVar("rndval", new Date().getTime());
    100. urlstringtemp = new Array();
    101. for (key in this.vars) {
    102. if (false == this.vars[key][1] && true == this.encodeURIString) {
    103. encoded = this.encVar(key, this.vars[key][0], true);
    104. delete this.vars[key];
    105. this.vars[encoded[0]] = Array(encoded[1], true);
    106. key = encoded[0];
    107. }
    109. urlstringtemp[urlstringtemp.length] = key + "=" + this.vars[key][0];
    110. }
    111. if (urlstring){
    112. this.URLString += this.argumentSeparator + urlstringtemp.join(this.argumentSeparator);
    113. } else {
    114. this.URLString += urlstringtemp.join(this.argumentSeparator);
    115. }
    116. }
    118. this.runResponse = function() {
    119. eval(this.response);
    120. }
    122. this.runAJAX = function(urlstring) {
    123. if (this.failed) {
    124. this.onFail();
    125. } else {
    126. this.createURLString(urlstring);
    127. if (this.element) {
    128. this.elementObj = document.getElementById(this.element);
    129. }
    130. if (this.xmlhttp) {
    131. var self = this;
    132. if (this.method == "GET") {
    133. totalurlstring = this.requestFile + this.queryStringSeparator + this.URLString;
    134. this.xmlhttp.open(this.method, totalurlstring, true);
    135. } else {
    136. this.xmlhttp.open(this.method, this.requestFile, true);
    137. try {
    138. this.xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
    139. } catch (e) { }
    140. }
    142. this.xmlhttp.onreadystatechange = function() {
    143. switch (self.xmlhttp.readyState) {
    144. case 1:
    145. self.onLoading();
    146. break;
    147. case 2:
    148. self.onLoaded();
    149. break;
    150. case 3:
    151. self.onInteractive();
    152. break;
    153. case 4:
    154. self.response = self.xmlhttp.responseText;
    155. self.responseXML = self.xmlhttp.responseXML;
    156. self.responseStatus[0] = self.xmlhttp.status;
    157. self.responseStatus[1] = self.xmlhttp.statusText;
    159. if (self.execute) {
    160. self.runResponse();
    161. }
    163. if (self.elementObj) {
    164. elemNodeName = self.elementObj.nodeName;
    165. elemNodeName.toLowerCase();
    166. if (elemNodeName == "input"
    167. || elemNodeName == "select"
    168. || elemNodeName == "option"
    169. || elemNodeName == "textarea") {
    170. self.elementObj.value = self.response;
    171. } else {
    172. self.elementObj.innerHTML = self.response;
    173. }
    174. }
    175. if (self.responseStatus[0] == "200") {
    176. self.onCompletion();
    177. } else {
    178. self.onError();
    179. }
    181. self.URLString = "";
    182. break;
    183. }
    184. };
    186. this.xmlhttp.send(this.URLString);
    187. }
    188. }
    189. };
    191. this.reset();
    192. this.createAJAX();
    193. }
    Alles anzeigen



    getBrands.php:

    Quellcode

    1. <?php
    2. include('db_config.php');
    3. if (mysqli_connect_errno() == 0){
    4. $sql = 'SELECT `ID`, `name` FROM `brands`';
    5. $result = $db->query( $sql );
    6. while ($row = $result->fetch_object()){
    7. echo '<option value="'.$row->ID.'">'.$row->name.'</option>';
    8. }
    9. $result->close();
    10. }
    11. else
    12. {
    13. echo 'Die Datenbank konnte nicht erreicht werden. Folgender Fehler trat auf: <strong>'.mysqli_connect_errno().' : '.mysqli_connect_error().'</strong>';
    14. }
    15. $db->close();
    16. ?>
    Alles anzeigen


    getModels.php:

    Quellcode

    1. <?php
    3. if(isset($_GET['brand'])){
    5. include('db_config.php');
    6. if (mysqli_connect_errno() == 0){
    7. $sql = 'SELECT `ID`, `brandID`, `name` FROM `models` WHERE brandID="'.$_GET['brand'].'" ORDER BY `ID` DESC';
    8. $result = $db->query( $sql );
    9. while ($row = $result->fetch_object()){
    10. echo "obj.options[obj.options.length] = new Option('".$row->name."','".$row->ID."');\n";
    11. }
    12. $result->close();
    13. }
    14. else
    15. {
    16. echo 'Die Datenbank konnte nicht erreicht werden. Folgender Fehler trat auf: <strong>'.mysqli_connect_errno().' : '.mysqli_connect_error().'</strong>';
    17. }
    18. $db->close();
    21. } else {
    22. include('db_config.php');
    23. if (mysqli_connect_errno() == 0){
    24. $sql = 'SELECT `ID`, `brandID`, `name` FROM `models` WHERE brandID="1" ORDER BY `ID` DESC';
    25. $result = $db->query( $sql );
    26. while ($row = $result->fetch_object()){
    27. echo '<option value="'.$row->ID.'">'.$row->name.'</option>';
    28. }
    29. $result->close();
    30. }
    31. else
    32. {
    33. echo 'Die Datenbank konnte nicht erreicht werden. Folgender Fehler trat auf: <strong>'.mysqli_connect_errno().' : '.mysqli_connect_error().'</strong>';
    34. }
    35. $db->close();
    36. }
    38. ?>
    Alles anzeigen


    Die dbconfig.php geb ich mal nich raus. Versteht sich denk ich... DB läuft ja auch.

  • Ja, ungefähr. Nur eben, dass ich das schon habe. Was mir fehlt wäre eine Beschreibung, wie ich auf diese Art (also via onChange-Event je nach Auswahl in der letzten Selectbox) Checkboxen baue... Ich hab google schon gefragt, aber ich finde immer nur, wie man die stylet (was ich selbst kann) oder wie man die setzt bzw. cleart.

  • Jetzt möchte ich aber, dass nach der Auswahl in Box 2 eine Reihe von Checkboxen erscheint, bzw. vorher vorhandene Checkboxen verschwinden.

    Was mir fehlt wäre eine Beschreibung, wie ich auf diese Art (also via onChange-Event je nach Auswahl in der letzten Selectbox) Checkboxen baue...

    Mir ist leider immer noch nicht ganz klar, was dir fehlt.

    Du willst statt einer Auswahlliste Checkboxen haben? Checkboxen erlauben ja im Gegensatz zu radio und Select Formularen eine Mehrfachauswahl. Willst du das erreichen?

  • OK, dann beschreibe ich jetzt einfach mal mein Vorhaben im Detail.

    1.) Man wählt seine Handymarke
    2.) Man wählt sein Modell (wobei in der Selectbox nur die zur Marke gehörigen Modelle gezeigt werden...)
    3.) Man wählt aus verschiedenen Reperaturdienstleistungen aus. (Die wiederum vom Handy abhängen...) Hier soll Mehrfachwahl möglich sein.
    Zusätzlich kann man in ne Textbox Wünsche schreiben, die dann überprüft werden, aber das geht bei jeder Marke ist also statisch.

    Was ich will, ist dass eben je nach Marke und Modell nur bestimmte Checkboxen vorhanden sind. Deshalb müsste ich die über Javascript (oder PHP, wenn das möglich wäre) je nach Auswahl extra bauen.

  • Okay, das Ziel ist nun klar.

    Was hast du schon? Das solltest du mit den bisherigen Kenntnissen bauen können.

    Meilenstein 1
    Von der Handymarke kommst du zum Model, vom Model kommst du zu einer Auswahlliste von Reperaturdiensleistungen.

    Meilenstein 2
    Nun musst du im letzten Schritt die Select Options durch Input Checkboxen ersetzen. Am besten du platzierst für den Anfang irgendwo ein div mit einer id="auswahl"

    und deine PHP Datei macht dann folgendes

    Quellcode

    1. document.getElementById('auswahl').innerHTML += '<input type="checkbox" name="rep[]" value="hans" /> Hans<br/>';


    Meilenstein 3
    abrunden des ganzen.. div korrekt positionieren, etc

  • Danke, es läuft nun.

    Falls jmd mal mit dem selben Problem zu kämpfen hat, hier meine Lösung:
    index.php

    Quellcode

    1. <script type="text/javascript" src="ajax.js"></script>
    2. <script type="text/javascript">
    3. var ajax = new Array();
    4. function getModelList(sel){
    5. var brand = sel.options[sel.selectedIndex].value;
    6. document.getElementById('model').options.length = 0; // Empty select box
    7. if(brand.length>0){
    8. var index = ajax.length;
    9. ajax[index] = new sack();
    11. ajax[index].requestFile = 'getModels.php?brand='+brand; // Specifying which file to get
    12. ajax[index].onCompletion = function(){ createModels(index) }; // Specify function that will be executed after file has been found
    13. ajax[index].runAJAX(); // Execute AJAX function
    14. }
    15. }
    16. function createModels(index){
    17. var obj = document.getElementById('model');
    18. eval(ajax[index].response); // Executing the response from Ajax as Javascript code
    19. }
    20. function getRepairList(sel){
    21. var model = sel.options[sel.selectedIndex].value;
    22. document.getElementById('repairs').innerHTML = '';
    23. if(model.length>0){
    24. var index = ajax.length;
    25. ajax[index] = new sack();
    27. ajax[index].requestFile = 'getRepairs.php?model='+model; // Specifying which file to get
    28. ajax[index].onCompletion = function(){ createRepairs(index) }; // Specify function that will be executed after file has been found
    29. ajax[index].runAJAX(); // Execute AJAX function
    30. }
    31. }
    32. function createRepairs(index){
    33. var obj = document.getElementById('repairs');
    34. eval(ajax[index].response); // Executing the response from Ajax as Javascript code
    35. }
    36. </script>
    37. <form action="process.php" method="post" name="form" id="form" dir="ltr" lang="de">
    38. <fieldset><legend>Reperaturauftrag</legend>
    39. <p>
    40. <label>Wählen Sie Ihre Marke:</label><br />
    41. <select name="brand" id="brand" size="1" onChange="getModelList(this)" style="width:256px;">
    42. <? include('getBrands.php'); ?>
    43. </select>
    44. </p>
    45. <p>
    46. <label>Wählen Sie Ihr Modell:</label><br />
    47. <select name="model" id="model" size="1" onChange="getRepairList(this)" style="width:256px;">
    48. <? include('getModels.php'); ?>
    49. </select>
    50. </p>
    51. <p id="repairs">Das hier sollte onChange verschwinden!</p>
    52. <p>
    53. <input type="submit" value=" Absenden ">
    54. </p>
    55. </fieldset>
    56. </form>
    Alles anzeigen


    getRepairs.php

    Quellcode

    1. <?php
    2. if(isset($_GET['model'])){
    3. include('db_config.php');
    4. if (mysqli_connect_errno() == 0){
    5. $sql = 'SELECT `ID`, `modelID`, `name` FROM `repairs` WHERE modelID="'.$_GET['model'].'" ORDER BY `ID` DESC';
    6. $result = $db->query( $sql );
    7. while ($row = $result->fetch_object()){
    8. echo "obj.innerHTML += '<input type=\"checkbox\" value=\"".$row->ID."\" /> ".$row->name."<br />';\n";
    9. }
    10. $result->close();
    11. }
    12. else
    13. {
    14. echo 'Die Datenbank konnte nicht erreicht werden. Folgender Fehler trat auf: <strong>'.mysqli_connect_errno().' : '.mysqli_connect_error().'</strong>';
    15. }
    16. $db->close();
    17. }
    18. ?>
    Alles anzeigen


    ajax.js, getModels.php, getBrands.php aus vorigem Post übernehmen.

    Danke nochmal an d0nut.