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:
|
HTML Code
|
1
2
|
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">
|
|
|
JavaScript Code
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
/************************************************************************************************************
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
}
|
|
|
HTML Code
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
</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:
|
|
JavaScript Code
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
|
/* 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:
|
|
PHP Quellcode
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<?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:
|
|
PHP Quellcode
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
<?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.
Coder Forum »
Coding »
HTML, AJAX & Co »
Latest blogs:
Neuer EX4 Server, Java EE Summit im Juni in München, Kostenlos zur Cebit + Windows 8 Entwickler Schulung Quoted
Jetzt möchte ich aber, dass nach der Auswahl in Box 2 eine Reihe von Checkboxen erscheint, bzw. vorher vorhandene Checkboxen verschwinden.
Sortieren einer Tabelle per JS mit Daten aus MYSQL Datenbank
(Oct 29th 2010, 2:44pm)
