script met class implementeren
Aangezien ik mijn formulieren met de class formhandler maak probeer ik het hier ook werkend in te krijgen, maar dit lukt niet.
ik heb het idee dat het scripje bij onkeyup niet wordt aangeroepen.
maar wat hiervan de oorzaak is daar kan ik niet achter komen.
dit is wat ik werkend heb:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script type="text/javascript">
function plaatje(e, id){
var dir = "images/";
var ext = ".JPG";
if(e.value.length > 3 && e.value >= 1600 && e.value <= 1605){document.getElementById(id).src = dir + e.value + ext;}
if(e.value.length <= 3 && e.value < 1600 ){document.getElementById(id).src = dir + 'error.gif';}
}
</script>
<input type="text" name="tekst" onkeyup="plaatje(this, 'mijnplaatje')" size="4" maxlength="4" />
<img src="images/error.gif" id="mijnplaatje" />
<input type="text" name="tekst" onkeyup="plaatje(this, 'mijnplaatje2')" size="4" maxlength="4" />
<img src="images/error.gif" id="mijnplaatje2" />
<input type="text" name="tekst" onkeyup="plaatje(this, 'mijnplaatje3')" size="4" maxlength="4" />
<img src="images/error.gif" id="mijnplaatje3" />
function plaatje(e, id){
var dir = "images/";
var ext = ".JPG";
if(e.value.length > 3 && e.value >= 1600 && e.value <= 1605){document.getElementById(id).src = dir + e.value + ext;}
if(e.value.length <= 3 && e.value < 1600 ){document.getElementById(id).src = dir + 'error.gif';}
}
</script>
<input type="text" name="tekst" onkeyup="plaatje(this, 'mijnplaatje')" size="4" maxlength="4" />
<img src="images/error.gif" id="mijnplaatje" />
<input type="text" name="tekst" onkeyup="plaatje(this, 'mijnplaatje2')" size="4" maxlength="4" />
<img src="images/error.gif" id="mijnplaatje2" />
<input type="text" name="tekst" onkeyup="plaatje(this, 'mijnplaatje3')" size="4" maxlength="4" />
<img src="images/error.gif" id="mijnplaatje3" />
en dit is wat ik met formhandler heb gemaakt maar niet af krijg.
kan iemand misschien kijken wat ik fout heb gedaan? of iets wat ik zou kunnen proberen?
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
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
<head>
<script type="text/javascript">
function plaatje(e, Id){
var dir = "../images/";
var ext = ".JPG";
if(e.value.length > 3 && e.value >= 1600 && e.value <= 1605){document.getElementById(idsrc = dir + e.value + ext;}
if(e.value.length <= 3 && e.value < 1600 ){document.getElementById(id).src = dir + 'error.gif';}
}
</script>
</head>
<?php
// include the class
include("../FH3/class.FormHandler.php");
// create a new FormHandler object
$form =& new FormHandler();
// some fields.. (see manual for examples)
$form->textField( "test", "test", 0 , 4, 4, 'onkeyup="plaatje(this, "mijnplaatje")"' );
// addHTML
$form -> addHTML(
" <img src='../images/error.gif' id='mijnplaatje'/ >"
);
// set the 'commit-after-form' function
$form->onCorrect('doRun');
// display the form
$form->flush();
// the 'commit-after-form' function
function doRun( $data )
{
echo "Hello ". $data['test'].", you are ".$data['test'] ." years old!";
}
?>
<script type="text/javascript">
function plaatje(e, Id){
var dir = "../images/";
var ext = ".JPG";
if(e.value.length > 3 && e.value >= 1600 && e.value <= 1605){document.getElementById(idsrc = dir + e.value + ext;}
if(e.value.length <= 3 && e.value < 1600 ){document.getElementById(id).src = dir + 'error.gif';}
}
</script>
</head>
<?php
// include the class
include("../FH3/class.FormHandler.php");
// create a new FormHandler object
$form =& new FormHandler();
// some fields.. (see manual for examples)
$form->textField( "test", "test", 0 , 4, 4, 'onkeyup="plaatje(this, "mijnplaatje")"' );
// addHTML
$form -> addHTML(
" <img src='../images/error.gif' id='mijnplaatje'/ >"
);
// set the 'commit-after-form' function
$form->onCorrect('doRun');
// display the form
$form->flush();
// the 'commit-after-form' function
function doRun( $data )
{
echo "Hello ". $data['test'].", you are ".$data['test'] ." years old!";
}
?>
Code (php)
1
2
3
2
3
<?php
$form->textField( "test", "test", 0 , 4, 4, 'onkeyup="plaatje(this, \'mijnplaatje\')"' );
?>
$form->textField( "test", "test", 0 , 4, 4, 'onkeyup="plaatje(this, \'mijnplaatje\')"' );
?>
(Let op de quotes in het laatste argument)
hier is de code dan nog even compleet:
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
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
<head>
<script type="text/javascript">
function plaatje(e, id){
var dir = "../images/";
var ext = ".JPG";
if(e.value.length > 3 && e.value >= 1600 && e.value <= 1605){document.getElementById(id).src = dir + e.value + ext;}
if(e.value.length <= 3 && e.value < 1600 ){document.getElementById(id).src = dir + 'error.gif';}
}
</script>
</head>
<?php
// include the class
include("../FH3/class.FormHandler.php");
// create a new FormHandler object
$form =& new FormHandler();
// some fields.. (see manual for examples)
$form->textField( "test", "test", 0 , 4, 4, 'onkeyup="plaatje(this, \'mijnplaatje\')"' );
// addHTML
$form -> addHTML(
" <img src='../images/error.gif' id='mijnplaatje'/ >"
);
// set the 'commit-after-form' function
$form->onCorrect('doRun');
// display the form
$form->flush();
// the 'commit-after-form' function
function doRun( $data )
{
echo "Hello ". $data['test'].", you are ".$data['test'] ." years old!";
}
?>
<script type="text/javascript">
function plaatje(e, id){
var dir = "../images/";
var ext = ".JPG";
if(e.value.length > 3 && e.value >= 1600 && e.value <= 1605){document.getElementById(id).src = dir + e.value + ext;}
if(e.value.length <= 3 && e.value < 1600 ){document.getElementById(id).src = dir + 'error.gif';}
}
</script>
</head>
<?php
// include the class
include("../FH3/class.FormHandler.php");
// create a new FormHandler object
$form =& new FormHandler();
// some fields.. (see manual for examples)
$form->textField( "test", "test", 0 , 4, 4, 'onkeyup="plaatje(this, \'mijnplaatje\')"' );
// addHTML
$form -> addHTML(
" <img src='../images/error.gif' id='mijnplaatje'/ >"
);
// set the 'commit-after-form' function
$form->onCorrect('doRun');
// display the form
$form->flush();
// the 'commit-after-form' function
function doRun( $data )
{
echo "Hello ". $data['test'].", you are ".$data['test'] ." years old!";
}
?>
dit scripje laat een aantal divjes zien aan de hand van de input van een selectfield. dus is 1 geslecteerd dan is div 1 te zien, is 2 geselecteerd dan zijn div 1 en 2 te zien. enz enz enz.
dit scripje heb ik zonder formhandler wel aan de praat.
maar in formhandler lukt het me niet helemaal.
dat wil zeggen dat ik geen foutmeldingen krijg maar dat de divjes ook niet worden weergegeven. dit is wat ik werkend heb:
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
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
<html>
<head>
<title>TEST</title>
<script>
function ShowMenu(num, menu, max)
{
//starting at one, loop through until the number chosen by the user
for(i = 1; i <= num; i++){
//add number onto end of menu
var menu2 = menu + i;
//change visibility to block, or 'visible'
document.getElementById(menu2).style.display = 'block';
}
//make a number one more than the number inputed
var num2 = num;
num2++;
//hide it if the viewer selects a number lower
//this will hide every number between the selected number and the maximum
//ex. if 3 is selected, hide the <div> cells for 4, 5, and 6
//loop until max is reached
while(num2 <= max){
var menu3 = menu + num2;
//hide
document.getElementById(menu3).style.display = 'none';
//add one to loop
num2=num2+1;
}
}
</script>
</head>
<body>
<h3>aantal</h3>
<form action="processorder.php" method="post">
selecteer het aantal
<select name='numflowers' onChange="javascript: ShowMenu(document.getElementById('numflowers').value,'divColor', 2);">
<option value='0'>Number of Flowers
<option value='1'>1
<option value='2'>2
</select>
<div id='divColor1' style="display: none;">
Choose type of flower 1:<br><br>
<input type="radio" name="color1" value="red">Red<br>
<input type="radio" name="color1" value="white">White<br>
<input type="radio" name="color1" value="yellow">Yellow<br>
</div>
<div id='divColor2' style="display: none;">
Choose type of flower 2:<br><br>
<input type="radio" name="color2" value="red">Red<br>
<input type="radio" name="color2" value="white">White<br>
<input type="radio" name="color2" value="yellow">Yellow<br>
</div>
<br>
<input type="submit" value="Next Step">
</form>
</body>
</html>
<head>
<title>TEST</title>
<script>
function ShowMenu(num, menu, max)
{
//starting at one, loop through until the number chosen by the user
for(i = 1; i <= num; i++){
//add number onto end of menu
var menu2 = menu + i;
//change visibility to block, or 'visible'
document.getElementById(menu2).style.display = 'block';
}
//make a number one more than the number inputed
var num2 = num;
num2++;
//hide it if the viewer selects a number lower
//this will hide every number between the selected number and the maximum
//ex. if 3 is selected, hide the <div> cells for 4, 5, and 6
//loop until max is reached
while(num2 <= max){
var menu3 = menu + num2;
//hide
document.getElementById(menu3).style.display = 'none';
//add one to loop
num2=num2+1;
}
}
</script>
</head>
<body>
<h3>aantal</h3>
<form action="processorder.php" method="post">
selecteer het aantal
<select name='numflowers' onChange="javascript: ShowMenu(document.getElementById('numflowers').value,'divColor', 2);">
<option value='0'>Number of Flowers
<option value='1'>1
<option value='2'>2
</select>
<div id='divColor1' style="display: none;">
Choose type of flower 1:<br><br>
<input type="radio" name="color1" value="red">Red<br>
<input type="radio" name="color1" value="white">White<br>
<input type="radio" name="color1" value="yellow">Yellow<br>
</div>
<div id='divColor2' style="display: none;">
Choose type of flower 2:<br><br>
<input type="radio" name="color2" value="red">Red<br>
<input type="radio" name="color2" value="white">White<br>
<input type="radio" name="color2" value="yellow">Yellow<br>
</div>
<br>
<input type="submit" value="Next Step">
</form>
</body>
</html>
en dit is wat ik in formhandler heb. ik krijg dus geen foutmeldingen.
maar er gebeurt voor de rest ook niks, zit de fout in de div jes? of kan de functie de waardes van het selectfield niet uitlezen?
iemand een idee?
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
<head>
<script>
function ShowMenu(num, menu, max)
{
//starting at one, loop through until the number chosen by the user
for(i = 1; i <= num; i++){
//add number onto end of menu
var menu2 = menu + i;
//change visibility to block, or 'visible'
document.getElementById(menu2).style.display = 'block';
}
//make a number one more than the number inputed
var num2 = num;
num2++;
//hide it if the viewer selects a number lower
//this will hide every number between the selected number and the maximum
//ex. if 3 is selected, hide the <div> cells for 4, 5, and 6
//loop until max is reached
while(num2 <= max){
var menu3 = menu + num2;
//hide
document.getElementById(menu3).style.display = 'none';
//add one to loop
num2=num2+1;
}
}
</script>
</head>
<?php
// include the class
include("../FH3/class.FormHandler.php");
// create a new FormHandler object
$form =& new FormHandler();
$numflowers = array(
"0" => "-- Select --",
"1" => "1",
"2" => "2"
);
// the field
$form -> selectField("numflowers", "numflowers", $numflowers, FH_NOT_EMPTY, 0, 0, 1, 'onChange="javascript: ShowMenu(document.getElementById(\'numflowers\').value,\'divColor\', 2);"');
$form->addHTML(
"<div id='divColor1' style='display: none;'>".
"test".
"test".
"</div>"
);
$form->addHTML(
"<div id='divColor2' style='display: none;'>".
"test".
"test".
"</div>"
);
// set the 'commit-after-form' function
$form->onCorrect('doRun');
// display the form
$form->flush();
// the 'commit-after-form' function
function doRun( $data )
{
echo "Hello ". $data['name'].", you are ".$data['age'] ." years old!";
}
?>
<script>
function ShowMenu(num, menu, max)
{
//starting at one, loop through until the number chosen by the user
for(i = 1; i <= num; i++){
//add number onto end of menu
var menu2 = menu + i;
//change visibility to block, or 'visible'
document.getElementById(menu2).style.display = 'block';
}
//make a number one more than the number inputed
var num2 = num;
num2++;
//hide it if the viewer selects a number lower
//this will hide every number between the selected number and the maximum
//ex. if 3 is selected, hide the <div> cells for 4, 5, and 6
//loop until max is reached
while(num2 <= max){
var menu3 = menu + num2;
//hide
document.getElementById(menu3).style.display = 'none';
//add one to loop
num2=num2+1;
}
}
</script>
</head>
<?php
// include the class
include("../FH3/class.FormHandler.php");
// create a new FormHandler object
$form =& new FormHandler();
$numflowers = array(
"0" => "-- Select --",
"1" => "1",
"2" => "2"
);
// the field
$form -> selectField("numflowers", "numflowers", $numflowers, FH_NOT_EMPTY, 0, 0, 1, 'onChange="javascript: ShowMenu(document.getElementById(\'numflowers\').value,\'divColor\', 2);"');
$form->addHTML(
"<div id='divColor1' style='display: none;'>".
"test".
"test".
"</div>"
);
$form->addHTML(
"<div id='divColor2' style='display: none;'>".
"test".
"test".
"</div>"
);
// set the 'commit-after-form' function
$form->onCorrect('doRun');
// display the form
$form->flush();
// the 'commit-after-form' function
function doRun( $data )
{
echo "Hello ". $data['name'].", you are ".$data['age'] ." years old!";
}
?>
javascript: is net als bijvoorbeeld http:, https: of ssh: de aanduiding voor het protocol in de URL. onchange moet geen URL bevatten, maar geldige javascript-code.
Maar heeft voor de werking voor de rest niks uitgemaakt, of heeft me niet op meer ideen gebracht.
iemand nog meer ideen/suggesties?
dat kan wel maar is wel veel werk denk ik...
ik heb hier wel de url zodat je kan zien hoe het er online uit ziet:
het werkende gedeelte zonder de class:
http://www.vanderwaal.info/test3.php
wat ik tot nu toe heb met de class formhandler maar niet werkend krijg:
http://www.vanderwaal.info/orderinvoer/hide2.php
ik heb hem in IE getest maar zie niks!
welke browser gebruik jij?
iemand een idee hoe ik het dan ook in IE werkend kan krijgen?
http://www.vanderwaal.info/orderinvoer/hide2.php
Vervang:
Code (php)
1
$form -> selectField("numflowers", "numflowers", $numflowers, FH_NOT_EMPTY, 0, 0, 1, 'onChange="javascript: ShowMenu(document.getElementById(\'numflowers\').value,\'divColor\', 2);"');
eens door
Code (php)
1
$form -> selectField("numflowers", "numflowers", $numflowers, FH_NOT_EMPTY, 0, 0, 1, 'onChange="javascript: ShowMenu(this.options[this.selectedIndex].value,\'divColor\', 2);"');
Zie voor meer informatie deze pagina op Quirksmode.
er was een tabel niet goed afgesloten waardoor de de divjes niet konden worden weergegeven.
bedankt voor jullie reacties!!!!
Gewijzigd op 01/01/1970 01:00:00 door jonathan