Toon posts:

[js] regular expression + variabele

Pagina: 1
Acties:

Verwijderd

Topicstarter
Ik kom er niet uit en heb me suf gezocht op o.a. Google (wellicht weet ik niet de juiste termen om op te zoeken, dus vergeef me)

De vollgende code:
code:
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
<!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=iso-8859-1" />
<title>test</title>
</head>

<body>
<script type="text/javascript">
function checkAll(tButton, tBoxName) {
    var allInputs = document.forms[0].getElementsByTagName("input");
    var allUsedefaults = new Array();
    regExp = new RegExp(/[tBoxName]\\[\]/);
    regExp2 = new RegExp(/[tBoxName]\\[[^\]]+\]/);
    for (var i = 0; i < allInputs.length; i++) {
        if (allInputs[i].type != 'checkbox') continue;
        if (allInputs[i].name.match(regExp) || allInputs[i].name.match(regExp2)) {
            allUsedefaults.push(allInputs[i]);
        }
    }
    for (var i = 0; i < allUsedefaults.length; i++) {
        allUsedefaults[i].checked = tButton.checked;
    }
}
</script>
<form action="<?=$_SERVER['PHP_SELF'];?>" method="post" name="frmTest" id="frmTest">
<table border="0" cellspacing="0" cellpadding="5">
  <tr>
    <td><strong>alles selecteren: </strong></td>
    <td><input name="btnToggle" type="checkbox" id="btnToggle" value="true" onclick="checkAll(this, 'chkTestbox');" /></td>
    <td><input name="btnToggle2" type="checkbox" id="btnToggle2" value="true" onclick="checkAll(this, 'chkTestbox2');" /></td>
  </tr>
  <tr>
    <td>optie 1 </td>
    <td><input name="chkTestbox[0]" type="checkbox" id="chkTestbox1" value="1" /></td>
    <td><input name="chkTestbox2[0]" type="checkbox" id="chkTestbox1" value="1" /></td>
  </tr>
  <tr>
    <td>optie 2 </td>
    <td><input name="chkTestbox[1]" type="checkbox" id="chkTestbox2" value="2" /></td>
    <td><input name="chkTestbox2[1]" type="checkbox" id="chkTestbox2" value="2" /></td>
  </tr>
  <tr>
    <td>optie 3 </td>
    <td><input name="chkTestbox[2]" type="checkbox" id="chkTestbox3" value="3" /></td>
    <td><input name="chkTestbox2[2]" type="checkbox" id="chkTestbox3" value="3" /></td>
  </tr>
  <tr>
    <td>optie 4 </td>
    <td><input name="chkTestbox[3]" type="checkbox" id="chkTestbox4" value="4" /></td>
    <td><input name="chkTestbox2[3]" type="checkbox" id="chkTestbox4" value="4" /></td>
  </tr>
  <tr>
    <td>optie 5 </td>
    <td><input name="chkTestbox[4]" type="checkbox" id="chkTestbox5" value="5" /></td>
    <td><input name="chkTestbox2[4]" type="checkbox" id="chkTestbox5" value="5" /></td>
  </tr>
  <tr>
    <td><strong>niet mee geselecteerd: </strong></td>
    <td><input name="chkNiet" type="checkbox" id="chkTestbox5" value="100" /></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><input type="submit" name="Submit" value="Submit" /></td>
    <td>&nbsp;</td>
  </tr>
  <tr valign="top">
    <td>Resultaat formulier:</td>
    <td>&nbsp;</td>
    <td><pre><? print_r($_POST); ?></pre> </td>
  </tr>
</table>
</form>
</body>
</html>


Boven aan staan 2 checkboxen.
Als je de linker checked, moet het linker rijtje geselecteerd worden.
Als je de rechter checked, moet het rechter rijtje geselecteerd worden.
Lijkt me duidelijk.

Ik wil hiervoor 1 functie gebruiken en stuur dus bij het checken van 1 van de bovenste checkboxen de naam mee van de naam van de array van de checkboxen.
De namen van de checkboxen moeten met [] worden genoteerd, omdat ik met PHP deze arrays wil uitlezen.

Ik krijg het aanvinken van het linker of rechterrijtje niet voor elkaar.

En dat gaat fout bij de reguliere expressie.
Hoe krijg ik nu de variabele in de reguliere expressie?!
Het gaat dus om regel 13 en 14. Op de een of andere manier moet er de waarde van tBoxName in krijgen.

  • gorgi_19
  • Registratie: Mei 2002
  • Laatst online: 14:53

gorgi_19

Kruimeltjes zijn weer op :9

Javascript hoort thuis in Webdesign & Graphics, zoals al in een eerder topic tegen je is gezegd :)

>> [forurm=wg]

Digitaal onderwijsmateriaal, leermateriaal voor hbo


Verwijderd

Topicstarter
Excuus ... hoewel javascript toch eigenlijk ook betrekking heeft op programmeren en niet het designen van websites en/of graphics. Maar das een andere discussie.

Verwijderd

doe eens new regexp(tBoxName+'\\[\]');

oid, gewoon strings optellen dus, volgens mij mag in een constructor niet eens een // declaratie staan, want da's een constructor op zichzelf:
http://www.devguru.com/Te...ript/quickref/regexp.html

[ Voor 58% gewijzigd door Verwijderd op 26-11-2004 13:58 ]


Verwijderd

Topicstarter
Heb de functie aangepast naar:

code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script type="text/javascript">
function checkAll(tButton, tBoxName) {
    var allInputs = document.forms[0].getElementsByTagName("input");
    var allUsedefaults = new Array();
    exp1 = /[tBoxName]\\[\]/;
    exp2 = /[tBoxName]\\[[^\]]+\]/;
    for (var i = 0; i < allInputs.length; i++) {
        if (allInputs[i].type != 'checkbox') continue;
        if (allInputs[i].name.match(exp1) || allInputs[i].name.match(exp2)) {
            allUsedefaults.push(allInputs[i]);
        }
    }
    for (var i = 0; i < allUsedefaults.length; i++) {
        allUsedefaults[i].checked = tButton.checked;
    }
}
</script>


Nope, dat werkt niet :(

[ Voor 15% gewijzigd door Verwijderd op 26-11-2004 14:15 ]


Verwijderd

je doet ook niet wat ik zeg

exp1 = new regexp(tBoxName+'\\[\]');

[ Voor 42% gewijzigd door Verwijderd op 26-11-2004 14:25 ]


Verwijderd

Topicstarter
werkt ook niet

Verwijderd

is er een reden dat je niet global zoekt? anders moet je dat natuurlijk ook even doen. En wellicht case insensitive

en denk even goed na over je regexp (zie nu pas dat dat een zooitje is)

\\[\] vind je niet terug, want er staat altijd een getal tussen, dus je moet eerder zoiets hebben:

\\[\d+\]

en wat is die 2e? bedoel je niet \\[.*?\]

[ Voor 51% gewijzigd door Verwijderd op 26-11-2004 14:38 ]


  • crisp
  • Registratie: Februari 2000
  • Laatst online: 14:55

crisp

Devver

Pixelated

JavaScript:
1
var exp1 = new RegExp('\\[' + tBoxName + '\]\\[\]');

Intentionally left blank


Verwijderd

ik denk niet dat die tBoxName in een class moet crisp dat heb je ook niet 8)7, maar dan nog zie ik in z'n names die haken niet terug, en zoals ik al zei, met \\[\] vind ie niks terug

[ Voor 30% gewijzigd door Verwijderd op 26-11-2004 14:43 ]


Verwijderd

Topicstarter
Ik gebruik ook wel eens formulier waar er niets tussen de haken staat.
Er staat ook (toch?) dat ie aan 1 van de 2 moet voldoen, niet allebei.

Aangepast naar:
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script type="text/javascript">
function checkAll(tButton, tBoxName) {
    var allInputs = document.forms[0].getElementsByTagName("input");
    var allUsedefaults = new Array();
    var exp1 = new RegExp('\\[' + tBoxName + '\]\\[\]');

    for (var i = 0; i < allInputs.length; i++) {
        if (allInputs[i].type != 'checkbox') continue;
        if (allInputs[i].name.match(exp1)) {
            allUsedefaults.push(allInputs[i]);
        }
    }
    for (var i = 0; i < allUsedefaults.length; i++) {
        allUsedefaults[i].checked = tButton.checked;
    }
}
</script>


Dan krijg ik een javascript error:
']' wordt verwacht in reguliere expressie

[ Voor 94% gewijzigd door Verwijderd op 26-11-2004 14:49 ]


  • crisp
  • Registratie: Februari 2000
  • Laatst online: 14:55

crisp

Devver

Pixelated

ik had de rest van de code ook niet doorgelezen 8)7

zoiets dus:
JavaScript:
1
var exp1 = new RegExp(tBoxName + '\\[\d+\]');


maar ik neem aan dat het idee wel duidelijk is. Dit kan dus niet met de / / constructor.
Eventueel zou je nog ^ kunnen toevoegen om echt vanaf het begin te matchen. global match is niet nodig omdat je enkel wilt weten of er ueberhaupt een match is, derhalve kan je ook beter test() gebruiken ipv match().

[ Voor 33% gewijzigd door crisp op 26-11-2004 14:48 ]

Intentionally left blank


Verwijderd

Topicstarter
Nu heb ik het als volgt aangepast:

code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script type="text/javascript">
function checkAll(tButton, tBoxName) {
    var allInputs = document.forms[0].getElementsByTagName("input");
    var allUsedefaults = new Array();
    var exp1 = new RegExp(tBoxName + '\\[\d+\]');

    for (var i = 0; i < allInputs.length; i++) {
        if (allInputs[i].type != 'checkbox') continue;
        if (allInputs[i].name.match(exp1)) {
            allUsedefaults.push(allInputs[i]);
        }
    }
    for (var i = 0; i < allUsedefaults.length; i++) {
        allUsedefaults[i].checked = tButton.checked;
    }
}
</script>


Nu krijg ik geen foutmeldingen, maar de bedoelde rijtjes worden niet geselecteerd!

Ik heb even het totale script aangepast, zo zou het naar mijn idee wel moeten werken (copoy paste in een leeg bestandje om zelf te testen). Ik krijg geen foutmeldingen, maar er gebeurt niets ...

code:
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
<!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=iso-8859-1" />
<title>test</title>
</head>

<body>
<script type="text/javascript">
function checkAll(tButton, tBoxName) {
    var allInputs       = document.forms[0].getElementsByTagName("input");
    var allUsedefaults  = new Array();
    var exp1            = new RegExp(tBoxName + '\\[\d*\]');

    for (var i = 0; i < allInputs.length; i++) {
        if (allInputs[i].type != 'checkbox') continue;
        if (allInputs[i].name.match(exp1)) {
            allUsedefaults.push(allInputs[i]);
        }
    }
    for (var i = 0; i < allUsedefaults.length; i++) {
        allUsedefaults[i].checked = tButton.checked;
    }
}
</script>
<form action="<?=$_SERVER['PHP_SELF'];?>" method="post" name="frmTest" id="frmTest">
<table border="0" cellspacing="0" cellpadding="5">
  <tr>
    <td><strong>alles selecteren: </strong></td>
    <td bgcolor="#CCCCCC"><input name="btnToggle" type="checkbox" id="btnToggle" value="true" onclick="checkAll(this, 'chkTestbox');" /></td>
    <td><input name="btnToggle2" type="checkbox" id="btnToggle2" value="true" onclick="checkAll(this, 'chkTestbox2');" /></td>
  </tr>
  <tr>
    <td>optie 1 </td>
    <td bgcolor="#CCCCCC"><input name="chkTestbox[0]" type="checkbox" id="chkTestbox1" value="1" /></td>
    <td><input name="chkTestbox2[]" type="checkbox" id="chkTestbox1" value="1" /></td>
  </tr>
  <tr>
    <td>optie 2 </td>
    <td bgcolor="#CCCCCC"><input name="chkTestbox[1]" type="checkbox" id="chkTestbox2" value="2" /></td>
    <td><input name="chkTestbox2[]" type="checkbox" id="chkTestbox2" value="2" /></td>
  </tr>
  <tr>
    <td>optie 3 </td>
    <td bgcolor="#CCCCCC"><input name="chkTestbox[2]" type="checkbox" id="chkTestbox3" value="3" /></td>
    <td><input name="chkTestbox2[]" type="checkbox" id="chkTestbox3" value="3" /></td>
  </tr>
  <tr>
    <td>optie 4 </td>
    <td bgcolor="#CCCCCC"><input name="chkTestbox[3]" type="checkbox" id="chkTestbox4" value="4" /></td>
    <td><input name="chkTestbox2[]" type="checkbox" id="chkTestbox4" value="4" /></td>
  </tr>
  <tr>
    <td>optie 5 </td>
    <td bgcolor="#CCCCCC"><input name="chkTestbox[4]" type="checkbox" id="chkTestbox5" value="5" /></td>
    <td><input name="chkTestbox2[]" type="checkbox" id="chkTestbox5" value="5" /></td>
  </tr>
  <tr>
    <td><strong>niet mee geselecteerd: </strong></td>
    <td><input name="chkNiet" type="checkbox" id="chkTestbox5" value="100" /></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><input type="submit" name="Submit" value="Submit" /></td>
    <td>&nbsp;</td>
  </tr>
  <tr valign="top">
    <td>Resultaat formulier:</td>
    <td>&nbsp;</td>
    <td><pre><? print_r($_POST); ?></pre> </td>
  </tr>
</table>
</form>
</body>
</html>

[ Voor 72% gewijzigd door Verwijderd op 26-11-2004 15:03 ]


Verwijderd

Ok, heb even wat lopen spelen... met het volgende resultaat:

code:
1
2
3
4
5
6
7
8
9
function checkAll(tButton, tBoxName){
    var pattern = new RegExp('^' + tBoxName + '\\\[\\\d+\\]$');
    var obj = tButton.form;
    for(var i = 0; i < obj.length; i++){
        if(obj.elements[i].type == 'checkbox' && obj.elements[i].name.match(pattern)){
        obj.elements[i].checked = true;
        }
    }
}


Ik geloof dat dit is wat je wou hebben?

Verwijderd

Array::push is volgens mij alleen netscape (crisp? jij weet zulke dingen)

Verwijderd

Topicstarter
adhv van de laatste aanwijzing is het eindelijk helemaal gelukt !!!
Fantastisch, bedankt! De vakjes moesten ook nog uitgeschakeld kunnen worden en ook veldnamen met lege brackets moesten getoggled kunnen worden.

Uiteindelijk:
code:
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
<!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=iso-8859-1" />
<title>test</title>
</head>

<body>
<script type="text/javascript">
function checkAll(tButton, tBoxName) {
    var allInputs       = document.forms[0].getElementsByTagName("input");
    var allUsedefaults  = new Array();
    var exp1            = new RegExp('^' + tBoxName + '\\\[\\\d*\\]$');
    for (var i = 0; i < allInputs.length; i++) {
        if (allInputs[i].type != 'checkbox') continue;
        if (allInputs[i].name.match(exp1)) {
            allUsedefaults.push(allInputs[i]);
        }
    }
    for (var i = 0; i < allUsedefaults.length; i++) {
        allUsedefaults[i].checked = tButton.checked;
    }
}

</script>
<form action="<?=$_SERVER['PHP_SELF'];?>" method="post" name="frmTest" id="frmTest">
<table border="0" cellspacing="0" cellpadding="5">
  <tr>
    <td><strong>alles selecteren: </strong></td>
    <td bgcolor="#CCCCCC"><input name="btnToggle" type="checkbox" id="btnToggle" value="true" onclick="checkAll(this, 'chkTestbox');" /></td>
    <td><input name="btnToggle2" type="checkbox" id="btnToggle2" value="true" onclick="checkAll(this, 'chkTestbox2');" /></td>
  </tr>
  <tr>
    <td>optie 1 </td>
    <td bgcolor="#CCCCCC"><input name="chkTestbox[1]" type="checkbox" id="chkTestbox1" value="1" /></td>
    <td><input name="chkTestbox2[]" type="checkbox" id="chkTestbox1" value="1" /></td>
  </tr>
  <tr>
    <td>optie 2 </td>
    <td bgcolor="#CCCCCC"><input name="chkTestbox[2]" type="checkbox" id="chkTestbox2" value="2" /></td>
    <td><input name="chkTestbox2[]" type="checkbox" id="chkTestbox2" value="2" /></td>
  </tr>
  <tr>
    <td>optie 3 </td>
    <td bgcolor="#CCCCCC"><input name="chkTestbox[3]" type="checkbox" id="chkTestbox3" value="3" /></td>
    <td><input name="chkTestbox2[]" type="checkbox" id="chkTestbox3" value="3" /></td>
  </tr>
  <tr>
    <td>optie 4 </td>
    <td bgcolor="#CCCCCC"><input name="chkTestbox[4]" type="checkbox" id="chkTestbox4" value="4" /></td>
    <td><input name="chkTestbox2[]" type="checkbox" id="chkTestbox4" value="4" /></td>
  </tr>
  <tr>
    <td>optie 5 </td>
    <td bgcolor="#CCCCCC"><input name="chkTestbox[5]" type="checkbox" id="chkTestbox5" value="5" /></td>
    <td><input name="chkTestbox2[]" type="checkbox" id="chkTestbox5" value="5" /></td>
  </tr>
  <tr>
    <td><strong>niet mee geselecteerd: </strong></td>
    <td><input name="chkNiet" type="checkbox" id="chkTestbox5" value="100" /></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><input type="submit" name="Submit" value="Submit" /></td>
    <td>&nbsp;</td>
  </tr>
  <tr valign="top">
    <td>Resultaat formulier:</td>
    <td>&nbsp;</td>
    <td><pre><? print_r($_POST); ?></pre> </td>
  </tr>
</table>
</form>
</body>
</html>
Pagina: 1