droplist en automatisch invullen van velden
Ik ben sinds een aantal weken actief bezig met PHP/mysql. Het gaat allemaal wel aardig, maar uit een ding kom ik niet uit.
Momenteel werk ik aan een inlog systeem voor een webpagina. Daar heb ik een admin pagina gemaakt waar een administrator gebruikers kan toevoegen en wijzigen. Het toevoegen van gebruikers gaat goed.
Nu haal ik via een mysql query de huidige gebruikers op, en stop deze in een drop list. Nu krijg ik het nog niet voor elkaar om dan automatisch, ofwel zonder page refresh alle velden die bij die user horen te laten zien.
Ik heb natuurlijk al gezocht op google, en begrijp hier min of meer uit dat ik dit met javascript zou moeten kunnen doen. Echter heb ik nog geen kennis van java.
Kan iemand mij een duwtje in de juiste richting geven, om dit toch voorelkaar te krijgen?
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
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
<?php
$db = mysql_connect('localhost', 'root', '');
mysql_select_db('phphulp', $db);
// ajax request afhandelen
if (!empty($_GET['ajax'])) {
$sql = "SELECT id, nick, message FROM shoutbox WHERE id=". (int) $_GET['id'] ." LIMIT 1 ";
$res = mysql_query($sql);
if ($row = mysql_fetch_assoc($res)) {
// Dit echo je als Ajax request. Hier mag je geen <html> / <body> ... echo'en (Wat bv. bij frames wel moet)
echo '
<input name="nick" value="'. htmlspecialchars($row['nick']) .'" /> Nick Name<br/>
<input name="message" value="'. htmlspecialchars($row['message']) .'" /> Message<br/>
';
}
}
elseif ($_SERVER['REQUEST_METHOD'] == 'POST') {
// post(s) behandelen. Registreren / profiel aanpassen / ...
}
else {
// formulier met select box
$sql = "SELECT id, nick FROM shoutbox GROUP BY nick";
$res = mysql_query($sql);
$options ='<option value="0" selected="selected"/> --- SELCTEER GEBRUIKER --- </option>';
while ($row = mysql_fetch_assoc($res)) {
$options .= '<option value="'. $row['id'] .'">'. htmlspecialchars($row['nick']) .'</option>' . PHP_EOL;
}
$form = '
<form>
<select id="user_droplist">
'. $options .'
</select>
<div id="profile"></div>
</form>
';
echo html($form);
}
function html($body) {
return '
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//NL" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel="shortcut icon" type="image/gif" href="favicon.gif"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> droplist en automatisch invullen van velden </title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="js.js"></script>
</head>
<body>
'. $body .'
</body>
</html>';
}
?>
$db = mysql_connect('localhost', 'root', '');
mysql_select_db('phphulp', $db);
// ajax request afhandelen
if (!empty($_GET['ajax'])) {
$sql = "SELECT id, nick, message FROM shoutbox WHERE id=". (int) $_GET['id'] ." LIMIT 1 ";
$res = mysql_query($sql);
if ($row = mysql_fetch_assoc($res)) {
// Dit echo je als Ajax request. Hier mag je geen <html> / <body> ... echo'en (Wat bv. bij frames wel moet)
echo '
<input name="nick" value="'. htmlspecialchars($row['nick']) .'" /> Nick Name<br/>
<input name="message" value="'. htmlspecialchars($row['message']) .'" /> Message<br/>
';
}
}
elseif ($_SERVER['REQUEST_METHOD'] == 'POST') {
// post(s) behandelen. Registreren / profiel aanpassen / ...
}
else {
// formulier met select box
$sql = "SELECT id, nick FROM shoutbox GROUP BY nick";
$res = mysql_query($sql);
$options ='<option value="0" selected="selected"/> --- SELCTEER GEBRUIKER --- </option>';
while ($row = mysql_fetch_assoc($res)) {
$options .= '<option value="'. $row['id'] .'">'. htmlspecialchars($row['nick']) .'</option>' . PHP_EOL;
}
$form = '
<form>
<select id="user_droplist">
'. $options .'
</select>
<div id="profile"></div>
</form>
';
echo html($form);
}
function html($body) {
return '
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//NL" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel="shortcut icon" type="image/gif" href="favicon.gif"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> droplist en automatisch invullen van velden </title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="js.js"></script>
</head>
<body>
'. $body .'
</body>
</html>';
}
?>
js.js (in de zeldfe map als index.php)
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
$(document).ready(function() {
$('#user_droplist').change(function(e) { // wordt dus getriggerd wanneer een nieowe optie uit de select box wordt gekozen
var selected_id = $(e.target).val();
$.ajax({
type: "GET", // POST of GET
url: "index.php?ajax=1&id=" + Number(selected_id), // URL waar Ajax naar zal surfen
success: function(data) { // callback. Dit gebeurt wanneer het ajax request is uitgevoerd
$('#profile').html(data); // respons steken in de div met id="profile"
}
});
})
});
$('#user_droplist').change(function(e) { // wordt dus getriggerd wanneer een nieowe optie uit de select box wordt gekozen
var selected_id = $(e.target).val();
$.ajax({
type: "GET", // POST of GET
url: "index.php?ajax=1&id=" + Number(selected_id), // URL waar Ajax naar zal surfen
success: function(data) { // callback. Dit gebeurt wanneer het ajax request is uitgevoerd
$('#profile').html(data); // respons steken in de div met id="profile"
}
});
})
});
Dit is een voorbeeld waarbij je de sql string zal moeten aanpassen naar jouw gegevens.
Wat moet je verder nog doen?
zoek en download jquery.js (Google is your friend) en zet die file ook in de zelfde map.
Uiteraard database connectie gegevens aanpassen
Zie een s of je er iets mee bent, of laat anders maar iets weten
Gewijzigd op 25/02/2011 12:11:57 door Kris Peeters
Bij een selectbox is dit iets anders. Daar moet je bij de goede option 'selected="selected"' meegeven. http://www.w3schools.com/html/tryit.asp?filename=tryhtml_select3