Meerdere input boxen in een form en verzenden als array
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- Education -->
<div class="form with-line">
<h5>Studies</h5>
<div class="form-inside">
<!-- Add Education -->
<div class="form boxed box-to-clone education-box">
<a href="#" class="close-form remove-box button"><i class="fa fa-close"></i></a>
<input class="search-field" name="data[school]" type="text" placeholder="Schoolnaam" value=""/>
<input class="search-field" name="data[type]" type="text" placeholder="Type diploma bvb A2" value=""/>
<input class="search-field" name="data[start]" type="text" placeholder="Startdatum" value=""/>
<input class="search-field" name="data[einde]" type="text" placeholder="Einddatum" value=""/>
</div>
<a href="#" class="button gray add-education add-box"><i class="fa fa-plus-circle"></i> Studies toevoegen</a>
</div>
</div>
<div class="form with-line">
<h5>Studies</h5>
<div class="form-inside">
<!-- Add Education -->
<div class="form boxed box-to-clone education-box">
<a href="#" class="close-form remove-box button"><i class="fa fa-close"></i></a>
<input class="search-field" name="data[school]" type="text" placeholder="Schoolnaam" value=""/>
<input class="search-field" name="data[type]" type="text" placeholder="Type diploma bvb A2" value=""/>
<input class="search-field" name="data[start]" type="text" placeholder="Startdatum" value=""/>
<input class="search-field" name="data[einde]" type="text" placeholder="Einddatum" value=""/>
</div>
<a href="#" class="button gray add-education add-box"><i class="fa fa-plus-circle"></i> Studies toevoegen</a>
</div>
</div>
Als ik nu op de knop Studies toevoegen klik krijg ik daaronder nog zo een box, enz... Ik kan dus meerdere boxen op de pagina zetten.
Maar als ik nu het form wil posten doe ik dit:
Code (php)
1
2
3
4
5
2
3
4
5
$result = $_POST['data'];
echo '<pre>';
print_r($result);
echo '</pre>';
echo '<pre>';
print_r($result);
echo '</pre>';
Het werkt helemaal niet. De waarden komen niet mee en ik krijg maar 1 array met enkel de eerste box.
Wat gaat er fout?
Code (php)
1
name="data[][school]"
Is een beetje hetzelfde als in PHP:
Code (php)
1
2
3
2
3
<?php
$array[] = 'een nieuw element aan de array';
?>
$array[] = 'een nieuw element aan de array';
?>
Gewijzigd op 20/09/2016 19:54:26 door Frank Nietbelangrijk
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- Education -->
<div class="form with-line">
<h5>Studies</h5>
<div class="form-inside">
<!-- Add Education -->
<div class="form boxed box-to-clone education-box">
<a href="#" class="close-form remove-box button"><i class="fa fa-close"></i></a>
<input class="search-field" name="data[][school]" type="text" placeholder="Schoolnaam" value=""/>
<input class="search-field" name="data[][type]" type="text" placeholder="Type diploma bvb A2" value=""/>
<input class="search-field" name="data[][start]" type="text" placeholder="Startdatum" value=""/>
<input class="search-field" name="data[][einde]" type="text" placeholder="Einddatum" value=""/>
</div>
<a href="#" class="button gray add-education add-box"><i class="fa fa-plus-circle"></i> Studies toevoegen</a>
</div>
</div>
<div class="form with-line">
<h5>Studies</h5>
<div class="form-inside">
<!-- Add Education -->
<div class="form boxed box-to-clone education-box">
<a href="#" class="close-form remove-box button"><i class="fa fa-close"></i></a>
<input class="search-field" name="data[][school]" type="text" placeholder="Schoolnaam" value=""/>
<input class="search-field" name="data[][type]" type="text" placeholder="Type diploma bvb A2" value=""/>
<input class="search-field" name="data[][start]" type="text" placeholder="Startdatum" value=""/>
<input class="search-field" name="data[][einde]" type="text" placeholder="Einddatum" value=""/>
</div>
<a href="#" class="button gray add-education add-box"><i class="fa fa-plus-circle"></i> Studies toevoegen</a>
</div>
</div>
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
echo '<pre>';
print_r($_POST['data']);
echo '</pre>';
// alternatief
$mailData = '';
for($i = 0; $i < count($_POST['data']); $i++) {
$mailData .= '#' . $_POST['school'][$i] . ' | ';
$mailData .= $_POST['type'][$i] . ' | ';
$mailData .= $_POST['start'][$i] . "<br>\n";
echo $mailData;
print_r($_POST['data']);
echo '</pre>';
// alternatief
$mailData = '';
for($i = 0; $i < count($_POST['data']); $i++) {
$mailData .= '#' . $_POST['school'][$i] . ' | ';
$mailData .= $_POST['type'][$i] . ' | ';
$mailData .= $_POST['start'][$i] . "<br>\n";
echo $mailData;
Gewijzigd op 20/09/2016 20:05:45 door Brecht S
Ik heb data op de eerste [school] maar wel op een volledig verkeerde manier.
resultaat:
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
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
Array
(
[0] => Array
(
[school] => piopiop
)
[1] => Array
(
[type] => oipiopoi
)
[2] => Array
(
[start] => poipiopiop
)
[3] => Array
(
[einde] => ppppppp
)
[4] => Array
(
[school] =>
)
[5] => Array
(
[type] =>
)
[6] => Array
(
[start] =>
)
[7] => Array
(
[einde] =>
)
)
(
[0] => Array
(
[school] => piopiop
)
[1] => Array
(
[type] => oipiopoi
)
[2] => Array
(
[start] => poipiopiop
)
[3] => Array
(
[einde] => ppppppp
)
[4] => Array
(
[school] =>
)
[5] => Array
(
[type] =>
)
[6] => Array
(
[start] =>
)
[7] => Array
(
[einde] =>
)
)
Komt die box dan wel tussen je bestaande <form> en </form> elementen ? Want anders is het logisch dat de data niet meegestuurd wordt
Hoe verander ik de array dat [0] de 4 velden (school, type, start, einde) heeft en daarna dan [1], [2], enz... ?
Toevoeging op 20/09/2016 20:29:43:
Nu zie ik dat die data dus wel meekomt. Waarschijnlijk een refresh foutje:
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
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
Array
(
[0] => Array
(
[school] => zeerzrze
)
[1] => Array
(
[type] => rzerzerr
)
[2] => Array
(
[start] => etretreytr
)
[3] => Array
(
[einde] => yttryutuytuytu
)
[4] => Array
(
[school] => piopiopio
)
[5] => Array
(
[type] => uiyiiy
)
[6] => Array
(
[start] => tyutyutyu
)
[7] => Array
(
[einde] => rtyrytry
)
[8] => Array
(
[school] =>
)
[9] => Array
(
[type] =>
)
[10] => Array
(
[start] =>
)
[11] => Array
(
[einde] =>
)
)
(
[0] => Array
(
[school] => zeerzrze
)
[1] => Array
(
[type] => rzerzerr
)
[2] => Array
(
[start] => etretreytr
)
[3] => Array
(
[einde] => yttryutuytuytu
)
[4] => Array
(
[school] => piopiopio
)
[5] => Array
(
[type] => uiyiiy
)
[6] => Array
(
[start] => tyutyutyu
)
[7] => Array
(
[einde] => rtyrytry
)
[8] => Array
(
[school] =>
)
[9] => Array
(
[type] =>
)
[10] => Array
(
[start] =>
)
[11] => Array
(
[einde] =>
)
)
Dat zijn dus 2 van die forms.
Waarom is die laatste leeg?
Toevoeging op 20/09/2016 21:49:30:
Eigenlijk zou ik dit nodig hebben:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- Education -->
<div class="form with-line">
<h5>Studies</h5>
<div class="form-inside">
<!-- Add Education -->
<div class="form boxed box-to-clone education-box">
<a href="#" class="close-form remove-box button"><i class="fa fa-close"></i></a>
<input class="search-field" name="data[0][school]" type="text" placeholder="Schoolnaam" value=""/>
<input class="search-field" name="data[0][type]" type="text" placeholder="Type diploma bvb A2" value=""/>
<input class="search-field" name="data[0][start]" type="text" placeholder="Startdatum" value=""/>
<input class="search-field" name="data[0][einde]" type="text" placeholder="Einddatum" value=""/>
</div>
<a href="#" class="button gray add-education add-box"><i class="fa fa-plus-circle"></i> Studies toevoegen</a>
</div>
</div>
<div class="form with-line">
<h5>Studies</h5>
<div class="form-inside">
<!-- Add Education -->
<div class="form boxed box-to-clone education-box">
<a href="#" class="close-form remove-box button"><i class="fa fa-close"></i></a>
<input class="search-field" name="data[0][school]" type="text" placeholder="Schoolnaam" value=""/>
<input class="search-field" name="data[0][type]" type="text" placeholder="Type diploma bvb A2" value=""/>
<input class="search-field" name="data[0][start]" type="text" placeholder="Startdatum" value=""/>
<input class="search-field" name="data[0][einde]" type="text" placeholder="Einddatum" value=""/>
</div>
<a href="#" class="button gray add-education add-box"><i class="fa fa-plus-circle"></i> Studies toevoegen</a>
</div>
</div>
Cloned form:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- Education -->
<div class="form with-line">
<h5>Studies</h5>
<div class="form-inside">
<!-- Add Education -->
<div class="form boxed box-to-clone education-box">
<a href="#" class="close-form remove-box button"><i class="fa fa-close"></i></a>
<input class="search-field" name="data[1][school]" type="text" placeholder="Schoolnaam" value=""/>
<input class="search-field" name="data[1][type]" type="text" placeholder="Type diploma bvb A2" value=""/>
<input class="search-field" name="data[1][start]" type="text" placeholder="Startdatum" value=""/>
<input class="search-field" name="data[1][einde]" type="text" placeholder="Einddatum" value=""/>
</div>
<a href="#" class="button gray add-education add-box"><i class="fa fa-plus-circle"></i> Studies toevoegen</a>
</div>
</div>
<div class="form with-line">
<h5>Studies</h5>
<div class="form-inside">
<!-- Add Education -->
<div class="form boxed box-to-clone education-box">
<a href="#" class="close-form remove-box button"><i class="fa fa-close"></i></a>
<input class="search-field" name="data[1][school]" type="text" placeholder="Schoolnaam" value=""/>
<input class="search-field" name="data[1][type]" type="text" placeholder="Type diploma bvb A2" value=""/>
<input class="search-field" name="data[1][start]" type="text" placeholder="Startdatum" value=""/>
<input class="search-field" name="data[1][einde]" type="text" placeholder="Einddatum" value=""/>
</div>
<a href="#" class="button gray add-education add-box"><i class="fa fa-plus-circle"></i> Studies toevoegen</a>
</div>
</div>
Enz...
Ik denk dat mijn array dan wel goed komt. Maar ik zie niet hoe ik dit kan doen hier.
Hoe kan je die cijfers [0], [1], enz toewijzen aan een gecloonde gedeelte?
Gewijzigd op 20/09/2016 20:30:16 door Brecht S
Kan ik je pagina ergens bekijken?
Gewijzigd op 21/09/2016 12:24:35 door Frank Nietbelangrijk
Heb je de link via pm doorgestuurd.
Gewijzigd op 20/09/2016 23:14:03 door Brecht S
Wanneer je eenduidige velden hebt, say "naam[]" e.d. dan heb je geen nummers nodig. Is je array multidimensionaal wel, anders krijg je dit:
naam[0][voornaam]
naam[1][achternaam]
etc etc.
Je kunt het uiteraard wel omdraaien, dan heb je dat probleem niet. De array krijgt dan alleen een wat vreemde vorm:
naam[voornaam][]
naam[achternaam][]
Dit leidt tot:
naam[voornaam][0]
naam[achternaam][0]
Zodra je dan opnieuw bij voornaam uitkomt nummert hij door zoals je zou willen.
En ja de array is multidimensionaal zie voorbeeld die ik gepost heb.
data[voornaam][]
data[achternaam][] etc. Dit kun je dan opvragen met een kleine aanpassing aan je eerder gegeven code:
Het zou kunnen dat jullie helemaal gelijk hebben. Ik heb nog even gekeken hoe Symfony dit doet maar die vult ook de getallen in inderdaad. Ik zou dan zoals Ben aangeeft een tellertje bijhouden, ook in javascript is dit niet al te ingewikkeld. Ik zou wel de opbouw zo houden:
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
name="data[0][school]"
name="data[0][type]"
...
name="data[1][school]"
name="data[1][type]"
name="data[0][type]"
...
name="data[1][school]"
name="data[1][type]"
Je kunt dan namelijk makkelijk door je array heen lopen:
Code (php)
Laatste opmerking:
'data' is geen goede naam. In jouw geval zou dat beter iets als 'studie' kunnen zijn.
Gewijzigd op 21/09/2016 12:26:13 door Frank Nietbelangrijk
Ben zijn idee moet ik nog eens uittesten, maar die zou automatisch nummeren. Is dat niet beter?
Toevoeging op 22/09/2016 12:19:40:
Ik heb wel nog steeds een lege waarde op het einde. Dus als er bvb 2 boxen zijn heb ik 3 lijnen maar de laatste is leeg. Er is dus altijd 1 meer dan het aantal boxen (maar dan met lege waarden). Hoe krijg ik die weg?
Ik had geprobeerd met array_pop maar dan gaat het helemaal fout.
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<form method="post">
<!-- Education -->
<div class="form with-line">
<h5>Studies</h5>
<div class="form-inside">
<!-- Add Education -->
<div class="form boxed box-to-clone education-box">
<a href="#" class="close-form remove-box button"><i class="fa fa-close"></i></a>
<input class="search-field" name="studie[school][]" type="text" placeholder="Schoolnaam" value=""/>
<input class="search-field" name="studie[type][]" type="text" placeholder="Type diploma bvb A2" value=""/>
<input class="search-field" name="studie[start][]" type="text" placeholder="Startdatum" value=""/>
<input class="search-field" name="studie[einde][]" type="text" placeholder="Einddatum" value=""/>
</div>
<a href="#" class="button gray add-education add-box"><i class="fa fa-plus-circle"></i> Studies toevoegen</a>
</div>
</div>
<div class="divider margin-top-0 padding-reset"></div>
<input type="submit" name="submit" class="button big margin-top-5" value="Opslaan">
</form>
<!-- Education -->
<div class="form with-line">
<h5>Studies</h5>
<div class="form-inside">
<!-- Add Education -->
<div class="form boxed box-to-clone education-box">
<a href="#" class="close-form remove-box button"><i class="fa fa-close"></i></a>
<input class="search-field" name="studie[school][]" type="text" placeholder="Schoolnaam" value=""/>
<input class="search-field" name="studie[type][]" type="text" placeholder="Type diploma bvb A2" value=""/>
<input class="search-field" name="studie[start][]" type="text" placeholder="Startdatum" value=""/>
<input class="search-field" name="studie[einde][]" type="text" placeholder="Einddatum" value=""/>
</div>
<a href="#" class="button gray add-education add-box"><i class="fa fa-plus-circle"></i> Studies toevoegen</a>
</div>
</div>
<div class="divider margin-top-0 padding-reset"></div>
<input type="submit" name="submit" class="button big margin-top-5" value="Opslaan">
</form>
Dit is de volledige blok die je kan clonen door op de knop met class add-box te drukken. Ik gebruik nergens anders nog een name = studie[...][]
Dit is de code voor het opvragen van de resultaten:
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
$studie = '';
for($i = 0; $i < count($_POST['studie']['school']); $i++) {
$studie .= '#' . $_POST['studie']['school'][$i] . ' | ';
$studie .= $_POST['studie']['type'][$i] . ' | ';
$studie .= $_POST['studie']['start'][$i] . ' | ';
$studie .= $_POST['studie']['einde'][$i] . "<br>\n";
}
echo $studie;
for($i = 0; $i < count($_POST['studie']['school']); $i++) {
$studie .= '#' . $_POST['studie']['school'][$i] . ' | ';
$studie .= $_POST['studie']['type'][$i] . ' | ';
$studie .= $_POST['studie']['start'][$i] . ' | ';
$studie .= $_POST['studie']['einde'][$i] . "<br>\n";
}
echo $studie;
En het resultaat geeft dus telkens een lege waarde op het einde:
Code (php)
1
2
3
2
3
#azazazazazazazaz | zezeezeze | azazaz | zezeze
#ghgfhgfh | gfhgfh | gfhgfhgfh | gfhgfhgfhgfh
# | | |
#ghgfhgfh | gfhgfh | gfhgfhgfh | gfhgfhgfhgfh
# | | |
Uiteraard is er bij het opvragen van de array met print_r ook een lege waarde.
Gewijzigd op 22/09/2016 22:38:39 door Brecht S
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
$studie = '';
for($i = 0; $i < count(array_filter($_POST['studie']['school'])); $i++) {
$studie .= '#' . $_POST['studie']['school'][$i] . ' | ';
$studie .= $_POST['studie']['type'][$i] . ' | ';
$studie .= $_POST['studie']['start'][$i] . ' | ';
$studie .= $_POST['studie']['einde'][$i] . "<br>\n";
}
echo $studie;
for($i = 0; $i < count(array_filter($_POST['studie']['school'])); $i++) {
$studie .= '#' . $_POST['studie']['school'][$i] . ' | ';
$studie .= $_POST['studie']['type'][$i] . ' | ';
$studie .= $_POST['studie']['start'][$i] . ' | ';
$studie .= $_POST['studie']['einde'][$i] . "<br>\n";
}
echo $studie;
javascript om boxen toe te voegen is:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$('.box-to-clone').hide();
$('.add-box').on('click', function(e) {
e.preventDefault();
var newElem = $(this).parent().find('.box-to-clone:first').clone();
newElem.find('input').val('');
newElem.prependTo($(this).parent()).show();
var height = $(this).prev('.box-to-clone').outerHeight(true);
$("html, body").stop().animate({ scrollTop: $(this).offset().top-height}, 600);
});
$('body').on('click','.remove-box', function(e) {
e.preventDefault();
$(this).parent().remove();
});
$('.add-box').on('click', function(e) {
e.preventDefault();
var newElem = $(this).parent().find('.box-to-clone:first').clone();
newElem.find('input').val('');
newElem.prependTo($(this).parent()).show();
var height = $(this).prev('.box-to-clone').outerHeight(true);
$("html, body").stop().animate({ scrollTop: $(this).offset().top-height}, 600);
});
$('body').on('click','.remove-box', function(e) {
e.preventDefault();
$(this).parent().remove();
});
Wat gebeurt er als je $_POST gewoon dumpt?
Dus:
Ik heb een vermoeden dat $_POST['studie']['school'] teveel velden bevat, waardoor het mis gaat.