Formulier inklappen en uitklappen op listbox selection

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Mar groen

mar groen

07/08/2014 17:09:17
Quote Anchor link
hallo ik heb een formulier. gegenereerd met de phpformgenerator van sourceforge
echter ik wil deel van het formulier onzichtbaar maken en laten zien wanneer iemand het juiste selecteert.
de volgende code is mijn formulier tot nu toe echter het werkt gewoon niet :/
kan iemand mij er mee helpen

http://pastebin.com/VaCUuNFe
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349

        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
        <html>
        <head>
                <title>inschrijven Voor bingo - created by phpFormGenerator</title>
                <meta http-equiv="content-type" content="text/html; charset=UTF-8"><link href="style.css" rel="stylesheet" type="text/css">
                <!-- calendar stuff -->
                      <link rel="stylesheet" type="text/css" href="calendar/calendar-blue2.css" />
                      <script type="text/javascript" src="calendar/calendar.js"></script>
                      <script type="text/javascript" src="calendar/calendar-en.js"></script>
                      <script type="text/javascript" src="calendar/calendar-setup.js"></script>
                <!-- END calendar stuff -->
 
            <!-- expand/collapse function -->
            <SCRIPT type=text/javascript>
                <!--
                function collapseElem(obj)
                {
                        var el = document.getElementById(obj);
                        el.style.display = 'none';
                }
 
 
                function expandElem(obj)
                {
                        var el = document.getElementById(obj);
                        el.style.display = '';
                }
 
 
                //-->
                </SCRIPT>
                <!-- expand/collapse function -->
 
 
                <!-- expand/collapse function -->
                    <SCRIPT type=text/javascript>
                        <!--
 
                        // collapse all elements, except the first one
                        function collapseAll()
                        {
                                var numFormPages = 2;
 
                                for(i=2; i <= numFormPages; i++)
                                {
                                        currPageId = ('mainForm_' + i);
                                        collapseElem(currPageId);
                                }
                        }
 
 
                        //-->
                        </SCRIPT>
                <!-- expand/collapse function -->
 
 
                 <!-- validate -->
                <SCRIPT type=text/javascript>
                <!--
                        function validateField(fieldId, fieldBoxId, fieldType, required)
                        {
                                fieldBox = document.getElementById(fieldBoxId);
                                fieldObj = document.getElementById(fieldId);
 
                                if(fieldType == 'text'  ||  fieldType == 'textarea'  ||  fieldType == 'password'  ||  fieldType == 'file'  ||  fieldType == 'phone'  || fieldType == 'website')
                                {      
                                        if(required == 1 && fieldObj.value == '')
                                        {
                                                fieldObj.setAttribute("class","mainFormError");
                                                fieldObj.setAttribute("className","mainFormError");
                                                fieldObj.focus();
                                                return false;                                  
                                        }
 
                                }
 
 
                                else if(fieldType == 'menu'  || fieldType == 'country'  || fieldType == 'state')
                                {      
                                        if(required == 1 && fieldObj.selectedIndex == 0)
                                        {                              
                                                fieldObj.setAttribute("class","mainFormError");
                                                fieldObj.setAttribute("className","mainFormError");
                                                fieldObj.focus();
                                                return false;                                  
                                        }
 
                                }
 
 
                                else if(fieldType == 'email')
                                {      
                                        if((required == 1 && fieldObj.value=='')  ||  (fieldObj.value!=''  && !validate_email(fieldObj.value)))
                                        {                              
                                                fieldObj.setAttribute("class","mainFormError");
                                                fieldObj.setAttribute("className","mainFormError");
                                                fieldObj.focus();
                                                return false;                                  
                                        }
 
                                }
 
 
 
                        }
 
                        function validate_email(emailStr)
                        {              
                                apos=emailStr.indexOf("@");
                                dotpos=emailStr.lastIndexOf(".");
 
                                if (apos<1||dotpos-apos<2)
                                {
                                        return false;
                                }
                                else
                                {
                                        return true;
                                }
                        }
 
 
                        function validateDate(fieldId, fieldBoxId, fieldType, required,  minDateStr, maxDateStr)
                        {
                                retValue = true;
 
                                fieldBox = document.getElementById(fieldBoxId);
                                fieldObj = document.getElementById(fieldId);  
                                dateStr = fieldObj.value;
 
 
                                if(required == 0  && dateStr == '')
                                {
                                        return true;
                                }
 
 
                                if(dateStr.charAt(2) != '/'  || dateStr.charAt(5) != '/' || dateStr.length != 10)
                                {
                                        retValue = false;
                                }      
 
                                else    // format's okay; check max, min
                                {
                                        currDays = parseInt(dateStr.substr(0,2),10) + parseInt(dateStr.substr(3,2),10)*30  + parseInt(dateStr.substr(6,4),10)*365;
                                        //alert(currDays);
 
                                        if(maxDateStr != '')
                                        {
                                                maxDays = parseInt(maxDateStr.substr(0,2),10) + parseInt(maxDateStr.substr(3,2),10)*30  + parseInt(maxDateStr.substr(6,4),10)*365;
                                                //alert(maxDays);
                                                if(currDays > maxDays)
                                                        retValue = false;
                                        }
 
                                        if(minDateStr != '')
                                        {
                                                minDays = parseInt(minDateStr.substr(0,2),10) + parseInt(minDateStr.substr(3,2),10)*30  + parseInt(minDateStr.substr(6,4),10)*365;
                                                //alert(minDays);
                                                if(currDays < minDays)
                                                        retValue = false;
                                        }
                                }
 
                                if(retValue == false)
                                {
                                        fieldObj.setAttribute("class","mainFormError");
                                        fieldObj.setAttribute("className","mainFormError");
                                        fieldObj.focus();
                                        return false;
                                }
                        }
                //-->
                </SCRIPT>
                <!-- end validate -->
 
 
 
 
        </head>
 
        <body onLoad="collapseAll()">
 
        <div id="mainForm">
 
 
 
 
                <div id="formHeader">
                                <h2 class="formInfo">inschrijven Voor bingo</h2>
                                <p class="formInfo">Hier kunt u uzelf inschrijven voor de Wijk Bingo.
 
Deze bingo is voor Personen vanaf 16 jaar
 
Vanwege ruimte gebrek vragen wij of alleen mensen kunnen komen die ook echt komen spelen.</p>
                </div>
 
 
                <BR/><!-- begin form -->
                <form method=post enctype=multipart/form-data action=processor.php onSubmit="return validatePage2();"><ul class=mainForm id="mainForm_1">
 
                                <li class="mainForm" id="fieldBox_1">
                                        <label class="formFieldQuestion">Achternaam&nbsp;*&nbsp;<a class=info href=#><img src=imgs/tip_small.png border=0><span class=infobox>Dit is voor het ophalen van de tickets op de Bingo</span></a></label><input class=mainForm type=text name=field_1 id=field_1 size='20' value=''></li>
 
                                <li class="mainForm" id="fieldBox_2">
                                        <label class="formFieldQuestion">Huisnummer&nbsp;*&nbsp;<a class=info href=#><img src=imgs/tip_small.png border=0><span class=infobox>dit is voor onze administratie</span></a></label><input class=mainForm type=text name=field_2 id=field_2 size='20' value=''></li>
 
                                <li class="mainForm" id="fieldBox_3">
                                        <label class="formFieldQuestion">Straat&nbsp;*&nbsp;<a class=info href=#><img src=imgs/tip_small.png border=0><span class=infobox>dit is voor onze administratie</span></a></label><input class=mainForm type=text name=field_3 id=field_3 size='20' value=''></li>
              
              
                <!-- end of this page -->
 
                <!-- page validation -->
                <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
                <SCRIPT type=text/javascript>
                <!--
                        function validatePage1()
                        {
                                retVal = true;
                                if (validateField('field_1','fieldBox_1','text',1) == false)
 retVal=false;
if (validateField('field_2','fieldBox_2','text',1) == false)
 retVal=false;
if (validateField('field_3','fieldBox_3','text',1) == false)
 retVal=false;
 
                                if(retVal == false)
                                {
                                        alert('Please correct the errors.  Fields marked with an asterisk (*) are required');
                                        return false;
                                }
                                return retVal;
                        }
                //-->
                </SCRIPT>
 <script type="text/javascript">
 
function display(obj,id1,id2,id3) {
txt = obj.options[obj.selectedIndex].value;

document.getElementById(formfield1).style.display = 'none';
document.getElementById(formfield2).style.display = 'none';
document.getElementById(formfield3).style.display = 'none';
if ( txt.match(id1) ) {
document.getElementById(formfield1).style.display = 'block';

}
if ( txt.match(id2) ) {
document.getElementById(formfield2).style.display = 'block';
document.getElementById(formfield1).style.display = 'block';

}
if ( txt.match(id3) ) {
document.getElementById(formfield2).style.display = 'block';
document.getElementById(formfield1).style.display = 'block';
document.getElementById(formfield3).style.display = 'block';

}
}
</script>
                <!-- end page validaton -->
 
 
 
                <!-- next page buttons --><li class="mainForm">
                                        <input type=button onclick="if (validatePage1()) { collapseElem('mainForm_1'); expandElem('mainForm_2');}" class="mainForm" value="Go to page 2"/>    
                                </li>
                <!-- close the display stuff for this page -->
                </ul><ul class=mainForm id="mainForm_2">
 
                                <li class="mainForm" id="fieldBox_4">
                                        <label class="formFieldQuestion">Met hoeveel extra personen komt u spelen? (exclusief uzelf)&nbsp;*&nbsp;<a class=info href=#><img src=imgs/tip_small.png border=0><span class=infobox>met hoeveel extra personen komt u spelen exclusief uzelf</span></a></label><select onchange="display(this,0,1,2,3);" class=mainForm name=field_4 id=field_4><option value="0">0</option><option value="1">1</option><option value="2">2</option><option value="3">3</option></select></li>
                                      
 
 
                                <li class="mainForm" id="fieldBox_5">
                                        <label class="formFieldQuestion">Met hoeveel kaarten speelt u zelf?&nbsp;*&nbsp;<a class=info href=#><img src=imgs/tip_small.png border=0><span class=infobox>Met hoeveel kaarten wilt u zelf meespelen?
een kaartje kost 2,50 euro</span></a></label><span><input class=mainForm type=radio name=field_5 id=field_5_option_1 value="1" /><label class=formFieldOption for="field_5_option_1" checked=1>1</label><input class=mainForm type=radio name=field_5 id=field_5_option_2 value="2" /><label class=formFieldOption for="field_5_option_2">2</label><input class=mainForm type=radio name=field_5 id=field_5_option_3 value="3" /><label class=formFieldOption for="field_5_option_3">3</label></span></li>
                <tbody id="formfield1" style="display: none;">
                                <li class="mainForm" id="fieldBox_6" >
                                        <label class="formFieldQuestion">Met hoeveel kaarten speelt speler 2&nbsp;*&nbsp;<a class=info href=#><img src=imgs/tip_small.png border=0><span class=infobox>met hoeveel kaarten speelt speler 2 mee?
een kaartje kost 2,50 euro</span></a></label><span><input class=mainForm type=radio name=field_6 id=field_6_option_1 value="1" /><label class=formFieldOption for="field_6_option_1" >1</label><input class=mainForm type=radio name=field_6 id=field_6_option_2 value="2" /><label class=formFieldOption for="field_6_option_2">2</label><input class=mainForm type=radio name=field_6 id=field_6_option_3 value="3" /><label class=formFieldOption for="field_6_option_3">3</label></span></li>
</tbody>
<tbody id="formfield2" style="display: none;">
                                <li class="mainForm" id="fieldBox_7" >
                                        <label class="formFieldQuestion">Met hoeveel kaarten speelt speler 3&nbsp;*&nbsp;<a class=info href=#><img src=imgs/tip_small.png border=0><span class=infobox>met hoeveel kaarten speelt speler 3 mee?
een kaartje kost 2,50 euro</span></a></label><span><input class=mainForm type=radio name=field_7 id=field_7_option_1 value="1" /><label class=formFieldOption for="field_7_option_1" >1</label><input class=mainForm type=radio name=field_7 id=field_7_option_2 value="2" /><label class=formFieldOption for="field_7_option_2">2</label><input class=mainForm type=radio name=field_7 id=field_7_option_3 value="3" /><label class=formFieldOption for="field_7_option_3">3</label></span></li>
</tbody>
<tbody id="formfield3" style="display: none;">
                                <li class="mainForm" id="fieldBox_8">
                                        <label class="formFieldQuestion">Met hoeveel kaarten speelt speler 4&nbsp;*&nbsp;<a class=info href=#><img src=imgs/tip_small.png border=0><span class=infobox>met hoeveel kaarten speelt speler 4 mee?
een kaartje kost 2,50 euro</span></a></label><span><input class=mainForm type=radio name=field_8 id=field_8_option_1 value="1" /><label class=formFieldOption for="field_8_option_1" >1</label><input class=mainForm type=radio name=field_8 id=field_8_option_2 value="2" /><label class=formFieldOption for="field_8_option_2">2</label><input class=mainForm type=radio name=field_8 id=field_8_option_3 value="3" /><label class=formFieldOption for="field_8_option_3">3</label></span></li>
                </tbody>
              
                <!-- end of this page -->
 
                <!-- page validation -->
 
 
                <SCRIPT type=text/javascript>
                <!--
                        function validatePage2()
                        {
                                retVal = true;
                                if (validateField('field_4','fieldBox_4','menu',1) == false)
 retVal=false;
if (validateField('field_5','fieldBox_5','radio',1) == false)
 retVal=false;
if (validateField('field_6','fieldBox_6','radio',1) == false)
 retVal=false;
if (validateField('field_7','fieldBox_7','radio',1) == false)
 retVal=false;
if (validateField('field_8','fieldBox_8','radio',1) == false)
 retVal=false;
 
                                if(retVal == false)
                                {
                                        alert('Please correct the errors.  Fields marked with an asterisk (*) are required');
                                        return false;
                                }
                                return retVal;
                        }
                //-->
                </SCRIPT>
 
                <!-- end page validaton -->
 
 
 
                <!-- next page buttons --><li class="mainForm">
                                                                <label class="formFieldQuestion">
                                                                        Type the following:&nbsp;<a class=info href=#><img src=imgs/tip_small.png border=0><span class=infobox>For security purposes, please type the letters in the image.</span></a><BR><img src="CaptchaSecurityImages.php" />
                                                                </label>
 
                                                                <input id="captchaForm" name="security_code" class="mainForm" type="text"/>
                                                        </li><li class="mainForm">
                                        <input id="saveForm" class="mainForm" type="submit" value="Submit" />
                                </li>
 
                        </form>
                        <!-- end of form -->
                <!-- close the display stuff for this page -->
                </ul></div><div id="footer"><p class="footer"><a class=footer href=http://phpformgen.sourceforge.net>Generated by phpFormGenerator</a></p></div>
 
        </body>
        </html>


in mijn formulier selecteert iemand het aantal spelers die diegene extra meeneemt. als 1 iemand extra meegenomen word dan moet de selectievakjes voor het aantal kaartjes voor die persoon zichtbaar worden.
als iemand 2 extra personen meeneemt dan moet vak 1 en 2 zichtbaar worden
3 extra personen vak 1 2 en 3

ik hoop dat iemand mij ermee kan helpen. alvast bedankt

ps. sorry als dit de verkeerde categorie is
Gewijzigd op 07/08/2014 18:01:28 door Mar groen
 
PHP hulp

PHP hulp

08/11/2024 09:35:51
 
- Ariën -
Beheerder

- Ariën -

07/08/2014 17:48:21
Quote Anchor link
Wat zegt de foutconsole van Chrome of Firefox?
 
Mar groen

mar groen

07/08/2014 17:55:50
Quote Anchor link
TypeError: obj.options is not a function
Gewijzigd op 07/08/2014 17:58:58 door mar groen
 
Thomas van Broekhoven

Thomas van Broekhoven

07/08/2014 18:00:22
Quote Anchor link
Sowieso moet je regel 243 vervangen:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
warn(obj.options[obj.selectedIndex].value;)


moet worden:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
warn(obj.options[obj.selectedIndex].value);
Gewijzigd op 07/08/2014 18:01:06 door Thomas van Broekhoven
 
Mar groen

mar groen

07/08/2014 18:00:56
Quote Anchor link
die warns heb ik er uit gehaalt dat was voor het testen :)
 
Thomas van Broekhoven

Thomas van Broekhoven

07/08/2014 18:03:57
Quote Anchor link
Waarom gebruik je niet gewoon een jquery? En dan onchange van je checkbox of wat je ook precies wil selecten een toggle of show/hide uitvoeren?

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
$('.classvanjecheckbox:checkbox').change(function(){
    $( "#idvanwatjewiltuitklappen" ).toggle();
});
 
Mar groen

mar groen

07/08/2014 18:07:55
Quote Anchor link
het is geen checkbox het is een dropdown list en ik zou niet weten hoe ik dat moet gebruiken
zou je een voorbeeld kunnen geven?
Gewijzigd op 07/08/2014 18:11:07 door mar groen
 
- SanThe -

- SanThe -

07/08/2014 18:17:52
Quote Anchor link
function expandElem(obj)
{
var el = document.getElementById(obj);
el.style.display = '';
}

Display is leeg?
Moet dat niet 'block' zijn?
 
Mar groen

mar groen

07/08/2014 18:26:25
Quote Anchor link
dat is van de form generator zelf. ik zou niet weten hoe dat werkt maar het werkt

Toevoeging op 07/08/2014 18:35:21:

ok. met wat hulp van jullie en het verdere internet heb ik het werkend gekregen er waren wat functies in gebruik die niet kunnen
en de tip van de error console is echt cool. deze topic kan als Opgelost gemarkeert worden :)

heel erg bedankt voor jullie hulp :D
 
- Ariën -
Beheerder

- Ariën -

07/08/2014 18:59:21
Quote Anchor link
Graag gedaan :-)
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.