woonplaats-aanvuller
citylist.php
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?php
//maak verbinding
mysql_select_db('tabel',mysql_connect('localhost','user','pw'));
//query
if(!empty($_GET['city'])){
$sql = 'SELECT city FROM city WHERE city LIKE LOWER("'.mysql_real_escape_string($_GET['city']).'%") GROUP BY city';
//voer query uit
$out = mysql_query($sql) or trigger_error(mysql_error());
//maak een var aan waar het in komt we willen geen error namelijk
//loop door alle resultaten
$i = 1;
while($city = mysql_fetch_assoc($out)){
if($i > 1){ echo '/';}
echo $city['city'];
$i++;
}
}
?>
//maak verbinding
mysql_select_db('tabel',mysql_connect('localhost','user','pw'));
//query
if(!empty($_GET['city'])){
$sql = 'SELECT city FROM city WHERE city LIKE LOWER("'.mysql_real_escape_string($_GET['city']).'%") GROUP BY city';
//voer query uit
$out = mysql_query($sql) or trigger_error(mysql_error());
//maak een var aan waar het in komt we willen geen error namelijk
//loop door alle resultaten
$i = 1;
while($city = mysql_fetch_assoc($out)){
if($i > 1){ echo '/';}
echo $city['city'];
$i++;
}
}
?>
city.js
Gebruik je
Code (php)
1
<? en ?>
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
65
66
67
68
69
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
<?
//stukje code om AJAX te activeren...
var xmlhttp=false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
// JScript gives us Conditional compilation, we can cope with old IE versions.
// and security blocked creation of the objects.
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
@end @*/
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
try {
xmlhttp = new XMLHttpRequest();
} catch (e) {
xmlhttp=false;
}
}
if (!xmlhttp && window.createRequest) {
try {
xmlhttp = window.createRequest();
} catch (e) {
xmlhttp=false;
}
}
//einde
//we maken nu een eigen JS functie aan om de afhandeling te doen.
function get_city(){
//kill vorige actie
xmlhttp.abort();
//we hebben werken veel met 2 velden dus daar halen we even een paar gegevens uit op
var x = document.getElementById('city').value;
document.getElementById('list').style.display = 'block';
//maak nu een ajax request aan
xmlhttp.open('GET','citylist.php?city=' + x ,true);
xmlhttp.onreadystatechange=function() {
//hee kijken of we een reactie hebben
if (xmlhttp.readyState==4) {
//split op de scheiding teken
var city = xmlhttp.responseText.split('/');
//wis alle huidige opties
while(document.getElementById('list').options[1] != null){
document.getElementById('list').options[1] = null;
}
//voeg alle opties toe...
for(i in city){
document.getElementById('list').options[i] = new Option(city[i],city[i]);
}
}
}
xmlhttp.send(null)
}
function change_value(){
//vraag waarde op
var a = document.getElementById('list').options[document.getElementById('list').selectedIndex].value;
document.getElementById('city').value = a;
document.getElementById('list').style.display = 'none';
}
function hideselect(){
var t=setTimeout("document.getElementById('list').style.display = 'none';",1000)
}
?>
//stukje code om AJAX te activeren...
var xmlhttp=false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
// JScript gives us Conditional compilation, we can cope with old IE versions.
// and security blocked creation of the objects.
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
@end @*/
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
try {
xmlhttp = new XMLHttpRequest();
} catch (e) {
xmlhttp=false;
}
}
if (!xmlhttp && window.createRequest) {
try {
xmlhttp = window.createRequest();
} catch (e) {
xmlhttp=false;
}
}
//einde
//we maken nu een eigen JS functie aan om de afhandeling te doen.
function get_city(){
//kill vorige actie
xmlhttp.abort();
//we hebben werken veel met 2 velden dus daar halen we even een paar gegevens uit op
var x = document.getElementById('city').value;
document.getElementById('list').style.display = 'block';
//maak nu een ajax request aan
xmlhttp.open('GET','citylist.php?city=' + x ,true);
xmlhttp.onreadystatechange=function() {
//hee kijken of we een reactie hebben
if (xmlhttp.readyState==4) {
//split op de scheiding teken
var city = xmlhttp.responseText.split('/');
//wis alle huidige opties
while(document.getElementById('list').options[1] != null){
document.getElementById('list').options[1] = null;
}
//voeg alle opties toe...
for(i in city){
document.getElementById('list').options[i] = new Option(city[i],city[i]);
}
}
}
xmlhttp.send(null)
}
function change_value(){
//vraag waarde op
var a = document.getElementById('list').options[document.getElementById('list').selectedIndex].value;
document.getElementById('city').value = a;
document.getElementById('list').style.display = 'none';
}
function hideselect(){
var t=setTimeout("document.getElementById('list').style.display = 'none';",1000)
}
?>
plaats.php om te testen maar dit moet je natuurlijk toepassen is je eigen formulier....
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
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='nl'>
<head>
<title>Test formulier AJAX</title>
<script type='text/javascript' src='./city.js'></script>
</head>
<?php
//het formulier eigelijk doe ik nu maar 1 verld
?>
<style type="text/css">
body{
z-index:0;
}
#list
{
position:absolute;
left:10px;
top:50px;
z-index:1;
display:none;
}
</style>
<select name="list" id="list" multiple="multiple" size="7" style="width:200px;" onclick="change_value()"></select>
Plaats naam:<br />
<input type="text" name="city" id="city" onkeyup="get_city()" onchange="hideselect()"><br />
<input type="submit" value="Verzenden" />
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='nl'>
<head>
<title>Test formulier AJAX</title>
<script type='text/javascript' src='./city.js'></script>
</head>
<?php
//het formulier eigelijk doe ik nu maar 1 verld
?>
<style type="text/css">
body{
z-index:0;
}
#list
{
position:absolute;
left:10px;
top:50px;
z-index:1;
display:none;
}
</style>
<select name="list" id="list" multiple="multiple" size="7" style="width:200px;" onclick="change_value()"></select>
Plaats naam:<br />
<input type="text" name="city" id="city" onkeyup="get_city()" onchange="hideselect()"><br />
<input type="submit" value="Verzenden" />
Sql database posten lukt niet dus zal hem even online zetten
http://www.phpclub.nl/city.sql