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:
Alles anzeigen
Alles anzeigen
ajax.js:
Alles anzeigen
getBrands.php:
Alles anzeigen
getModels.php:
Alles anzeigen
Die dbconfig.php geb ich mal nich raus. Versteht sich denk ich... DB läuft ja auch.
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
- /************************************************************************************************************
- Ajax chained select
- Copyright (C) 2006 DTHMLGoodies.com, Alf Magne Kalleland
- This library is free software; you can redistribute it and/or
- modify it under the terms of the GNU Lesser General Public
- License as published by the Free Software Foundation; either
- version 2.1 of the License, or (at your option) any later version.
- This library is distributed in the hope that it will be useful,
- but WITHOUT ANY WARRANTY; without even the implied warranty of
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
- Lesser General Public License for more details.
- You should have received a copy of the GNU Lesser General Public
- License along with this library; if not, write to the Free Software
- Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
- Dhtmlgoodies.com., hereby disclaims all copyright interest in this script
- written by Alf Magne Kalleland.
- Alf Magne Kalleland, 2006
- Owner of DHTMLgoodies.com
- ************************************************************************************************************/
- var ajax = new Array();
- function getModelList(sel){
- var brand = sel.options[sel.selectedIndex].value;
- document.getElementById('model').options.length = 0; // Empty select box
- if(brand.length>0){
- var index = ajax.length;
- ajax[index] = new sack();
- ajax[index].requestFile = 'getModels.php?brand='+brand; // Specifying which file to get
- ajax[index].onCompletion = function(){ createModels(index) }; // Specify function that will be executed after file has been found
- ajax[index].runAJAX(); // Execute AJAX function
- }
- }
- function createModels(index){
- var obj = document.getElementById('model');
- eval(ajax[index].response); // Executing the response from Ajax as Javascript code
- }
Quellcode
- </script>
- <form action="form.php" method="post" name="form" id="form" dir="ltr" lang="de">
- <fieldset><legend>Reperaturauftrag</legend>
- <p>
- <label>Wählen Sie Ihre Marke:</label><br />
- <select name="brand" id="brand" size="1" onchange="getModelList(this)" style="width:256px;">
- <?php include('getBrands.php'); ?>
- </select>
- </p>
- <p>
- <label>Wählen Sie Ihr Modell:</label><br />
- <select name="model" id="model" size="1" style="width:256px;">
- <? include('getModels.php'); ?>
- </select>
- </p>
- <p>
- <label>Was können wir für Sie tun?</label><br />
- <!--- Hier sollen die Checks hin! !--->
- </p>
- <p>
- <input type="submit" value=" Absenden ">
- <input type="reset" value=" Abbrechen">
- </p>
- </fieldset>
- </form>
ajax.js:
Quellcode
- /* Simple AJAX Code-Kit (SACK) v1.6.1 */
- /* ©2005 Gregory Wild-Smith */
- /* www.twilightuniverse.com */
- /* Software licenced under a modified X11 licence,
- see documentation or authors website for more details */
- function sack(file) {
- this.xmlhttp = null;
- this.resetData = function() {
- this.method = "POST";
- this.queryStringSeparator = "?";
- this.argumentSeparator = "&";
- this.URLString = "";
- this.encodeURIString = true;
- this.execute = false;
- this.element = null;
- this.elementObj = null;
- this.requestFile = file;
- this.vars = new Object();
- this.responseStatus = new Array(2);
- };
- this.resetFunctions = function() {
- this.onLoading = function() { };
- this.onLoaded = function() { };
- this.onInteractive = function() { };
- this.onCompletion = function() { };
- this.onError = function() { };
- this.onFail = function() { };
- };
- this.reset = function() {
- this.resetFunctions();
- this.resetData();
- };
- this.createAJAX = function() {
- try {
- this.xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
- } catch (e1) {
- try {
- this.xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
- } catch (e2) {
- this.xmlhttp = null;
- }
- }
- if (! this.xmlhttp) {
- if (typeof XMLHttpRequest != "undefined") {
- this.xmlhttp = new XMLHttpRequest();
- } else {
- this.failed = true;
- }
- }
- };
- this.setVar = function(name, value){
- this.vars[name] = Array(value, false);
- };
- this.encVar = function(name, value, returnvars) {
- if (true == returnvars) {
- return Array(encodeURIComponent(name), encodeURIComponent(value));
- } else {
- this.vars[encodeURIComponent(name)] = Array(encodeURIComponent(value), true);
- }
- }
- this.processURLString = function(string, encode) {
- encoded = encodeURIComponent(this.argumentSeparator);
- regexp = new RegExp(this.argumentSeparator + "|" + encoded);
- varArray = string.split(regexp);
- for (i = 0; i < varArray.length; i++){
- urlVars = varArray[i].split("=");
- if (true == encode){
- this.encVar(urlVars[0], urlVars[1]);
- } else {
- this.setVar(urlVars[0], urlVars[1]);
- }
- }
- }
- this.createURLString = function(urlstring) {
- if (this.encodeURIString && this.URLString.length) {
- this.processURLString(this.URLString, true);
- }
- if (urlstring) {
- if (this.URLString.length) {
- this.URLString += this.argumentSeparator + urlstring;
- } else {
- this.URLString = urlstring;
- }
- }
- // prevents caching of URLString
- this.setVar("rndval", new Date().getTime());
- urlstringtemp = new Array();
- for (key in this.vars) {
- if (false == this.vars[key][1] && true == this.encodeURIString) {
- encoded = this.encVar(key, this.vars[key][0], true);
- delete this.vars[key];
- this.vars[encoded[0]] = Array(encoded[1], true);
- key = encoded[0];
- }
- urlstringtemp[urlstringtemp.length] = key + "=" + this.vars[key][0];
- }
- if (urlstring){
- this.URLString += this.argumentSeparator + urlstringtemp.join(this.argumentSeparator);
- } else {
- this.URLString += urlstringtemp.join(this.argumentSeparator);
- }
- }
- this.runResponse = function() {
- eval(this.response);
- }
- this.runAJAX = function(urlstring) {
- if (this.failed) {
- this.onFail();
- } else {
- this.createURLString(urlstring);
- if (this.element) {
- this.elementObj = document.getElementById(this.element);
- }
- if (this.xmlhttp) {
- var self = this;
- if (this.method == "GET") {
- totalurlstring = this.requestFile + this.queryStringSeparator + this.URLString;
- this.xmlhttp.open(this.method, totalurlstring, true);
- } else {
- this.xmlhttp.open(this.method, this.requestFile, true);
- try {
- this.xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
- } catch (e) { }
- }
- this.xmlhttp.onreadystatechange = function() {
- switch (self.xmlhttp.readyState) {
- case 1:
- self.onLoading();
- break;
- case 2:
- self.onLoaded();
- break;
- case 3:
- self.onInteractive();
- break;
- case 4:
- self.response = self.xmlhttp.responseText;
- self.responseXML = self.xmlhttp.responseXML;
- self.responseStatus[0] = self.xmlhttp.status;
- self.responseStatus[1] = self.xmlhttp.statusText;
- if (self.execute) {
- self.runResponse();
- }
- if (self.elementObj) {
- elemNodeName = self.elementObj.nodeName;
- elemNodeName.toLowerCase();
- if (elemNodeName == "input"
- || elemNodeName == "select"
- || elemNodeName == "option"
- || elemNodeName == "textarea") {
- self.elementObj.value = self.response;
- } else {
- self.elementObj.innerHTML = self.response;
- }
- }
- if (self.responseStatus[0] == "200") {
- self.onCompletion();
- } else {
- self.onError();
- }
- self.URLString = "";
- break;
- }
- };
- this.xmlhttp.send(this.URLString);
- }
- }
- };
- this.reset();
- this.createAJAX();
- }
getBrands.php:
Quellcode
- <?php
- include('db_config.php');
- if (mysqli_connect_errno() == 0){
- $sql = 'SELECT `ID`, `name` FROM `brands`';
- $result = $db->query( $sql );
- while ($row = $result->fetch_object()){
- echo '<option value="'.$row->ID.'">'.$row->name.'</option>';
- }
- $result->close();
- }
- else
- {
- echo 'Die Datenbank konnte nicht erreicht werden. Folgender Fehler trat auf: <strong>'.mysqli_connect_errno().' : '.mysqli_connect_error().'</strong>';
- }
- $db->close();
- ?>
getModels.php:
Quellcode
- <?php
- if(isset($_GET['brand'])){
- include('db_config.php');
- if (mysqli_connect_errno() == 0){
- $sql = 'SELECT `ID`, `brandID`, `name` FROM `models` WHERE brandID="'.$_GET['brand'].'" ORDER BY `ID` DESC';
- $result = $db->query( $sql );
- while ($row = $result->fetch_object()){
- echo "obj.options[obj.options.length] = new Option('".$row->name."','".$row->ID."');\n";
- }
- $result->close();
- }
- else
- {
- echo 'Die Datenbank konnte nicht erreicht werden. Folgender Fehler trat auf: <strong>'.mysqli_connect_errno().' : '.mysqli_connect_error().'</strong>';
- }
- $db->close();
- } else {
- include('db_config.php');
- if (mysqli_connect_errno() == 0){
- $sql = 'SELECT `ID`, `brandID`, `name` FROM `models` WHERE brandID="1" ORDER BY `ID` DESC';
- $result = $db->query( $sql );
- while ($row = $result->fetch_object()){
- echo '<option value="'.$row->ID.'">'.$row->name.'</option>';
- }
- $result->close();
- }
- else
- {
- echo 'Die Datenbank konnte nicht erreicht werden. Folgender Fehler trat auf: <strong>'.mysqli_connect_errno().' : '.mysqli_connect_error().'</strong>';
- }
- $db->close();
- }
- ?>
Die dbconfig.php geb ich mal nich raus. Versteht sich denk ich... DB läuft ja auch.