Meerdere selects met ajax en mysql
http://www.w3schools.com/php/php_ajax_database.asp op mijn website. Alleen laat ik een overzicht zien van mijn producten met daarbij de opties. Alleen als ik meerdere select heb dan werkt er maar één. Hoe kan ik het werkend krijgen?
HTML pagina:
GETUSER.PHP
Ik wil de volgende script gebruiken: HTML pagina:
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
70
71
72
73
74
75
76
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
<?php
<html>
<head>
<script>
function showUser(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
PRODUCT 1 - SPIJKERS: <form>
<select name="users" onchange="showUser(this.value)">
<option value="">Maak u keuze</option>
<option value="1">5 mm</option>
<option value="2">6 mm</option>
<option value="3">7 mm</option>
<option value="4">8 mm</option>
</select>
</form>
<br />
<div id="txtHint"><b>spijker overzicht</b></div>
<br /><br />
PRODUCT 2 - SCHROEVEN: <form>
<select name="users" onchange="showUser(this.value)">
<option value="">Maak u keuze</option>
<option value="21">4 mm</option>
<option value="22">6 mm</option>
<option value="23">8 mm</option>
</select>
</form>
<br />
<div id="txtHint"><b>Schroeven overzicht</b></div>
<br /><br />
PRODUCT 3 - DRAAGNAGELS:
<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Maak u keuze</option>
<option value="34">3 mm</option>
<option value="35">4 mm</option>
<option value="36">5 mm</option>
</select>
</form>
<br />
<div id="txtHint"><b>Draagnagels overzicht</b></div>
</body>
</html>
?>
<html>
<head>
<script>
function showUser(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
PRODUCT 1 - SPIJKERS: <form>
<select name="users" onchange="showUser(this.value)">
<option value="">Maak u keuze</option>
<option value="1">5 mm</option>
<option value="2">6 mm</option>
<option value="3">7 mm</option>
<option value="4">8 mm</option>
</select>
</form>
<br />
<div id="txtHint"><b>spijker overzicht</b></div>
<br /><br />
PRODUCT 2 - SCHROEVEN: <form>
<select name="users" onchange="showUser(this.value)">
<option value="">Maak u keuze</option>
<option value="21">4 mm</option>
<option value="22">6 mm</option>
<option value="23">8 mm</option>
</select>
</form>
<br />
<div id="txtHint"><b>Schroeven overzicht</b></div>
<br /><br />
PRODUCT 3 - DRAAGNAGELS:
<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Maak u keuze</option>
<option value="34">3 mm</option>
<option value="35">4 mm</option>
<option value="36">5 mm</option>
</select>
</form>
<br />
<div id="txtHint"><b>Draagnagels overzicht</b></div>
</body>
</html>
?>
GETUSER.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
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
<?php
$q=$_GET["q"];
$con = mysql_connect('localhost', 'peter', 'abc123');
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("ajax_demo", $con);
$sql="SELECT * FROM producten WHERE id = '".$q."'";
$result = mysql_query($sql);
echo "<table border='1'>
<tr>
<th>Artikel</th>
<th>Prijs</th>
<th>Eenheid</th>
</tr>";
while($row = mysql_fetch_array($result))
{
echo "<tr>";
echo "<td>" . $row['artikel'] . "</td>";
echo "<td>" . $row['prijs'] . "</td>";
echo "<td>" . $row['eenheid'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysql_close($con);
?>
$q=$_GET["q"];
$con = mysql_connect('localhost', 'peter', 'abc123');
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("ajax_demo", $con);
$sql="SELECT * FROM producten WHERE id = '".$q."'";
$result = mysql_query($sql);
echo "<table border='1'>
<tr>
<th>Artikel</th>
<th>Prijs</th>
<th>Eenheid</th>
</tr>";
while($row = mysql_fetch_array($result))
{
echo "<tr>";
echo "<td>" . $row['artikel'] . "</td>";
echo "<td>" . $row['prijs'] . "</td>";
echo "<td>" . $row['eenheid'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysql_close($con);
?>
Gewijzigd op 15/11/2012 10:15:49 door Kees Mulder
Wat is het dpel van dit script? Moet dit uiteindelijke een winkelwagen worden of puur informatie geven over producten?
Onderstaande zou het gewenste resultaat moeten geven. (Dit is niet getest dus er zou een klein foutje in kunnen zitten)
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
70
71
72
73
74
75
76
77
78
79
80
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
<html>
<head>
<script>
function verversProductHint( groep, id )
{
if (groep==0 OR id==0)
{
document.getElementById("productHint_"+groep).innerHTML="";
return;
}
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
// Heb het de groep toegevoegd zodat de juiste div ververst word
document.getElementById("productHint_" + groep).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getproducthint.php?q=" + id, true);
xmlhttp.send();
}
</script>
</head>
<body>
PRODUCT 1 - SPIJKERS: <form>
<select name="product" onchange="addProduct( 1, this.value)">
<option value="">Maak u keuze</option>
<option value="1">5 mm</option>
<option value="2">6 mm</option>
<option value="3">7 mm</option>
<option value="4">8 mm</option>
</select>
</form>
<br />
<div id="productHint_1"><b>spijker overzicht</b></div>
<br /><br />
PRODUCT 2 - SCHROEVEN: <form>
<select name="product" onchange="addProduct( 2, this.value)">
<option value="">Maak u keuze</option>
<option value="21">4 mm</option>
<option value="22">6 mm</option>
<option value="23">8 mm</option>
</select>
</form>
<br />
<div id="productHint_2"><b>Schroeven overzicht</b></div>
<br /><br />
PRODUCT 3 - DRAAGNAGELS:
<form>
<select name="product" onchange="addProduct( 3, this.value)">
<option value="">Maak u keuze</option>
<option value="34">3 mm</option>
<option value="35">4 mm</option>
<option value="36">5 mm</option>
</select>
</form>
<br />
<div id="productHint_3"><b>Draagnagels overzicht</b></div>
</body>
</html>
<head>
<script>
function verversProductHint( groep, id )
{
if (groep==0 OR id==0)
{
document.getElementById("productHint_"+groep).innerHTML="";
return;
}
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
// Heb het de groep toegevoegd zodat de juiste div ververst word
document.getElementById("productHint_" + groep).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getproducthint.php?q=" + id, true);
xmlhttp.send();
}
</script>
</head>
<body>
PRODUCT 1 - SPIJKERS: <form>
<select name="product" onchange="addProduct( 1, this.value)">
<option value="">Maak u keuze</option>
<option value="1">5 mm</option>
<option value="2">6 mm</option>
<option value="3">7 mm</option>
<option value="4">8 mm</option>
</select>
</form>
<br />
<div id="productHint_1"><b>spijker overzicht</b></div>
<br /><br />
PRODUCT 2 - SCHROEVEN: <form>
<select name="product" onchange="addProduct( 2, this.value)">
<option value="">Maak u keuze</option>
<option value="21">4 mm</option>
<option value="22">6 mm</option>
<option value="23">8 mm</option>
</select>
</form>
<br />
<div id="productHint_2"><b>Schroeven overzicht</b></div>
<br /><br />
PRODUCT 3 - DRAAGNAGELS:
<form>
<select name="product" onchange="addProduct( 3, this.value)">
<option value="">Maak u keuze</option>
<option value="34">3 mm</option>
<option value="35">4 mm</option>
<option value="36">5 mm</option>
</select>
</form>
<br />
<div id="productHint_3"><b>Draagnagels overzicht</b></div>
</body>
</html>
en php code (bestandnaam: getproducthint.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
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
<?php
// voer reguliere expressie uit om query string schoon te maken
$q = preg_replace('#[^A-Za-z 0-9,.?$@!]#i', '', $_GET["q"]);
$con = mysql_connect('localhost', 'peter', 'abc123');
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("ajax_demo", $con);
$sql="SELECT * FROM producten WHERE id = '".$q."'";
$result = mysql_query($sql);
echo "<table border='1'>
<tr>
<th>Artikel</th>
<th>Prijs</th>
<th>Eenheid</th>
</tr>";
while($row = mysql_fetch_array($result))
{
echo "<tr>";
echo "<td>" . $row['artikel'] . "</td>";
echo "<td>" . $row['prijs'] . "</td>";
echo "<td>" . $row['eenheid'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysql_close($con);
?>
// voer reguliere expressie uit om query string schoon te maken
$q = preg_replace('#[^A-Za-z 0-9,.?$@!]#i', '', $_GET["q"]);
$con = mysql_connect('localhost', 'peter', 'abc123');
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("ajax_demo", $con);
$sql="SELECT * FROM producten WHERE id = '".$q."'";
$result = mysql_query($sql);
echo "<table border='1'>
<tr>
<th>Artikel</th>
<th>Prijs</th>
<th>Eenheid</th>
</tr>";
while($row = mysql_fetch_array($result))
{
echo "<tr>";
echo "<td>" . $row['artikel'] . "</td>";
echo "<td>" . $row['prijs'] . "</td>";
echo "<td>" . $row['eenheid'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysql_close($con);
?>
Groet,
Erwin van Hoof
SiteOn
Gewijzigd op 15/11/2012 12:13:40 door Erwin van Hoof