Tijden veranderen
Variabele Ajax dubbele dropdownbox doorsturen
Ik had op internet het volgende script gevonden, welke 2 dropboxen geeft. Hierbij zijn de waardes van de 2de dropbox afhankelijk van wat er bij de eerste is ingevuld. Zelf heb ik het script iets aangepast zodat het nu partijen en partijleden weergeeft:
http://v6gr110.informatica-laz.nl/menu/state_dropdown.php
Het script:
Code (php)
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
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
<?
echo "<form name=sel>\n";
echo "Partij : <font id=states><select>\n";
echo "<option value='0'>============</option> \n" ;
echo "</select></font>\n";
echo "Lijsttrekker : <font id=cities><select>\n";
echo "<option value='0'>Kies eerst partij</option> \n" ;
echo "</select></font>\n";
?>
<script language=Javascript>
function Inint_AJAX() {
try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) {} //IE
try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) {} //IE
try { return new XMLHttpRequest(); } catch(e) {} //Native Javascript
alert("XMLHttpRequest not supported");
return null;
};
function dochange(src, val) {
var req = Inint_AJAX();
req.onreadystatechange = function () {
if (req.readyState==4) {
if (req.status==200) {
document.getElementById(src).innerHTML=req.responseText; //retuen value
}
}
};
req.open("GET", "state.php?data="+src+"&val="+val); //make connection
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=iso-8859-1"); // set Header
req.send(null); //send value
}
window.onLoad=dochange('states', -1); // value in first dropdown
</script>
echo "<form name=sel>\n";
echo "Partij : <font id=states><select>\n";
echo "<option value='0'>============</option> \n" ;
echo "</select></font>\n";
echo "Lijsttrekker : <font id=cities><select>\n";
echo "<option value='0'>Kies eerst partij</option> \n" ;
echo "</select></font>\n";
?>
<script language=Javascript>
function Inint_AJAX() {
try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) {} //IE
try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) {} //IE
try { return new XMLHttpRequest(); } catch(e) {} //Native Javascript
alert("XMLHttpRequest not supported");
return null;
};
function dochange(src, val) {
var req = Inint_AJAX();
req.onreadystatechange = function () {
if (req.readyState==4) {
if (req.status==200) {
document.getElementById(src).innerHTML=req.responseText; //retuen value
}
}
};
req.open("GET", "state.php?data="+src+"&val="+val); //make connection
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=iso-8859-1"); // set Header
req.send(null); //send value
}
window.onLoad=dochange('states', -1); // value in first dropdown
</script>
en het script van state.php
Code (php)
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
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
<?
//set IE read from page only not read from cache
header ("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header ("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header ("Cache-Control: no-cache, must-revalidate");
header ("Pragma: no-cache");
header("content-type: application/x-javascript; charset=tis-620");
$data=$_GET['data'];
$val=$_GET['val'];
mysql_pconnect($dbhost,$dbuser,$dbpass) or die ("Unable to connect to MySQL server");
if ($data=='states') { // first dropdown
echo "<select name='states' onChange=\"dochange('cities', this.value)\">\n";
echo "<option value='0'>Kies partij</option>\n";
$result=mysql_db_query($dbname,"SELECT partij, partij FROM candidates WHERE pid = 1");
while(list($id, $name)=mysql_fetch_array($result)){
echo "<option value=\"$id\" >$name</option> \n" ;
}
} else if ($data=='cities') { // second dropdown
echo "<select name='cities' >\n";
echo "<option value='0'>Kies lijsttrekker</option>\n";
$result=mysql_db_query($dbname,"SELECT `k_id`, `c_l_name` FROM candidates WHERE `partij` = '$val' ORDER BY `order_nr` ");
while(list($id, $name)=mysql_fetch_array($result)){
echo "<option value=\"$id\" >$name</option> \n" ;
}
}
echo "</select>\n";
?>
//set IE read from page only not read from cache
header ("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header ("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header ("Cache-Control: no-cache, must-revalidate");
header ("Pragma: no-cache");
header("content-type: application/x-javascript; charset=tis-620");
$data=$_GET['data'];
$val=$_GET['val'];
mysql_pconnect($dbhost,$dbuser,$dbpass) or die ("Unable to connect to MySQL server");
if ($data=='states') { // first dropdown
echo "<select name='states' onChange=\"dochange('cities', this.value)\">\n";
echo "<option value='0'>Kies partij</option>\n";
$result=mysql_db_query($dbname,"SELECT partij, partij FROM candidates WHERE pid = 1");
while(list($id, $name)=mysql_fetch_array($result)){
echo "<option value=\"$id\" >$name</option> \n" ;
}
} else if ($data=='cities') { // second dropdown
echo "<select name='cities' >\n";
echo "<option value='0'>Kies lijsttrekker</option>\n";
$result=mysql_db_query($dbname,"SELECT `k_id`, `c_l_name` FROM candidates WHERE `partij` = '$val' ORDER BY `order_nr` ");
while(list($id, $name)=mysql_fetch_array($result)){
echo "<option value=\"$id\" >$name</option> \n" ;
}
}
echo "</select>\n";
?>
Het script werkt goed, alleen zou ik nu graag de variabele van de 2de dropdownbox door willen sturen naar de volgende pagina of als php variabele willen opslaan. Iemand had al het volgende gezegt:
Code (php)
1
2
3
4
5
6
2
3
4
5
6
function recall()
{
dochange('states', <?=$states_value?>);
dochange('cities', <?=$cities_value?>);
}
window.onLoad=recall();
{
dochange('states', <?=$states_value?>);
dochange('cities', <?=$cities_value?>);
}
window.onLoad=recall();
Maar ik heb geen idee waar ik dat moet plaatsen.
Ik hoop dat jullie kunnen helpen,
alvast bedankt!
Excuses voor de slechte weergaven, weet iemand hoe ik dat kan wijzigen?
Gewijzigd op 05/01/2011 22:43:17 door J v wens
J v wens op 04/01/2011 13:07:12:
Excuses voor de slechte weergaven, weet iemand hoe ik dat kan wijzigen?
Zet je code tussen code tags: [code][/code]
Dat raakt wel opgelost hoor.
Er mag wel eerst wat gekuist worden.
Wat staat die <font id=... daar te doen? Weg daar mee.
Ik zal eens wat herschrijven.
(edit)
Ik zie onder meer dat je de <select> opnieuw opzendt en dan als innerHTML van de select box steekt. Dat kan niet de bedoeling zijn.
Vroeger hoorde ik dat de innerHTML van een select aanpassen, soms niet goed werkt. Ik zou aanraden om de select in een wrapper te steken en de hele select te vervangen.
We gaan ook je logica aanpassen aan wat je doet. Je bent niet bezig steden in te vullen, dus die 'cities' zullen we vervangen door iets als 'partij' / 'politicus' ...
(EDIT 2)
Zie eens of je je hier in kan vinden.
Ik heb een werkend voorbeeld + commentaar
Het opbouwen van je select boxes adhv. de database waarden, zal je zelf moeten doen. Lukt dat? (hou je aan de zelfde <select> zoals ik ze toon; pas de options aan.)
index.php
Code (php)
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
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
<html>
<head>
<script language=Javascript>
function Inint_AJAX() {
try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) {} //IE
try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) {} //IE
try { return new XMLHttpRequest(); } catch(e) {} //Native Javascript
alert("XMLHttpRequest not supported");
return null;
};
function dochange(src, val) {
var req = Inint_AJAX();
switch (src) {
case 'get_partijen': // alle partijen ophalen
req.onreadystatechange = function () {
if (req.readyState==4) {
if (req.status==200) {
document.getElementById("partij_span").innerHTML = req.responseText; // nieuw aangemaakte select in de wrapper span steken
}
}
};
req.open("GET", "state.php?data="+ src);
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=iso-8859-1"); // set Header
req.send(null); //send value
break;
case 'partij_geselecteerd':
req.onreadystatechange = function () {
if (req.readyState==4) {
if (req.status==200) {
document.getElementById("politicus_span").innerHTML = req.responseText; // nieuw aangemaakte select in de wrapper span steken
}
}
};
req.open("GET", "state.php?data="+ src +"&val="+ val); //make connection
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=iso-8859-1"); // set Header
req.send(null); //send value
break;
case 'politicus_geselecteerd':
req.onreadystatechange = function () {
if (req.readyState==4) {
if (req.status==200) {
// doe hier eventueel iets
}
}
};
req.open("GET", "state.php?data="+ src +"&val="+ val); //make connection
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=iso-8859-1"); // set Header
req.send(null); //send value
break;
default: return false;
}
}
window.onLoad=dochange('get_partijen', -1); // value in first dropdown
</script>
</head>
<body>
<form name="sel">
Partij : <span id="partij_span"><select><option value='0'>============</option></select></span>
Lijsttrekker : <span id="politicus_span"><select><option value='0'>Kies eerst partij</option></select></span>
</form>
</body>
</html>
<head>
<script language=Javascript>
function Inint_AJAX() {
try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) {} //IE
try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) {} //IE
try { return new XMLHttpRequest(); } catch(e) {} //Native Javascript
alert("XMLHttpRequest not supported");
return null;
};
function dochange(src, val) {
var req = Inint_AJAX();
switch (src) {
case 'get_partijen': // alle partijen ophalen
req.onreadystatechange = function () {
if (req.readyState==4) {
if (req.status==200) {
document.getElementById("partij_span").innerHTML = req.responseText; // nieuw aangemaakte select in de wrapper span steken
}
}
};
req.open("GET", "state.php?data="+ src);
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=iso-8859-1"); // set Header
req.send(null); //send value
break;
case 'partij_geselecteerd':
req.onreadystatechange = function () {
if (req.readyState==4) {
if (req.status==200) {
document.getElementById("politicus_span").innerHTML = req.responseText; // nieuw aangemaakte select in de wrapper span steken
}
}
};
req.open("GET", "state.php?data="+ src +"&val="+ val); //make connection
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=iso-8859-1"); // set Header
req.send(null); //send value
break;
case 'politicus_geselecteerd':
req.onreadystatechange = function () {
if (req.readyState==4) {
if (req.status==200) {
// doe hier eventueel iets
}
}
};
req.open("GET", "state.php?data="+ src +"&val="+ val); //make connection
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=iso-8859-1"); // set Header
req.send(null); //send value
break;
default: return false;
}
}
window.onLoad=dochange('get_partijen', -1); // value in first dropdown
</script>
</head>
<body>
<form name="sel">
Partij : <span id="partij_span"><select><option value='0'>============</option></select></span>
Lijsttrekker : <span id="politicus_span"><select><option value='0'>Kies eerst partij</option></select></span>
</form>
</body>
</html>
state.php
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?php
$_GET['data'] = empty($_GET['data']) ? '' : $_GET['data'];
$_GET['val'] = empty($_GET['val']) ? '' : $_GET['val'];
// select boxes hier aanpassen. Uit db laten komen en zo
switch ($_GET['data']) {
case 'get_partijen': // Bij het laden van de pagina. Geef alle politieke partijen weer
$sql = "SELECT partij FORM candidates ...";
// ...
echo '<select onChange="dochange(\'partij_geselecteerd\', this.value)"><option value="1">partij 1</option><option value="2">partij 2</option></select>';
break;
case 'partij_geselecteerd': // in $_GET['val'] vind je de naam van de geselecteerde partij. Geef nu de tweede select box weer, waarin de politici zijn ingevuld
$sql = "SELECT k_id, c_l_name FROM candidates WHERE partij = '". $val ."' ORDER BY order_nr ";
// ...
echo '<select onChange="dochange(\'politicus_geselecteerd\', this.value)"><option value="1">politicus 1</option><option value="2">politicus 2</option></select>';
break;
case 'politicus_geselecteerd': // in $_GET['val'] vind je de id van de geselecteerde politicus.
// doe hier ecentueel iets
break;
}
?>
$_GET['data'] = empty($_GET['data']) ? '' : $_GET['data'];
$_GET['val'] = empty($_GET['val']) ? '' : $_GET['val'];
// select boxes hier aanpassen. Uit db laten komen en zo
switch ($_GET['data']) {
case 'get_partijen': // Bij het laden van de pagina. Geef alle politieke partijen weer
$sql = "SELECT partij FORM candidates ...";
// ...
echo '<select onChange="dochange(\'partij_geselecteerd\', this.value)"><option value="1">partij 1</option><option value="2">partij 2</option></select>';
break;
case 'partij_geselecteerd': // in $_GET['val'] vind je de naam van de geselecteerde partij. Geef nu de tweede select box weer, waarin de politici zijn ingevuld
$sql = "SELECT k_id, c_l_name FROM candidates WHERE partij = '". $val ."' ORDER BY order_nr ";
// ...
echo '<select onChange="dochange(\'politicus_geselecteerd\', this.value)"><option value="1">politicus 1</option><option value="2">politicus 2</option></select>';
break;
case 'politicus_geselecteerd': // in $_GET['val'] vind je de id van de geselecteerde politicus.
// doe hier ecentueel iets
break;
}
?>
Nu nog zien wat je precies van plan bent wanneer een politicus is gekozen.
Gewijzigd op 05/01/2011 14:22:29 door Kris Peeters
Ik ben bezig met een website waarop je kan stemmen. Daarom ik had het volgende in gedachte: wanneer de juiste politicus is geselecteerd dan wou ik deze als php variabele doorsturen naar de volgende pagina, waarin om een bevestiging word gevraagd en er vervolgens bij de juiste politicus in de kolom "votes" +1 word gezet. Dat zou wel moeten lukken denk ik. Kan ik de $_GET['val'] daarvoor gewoon doorsturen?
Zoals u waarschijnlijk al heeft gemerkt heb ik vrij weinig kennis over Javascript en Ajax.
Code (php)
1
2
3
2
3
$sql = "SELECT partij FROM candidates WHERE pid = 1";
// ... //moet hier iets met while(list($name)=mysql_fetch_array($sql)) of iets dergelijks?
echo '<select onChange="dochange(\'partij_geselecteerd\', this.value)"><option value="1">partij 1</option><option value="2">partij 2</option></select>';
// ... //moet hier iets met while(list($name)=mysql_fetch_array($sql)) of iets dergelijks?
echo '<select onChange="dochange(\'partij_geselecteerd\', this.value)"><option value="1">partij 1</option><option value="2">partij 2</option></select>';
u bedoeld hier toch niet dat ik de partijnamen handmatig neer moet zetten i.p.v partij 1 en partij 2 maar dat ik dat met behulp van de sql gaat en dan iets met een while of iets dergelijks? Om eerlijk te zijn heb ik geen idee hoe dat moet. Zou u dat kunnen uitleggen?
Alvast bedankt!
Gewijzigd op 05/01/2011 23:31:28 door J v wens
Code (php)
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
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
<?php
// select boxes hier aanpassen. Uit db laten komen en zo
switch ($_GET['data']) {
case 'get_partijen': // Bij het laden van de pagina. Geef alle politieke partijen weer
echo '<select onChange="dochange(\'partij_geselecteerd\', this.value)">\n';
echo "<option value='0'>Kies partij</option>\n";
$result=mysql_db_query($dbname,"SELECT partij, partij FROM candidates WHERE pid = 1");
while(list($id, $name)=mysql_fetch_array($result)) {
echo "<option value=\"$id\" >$name</option> \n" ;
}
echo "</select>\n";
break;
case 'partij_geselecteerd': // in $_GET['val'] vind je de naam van de geselecteerde partij. Geef nu de tweede select box weer, waarin de politici zijn ingevuld
$sql = "SELECT k_id, c_l_name FROM candidates WHERE partij = '". $val ."' ORDER BY order_nr ";
echo '<select onChange="dochange(\'politicus_geselecteerd\', this.value)">\n';
echo "<option value='0'>Kies lijsttrekker</option>\n";
$result=mysql_db_query($dbname,"SELECT `k_id`, `c_l_name` FROM candidates WHERE `partij` = '$val' ORDER BY `order_nr` ");
while(list($id, $name)=mysql_fetch_array($result)){
echo "<option value=\"$id\" >$name</option> \n" ;
}
echo "</select>\n";
break;
case 'politicus_geselecteerd': // in $_GET['val'] vind je de id van de geselecteerde politicus.
// doe hier ecentueel iets
break;
}
?>
// select boxes hier aanpassen. Uit db laten komen en zo
switch ($_GET['data']) {
case 'get_partijen': // Bij het laden van de pagina. Geef alle politieke partijen weer
echo '<select onChange="dochange(\'partij_geselecteerd\', this.value)">\n';
echo "<option value='0'>Kies partij</option>\n";
$result=mysql_db_query($dbname,"SELECT partij, partij FROM candidates WHERE pid = 1");
while(list($id, $name)=mysql_fetch_array($result)) {
echo "<option value=\"$id\" >$name</option> \n" ;
}
echo "</select>\n";
break;
case 'partij_geselecteerd': // in $_GET['val'] vind je de naam van de geselecteerde partij. Geef nu de tweede select box weer, waarin de politici zijn ingevuld
$sql = "SELECT k_id, c_l_name FROM candidates WHERE partij = '". $val ."' ORDER BY order_nr ";
echo '<select onChange="dochange(\'politicus_geselecteerd\', this.value)">\n';
echo "<option value='0'>Kies lijsttrekker</option>\n";
$result=mysql_db_query($dbname,"SELECT `k_id`, `c_l_name` FROM candidates WHERE `partij` = '$val' ORDER BY `order_nr` ");
while(list($id, $name)=mysql_fetch_array($result)){
echo "<option value=\"$id\" >$name</option> \n" ;
}
echo "</select>\n";
break;
case 'politicus_geselecteerd': // in $_GET['val'] vind je de id van de geselecteerde politicus.
// doe hier ecentueel iets
break;
}
?>
Probeer dat wat in te werken
Ik heb nu het volgende in het bestand staan:
Code (php)
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
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
// select boxes hier aanpassen. Uit db laten komen en zo
switch ($_GET['data']) {
case 'get_partijen': // Bij het laden van de pagina. Geef alle politieke partijen weer
echo '<select onChange="dochange(\'partij_geselecteerd\', this.value)">\n';
echo "<option value='0'>Kies partij</option>\n";
$result=mysql_db_query($dbname,"SELECT partij, partij FROM candidates WHERE pid = 1");
while(list($id, $name)=mysql_fetch_array($result)) {
echo "<option value=\"$id\" >$name</option> \n" ;
}
echo "</select>\n";
break;
case 'partij_geselecteerd': // in $_GET['val'] vind je de naam van de geselecteerde partij. Geef nu de tweede select box weer, waarin de politici zijn ingevuld
echo '<select onChange="dochange(\'politicus_geselecteerd\', this.value)">\n';
echo "<option value='0'>Kies lijsttrekker</option>\n";
$result=mysql_db_query($dbname,"SELECT k_id, c_l_name FROM candidates WHERE partij = '$val' ORDER BY order_nr ");
while(list($id, $name)=mysql_fetch_array($result)){
echo "<option value=\"$id\" >$name</option> \n" ;
}
echo "</select>\n";
break;
case 'politicus_geselecteerd': // in $_GET['val'] vind je de id van de geselecteerde politicus.
// doe hier ecentueel iets
break;
}
?>
switch ($_GET['data']) {
case 'get_partijen': // Bij het laden van de pagina. Geef alle politieke partijen weer
echo '<select onChange="dochange(\'partij_geselecteerd\', this.value)">\n';
echo "<option value='0'>Kies partij</option>\n";
$result=mysql_db_query($dbname,"SELECT partij, partij FROM candidates WHERE pid = 1");
while(list($id, $name)=mysql_fetch_array($result)) {
echo "<option value=\"$id\" >$name</option> \n" ;
}
echo "</select>\n";
break;
case 'partij_geselecteerd': // in $_GET['val'] vind je de naam van de geselecteerde partij. Geef nu de tweede select box weer, waarin de politici zijn ingevuld
echo '<select onChange="dochange(\'politicus_geselecteerd\', this.value)">\n';
echo "<option value='0'>Kies lijsttrekker</option>\n";
$result=mysql_db_query($dbname,"SELECT k_id, c_l_name FROM candidates WHERE partij = '$val' ORDER BY order_nr ");
while(list($id, $name)=mysql_fetch_array($result)){
echo "<option value=\"$id\" >$name</option> \n" ;
}
echo "</select>\n";
break;
case 'politicus_geselecteerd': // in $_GET['val'] vind je de id van de geselecteerde politicus.
// doe hier ecentueel iets
break;
}
?>
Maar om een of andere reden wil hij nu niet de lijsttrekkers weergeven. Enig idee waarom?
Edit: de partijen wil hij wel gewoon weergeven, dat werkt!
Alvast bedankt!
Gewijzigd op 07/01/2011 18:00:05 door J v wens