Automatisch aanvullen van een formulier
Ik ben al een tijdje bezig met het volgende probleem. Hopelijk kan iemand mij helpen.
Ik probeer een formulier te maken zodat er vanuit een selectbox een keuze gemaakt kan worden. Wanneer de keuze is gemaakt wil ik graag dat er automatische de eenheidsprijs wordt weergegeven in een <input id="txtHint"> veld.
echter krijg ik dit niet in een input veld.
Wanneer ik "txtHint" op roep vanuit een <div id="txtHint">[gegevens]</div> krijg ik wel gewoon de juiste gegevens te zien.
Hopelijk kan iemand mij helpen.
dit is de code van het 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
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
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Naamloos document</title>
<script type="text/javascript">
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","art_bestelformulier_autofill.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form action="art_insert_bestelformulier.php" method="post">
<table border="1">
<tr>
<td>Datum:</td>
<td><input type="date" name="art_leverdatum" /></td>
</tr>
<tr>
<td>Broodsoort:</td>
<td>
<select name="users" onchange="showUser(this.value)">
<option value="">Maak uw keuze..</option>
<?php
$conn=odbc_connect('odbc_db','','');
if (!$conn)
{exit("Connection Failed: " . $conn);}
$query = "SELECT art_omschrijving, art_nr FROM artikelen_assortiment";
$result = odbc_exec($conn, $query);
while ($data = odbc_fetch_array($result)){
?>
<option value="<?php echo $data['art_nr']; ?>"><?php echo $data['art_omschrijving']; ?></option> <?php } ?>
</select>
</td>
</tr>
<tr>
<td>Aantal:</td>
<td><input type="text" name="art_aantal" /></td>
</tr>
<tr>
<td>Prijs per eenheid</td>
<td>
<input id="txtHint" type="text" name="art_eenheidsprijs" />
</td>
</tr>
<tr>
<td>Totaal prijs:</td>
<td><input type="text" name="art_totaalprijs" /></td>
</tr>
<tr>
<td align="right"><input type="reset" value="Reset" /></td>
<td><input type="submit" value="Bestelling Plaatsen" /></td>
</tr>
</table>
</form>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Naamloos document</title>
<script type="text/javascript">
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","art_bestelformulier_autofill.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form action="art_insert_bestelformulier.php" method="post">
<table border="1">
<tr>
<td>Datum:</td>
<td><input type="date" name="art_leverdatum" /></td>
</tr>
<tr>
<td>Broodsoort:</td>
<td>
<select name="users" onchange="showUser(this.value)">
<option value="">Maak uw keuze..</option>
<?php
$conn=odbc_connect('odbc_db','','');
if (!$conn)
{exit("Connection Failed: " . $conn);}
$query = "SELECT art_omschrijving, art_nr FROM artikelen_assortiment";
$result = odbc_exec($conn, $query);
while ($data = odbc_fetch_array($result)){
?>
<option value="<?php echo $data['art_nr']; ?>"><?php echo $data['art_omschrijving']; ?></option> <?php } ?>
</select>
</td>
</tr>
<tr>
<td>Aantal:</td>
<td><input type="text" name="art_aantal" /></td>
</tr>
<tr>
<td>Prijs per eenheid</td>
<td>
<input id="txtHint" type="text" name="art_eenheidsprijs" />
</td>
</tr>
<tr>
<td>Totaal prijs:</td>
<td><input type="text" name="art_totaalprijs" /></td>
</tr>
<tr>
<td align="right"><input type="reset" value="Reset" /></td>
<td><input type="submit" value="Bestelling Plaatsen" /></td>
</tr>
</table>
</form>
</body>
</html>
dit is de code van het php script:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?php
$q=$_GET["q"];
$conn=odbc_connect('odbc_dblaforge','','');
if (!$conn)
{exit("Connection Failed: " . $conn);}
$query="SELECT art_eenheidsprijs FROM artikelen_assortiment WHERE art_nr=$q";
$rs=odbc_exec($conn, $query);
if (!$rs)
{exit("Error in SQL");}
while($row = odbc_fetch_array($rs))
{
echo number_format($row['art_eenheidsprijs'], 2,',', '');
}
odbc_close($conn);
?>
$q=$_GET["q"];
$conn=odbc_connect('odbc_dblaforge','','');
if (!$conn)
{exit("Connection Failed: " . $conn);}
$query="SELECT art_eenheidsprijs FROM artikelen_assortiment WHERE art_nr=$q";
$rs=odbc_exec($conn, $query);
if (!$rs)
{exit("Error in SQL");}
while($row = odbc_fetch_array($rs))
{
echo number_format($row['art_eenheidsprijs'], 2,',', '');
}
odbc_close($conn);
?>
Gewijzigd op 06/03/2012 17:49:33 door Luke van Dommelen
[code]
... en dan hier code
[/code]
Gewijzigd op 06/03/2012 17:38:07 door Kris Peeters
Kris Peeters op 06/03/2012 17:37:46:
Wil je je code tussen code tags plaatsen (verhoogt de leesbaarheid dramatisch)?
[code]
... en dan hier code
[/code]
[code]
... en dan hier code
[/code]
inderdaad haha stom van me
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
txtHint is een <input>, dat heeft geen innerHTML.
Verander .innerHTML eens naar .value
Ik heb het aangepast naar .value, helaas werkt dit nog niet.
In regel 6 staat er nogmaals innerHTML.moet deze ook op value staan? (ik heb dit al getest, maar helaas ook geen resultaat).
alvast bedankt voor je reacties :)
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
<script type="text/javascript">
function art_nr(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").value=xmlhttp.responseText;
}
}
xmlhttp.open("GET","art_bestelformulier_autofill.php?q="+str,true);
xmlhttp.send();
}
</script>
function art_nr(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").value=xmlhttp.responseText;
}
}
xmlhttp.open("GET","art_bestelformulier_autofill.php?q="+str,true);
xmlhttp.send();
}
</script>
Gewijzigd op 07/03/2012 08:56:22 door Luke van Dommelen
Anders moet je in onreadystatechange even een alert plaatsen.
Overigens moet je jezelf realiseren dat je met return in een JS functie de functie niet verlaat, dus in jouw is het verstandiger om de code vanaf regel 9 in een else blok ter plaatsen.
bedankt voor je reactie, maar ik denk dat ik je niet goed begrijp.
(ik ben een enorme leek opgebied van javascript :( )
onderstaande is nogmaals het gehele script wat ik tot nu toe heb.
ik heb de alert terug laten komen op in het input veld eenheidsprijs.
maar als ik een selectie maak in de selectbox komt de alert niet naar boven.
art_bestelformulier.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
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
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Naamloos document</title>
<script type="text/javascript">
function art_nr(str)
{
if (str=="")
{
document.getElementById("txtHint").value="";
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").value=xmlhttp.responseText;
}
}
xmlhttp.open("GET","art_bestelformulier_autofill.php?q="+str,true);
xmlhttp.send();
}
function showalert()
{
alert ("laat iets zien");
}
</script>
</head>
<body>
<form action="art_insert_bestelformulier.php" method="post">
<table border="1">
<tr>
<td>Datum:</td>
<td><input type="text" name="art_leverdatum" /></td>
</tr>
<tr>
<td>Broodsoort:</td>
<td>
<select name="art_nr" onchange="art_nr(this.value)">
<option value="">Maak uw keuze..</option>
<?php
$conn=odbc_connect('odbc_db','','');
if (!$conn)
{exit("Connection Failed: " . $conn);}
$query = "SELECT art_omschrijving, art_nr FROM artikelen_assortiment";
$result = odbc_exec($conn, $query);
while ($data = odbc_fetch_array($result)){
?>
<option value="<?php echo $data['art_nr']; ?>"><?php echo $data['art_omschrijving']; ?></option> <?php } ?>
</select>
</td>
</tr>
<tr>
<td>Aantal:</td>
<td><input type="text" name="art_aantal" /></td>
</tr>
<tr>
<td>Prijs per eenheid</td>
<td>
<input id="txtHint" type="text" name="art_eenheidsprijs" onchange="showalert()" />
</td>
</tr>
<tr>
<td>Totaal prijs:</td>
<td><input type="text" name="art_totaalprijs" /></td>
</tr>
<tr>
<td align="right"><input type="reset" value="Reset" /></td>
<td><input type="submit" value="Bestelling Plaatsen" /></td>
</tr>
</table>
</form>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Naamloos document</title>
<script type="text/javascript">
function art_nr(str)
{
if (str=="")
{
document.getElementById("txtHint").value="";
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").value=xmlhttp.responseText;
}
}
xmlhttp.open("GET","art_bestelformulier_autofill.php?q="+str,true);
xmlhttp.send();
}
function showalert()
{
alert ("laat iets zien");
}
</script>
</head>
<body>
<form action="art_insert_bestelformulier.php" method="post">
<table border="1">
<tr>
<td>Datum:</td>
<td><input type="text" name="art_leverdatum" /></td>
</tr>
<tr>
<td>Broodsoort:</td>
<td>
<select name="art_nr" onchange="art_nr(this.value)">
<option value="">Maak uw keuze..</option>
<?php
$conn=odbc_connect('odbc_db','','');
if (!$conn)
{exit("Connection Failed: " . $conn);}
$query = "SELECT art_omschrijving, art_nr FROM artikelen_assortiment";
$result = odbc_exec($conn, $query);
while ($data = odbc_fetch_array($result)){
?>
<option value="<?php echo $data['art_nr']; ?>"><?php echo $data['art_omschrijving']; ?></option> <?php } ?>
</select>
</td>
</tr>
<tr>
<td>Aantal:</td>
<td><input type="text" name="art_aantal" /></td>
</tr>
<tr>
<td>Prijs per eenheid</td>
<td>
<input id="txtHint" type="text" name="art_eenheidsprijs" onchange="showalert()" />
</td>
</tr>
<tr>
<td>Totaal prijs:</td>
<td><input type="text" name="art_totaalprijs" /></td>
</tr>
<tr>
<td align="right"><input type="reset" value="Reset" /></td>
<td><input type="submit" value="Bestelling Plaatsen" /></td>
</tr>
</table>
</form>
</body>
</html>
Gewijzigd op 07/03/2012 10:24:20 door Luke van Dommelen
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
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Naamloos document</title>
<script type="text/javascript">
function showUser(str)
{
if (str=="")
{
document.getElementById("txtHint").value="";
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").value=xmlhttp.responseText;
}
}
xmlhttp.open("GET","art_bestelformulier_autofill.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form action="art_insert_bestelformulier.php" method="post">
<table border="1">
<tr>
<td>Datum:</td>
<td><input type="date" name="art_leverdatum" /></td>
</tr>
<tr>
<td>Broodsoort:</td>
<td>
<select name="users" onchange="showUser(this.value)">
<option value="">Maak uw keuze..</option>
<option value="1">record 1</option>
<option value="5">record 5</option>
<option value="9">record 9</option>
<option value="12">record 12</option>
</select>
</td>
</tr>
<tr>
<td>Aantal:</td>
<td><input type="text" name="art_aantal" /></td>
</tr>
<tr>
<td>Prijs per eenheid</td>
<td>
<input id="txtHint" type="text" name="art_eenheidsprijs" />
</td>
</tr>
<tr>
<td>Totaal prijs:</td>
<td><input type="text" name="art_totaalprijs" /></td>
</tr>
<tr>
<td align="right"><input type="reset" value="Reset" /></td>
<td><input type="submit" value="Bestelling Plaatsen" /></td>
</tr>
</table>
</form>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Naamloos document</title>
<script type="text/javascript">
function showUser(str)
{
if (str=="")
{
document.getElementById("txtHint").value="";
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").value=xmlhttp.responseText;
}
}
xmlhttp.open("GET","art_bestelformulier_autofill.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form action="art_insert_bestelformulier.php" method="post">
<table border="1">
<tr>
<td>Datum:</td>
<td><input type="date" name="art_leverdatum" /></td>
</tr>
<tr>
<td>Broodsoort:</td>
<td>
<select name="users" onchange="showUser(this.value)">
<option value="">Maak uw keuze..</option>
<option value="1">record 1</option>
<option value="5">record 5</option>
<option value="9">record 9</option>
<option value="12">record 12</option>
</select>
</td>
</tr>
<tr>
<td>Aantal:</td>
<td><input type="text" name="art_aantal" /></td>
</tr>
<tr>
<td>Prijs per eenheid</td>
<td>
<input id="txtHint" type="text" name="art_eenheidsprijs" />
</td>
</tr>
<tr>
<td>Totaal prijs:</td>
<td><input type="text" name="art_totaalprijs" /></td>
</tr>
<tr>
<td align="right"><input type="reset" value="Reset" /></td>
<td><input type="submit" value="Bestelling Plaatsen" /></td>
</tr>
</table>
</form>
</body>
</html>
art_bestelformulier_autofill.php
Ik heb alles met database even geskipped, zelf een paar options ingevuld; een simpele respons ...
Dit werkt bij mij hoor.
Als het php-gedeelte werkt, zou het moeten functioneren, lijkt me.
Ik heb nu jou script gebruikt en mijn database connecties er ingezet en nu werkt het wel, hartstikke bedankt.
Nu ben ik zeer benieuw wat de fout is. zodra ik hier achter ben laat ik dit nog even weten :)
bedankt..
Toevoeging op 07/03/2012 11:06:40:
zoals belooft laat ik nog even weten wat het probleem nu was (of ja wat ik denk).
zo als je in onderstaande code ziet had ik als name="art_nr" maar ook als functie heb ik de naam art_nr gebruikt. Wanneer ik de name veranderde of de functie naam. werkte het script wel.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
<select name="art_nr" onchange="art_nr(this.value)">
<option value="">Maak uw keuze..</option>
<?php
$conn=odbc_connect('odbc_db','','');
if (!$conn)
{exit("Connection Failed: " . $conn);}
$query = "SELECT art_omschrijving, art_nr FROM artikelen_assortiment";
$result = odbc_exec($conn, $query);
while ($data = odbc_fetch_array($result)){
?>
option value="<?php echo $data['art_nr']; ?>"><?php echo $data['art_omschrijving']; ?></option> <?php } ?>
</select>
<option value="">Maak uw keuze..</option>
<?php
$conn=odbc_connect('odbc_db','','');
if (!$conn)
{exit("Connection Failed: " . $conn);}
$query = "SELECT art_omschrijving, art_nr FROM artikelen_assortiment";
$result = odbc_exec($conn, $query);
while ($data = odbc_fetch_array($result)){
?>
option value="<?php echo $data['art_nr']; ?>"><?php echo $data['art_omschrijving']; ?></option> <?php } ?>
</select>
Allemaal bedankt voor de reacties.