JS functies in combinatie met jQuery
Code (php)
1
2
3
4
5
2
3
4
5
$(".rowadder").click(function() {
aid = $(this).attr("id").substr(6);
groupid = "#group_" + aid;
$(groupid).append("<div><div><input type=\"text\" name=\"label_" + aid + "[]\" /></div><div><input type=\"text\" name=\"price_add_" + aid + "[]\" /></div></div>")
});
aid = $(this).attr("id").substr(6);
groupid = "#group_" + aid;
$(groupid).append("<div><div><input type=\"text\" name=\"label_" + aid + "[]\" /></div><div><input type=\"text\" name=\"price_add_" + aid + "[]\" /></div></div>")
});
Als ik een vardump doe op $_POST krijgen de velden die door bovenstaande functie worden toegevoegd, een _ achter de id, dus bv price_add_1_.
Iemand enig idee hoe dit kan.
Als ik een lengte meegeef aan substr() gaat het overigens wel goed.
Voor alle duidelijkheid, het id van de buttons eindigt op een getal (niet op _). En het id van de div ook.
Gewijzigd op 06/12/2012 13:19:37 door Ger van Steenderen
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
echo '<pre>' . print_r($_POST, TRUE) . '</pre>';
echo '<p><a href="?">terug</a></p>';
exit;
}
?>
<form action="" method="post">
<input type="button" class="rowadder" value="rij toevoegen" id="abcde_knopje">
<div id="group_knopje"></div>
<input type="submit" value="Verzend">
</form>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
$(".rowadder").click(function() {
aid = $(this).attr("id").substr(6);
groupid = "#group_" + aid;
$(groupid).append('<div><div><input type="text" name="label_' + aid + '[]" /></div><div><input type="text" name="price_add_' + aid + '[]" /></div></div>')
});
</script>
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
echo '<pre>' . print_r($_POST, TRUE) . '</pre>';
echo '<p><a href="?">terug</a></p>';
exit;
}
?>
<form action="" method="post">
<input type="button" class="rowadder" value="rij toevoegen" id="abcde_knopje">
<div id="group_knopje"></div>
<input type="submit" value="Verzend">
</form>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
$(".rowadder").click(function() {
aid = $(this).attr("id").substr(6);
groupid = "#group_" + aid;
$(groupid).append('<div><div><input type="text" name="label_' + aid + '[]" /></div><div><input type="text" name="price_add_' + aid + '[]" /></div></div>')
});
</script>
Okay, wanneer de gebruiker 5 keer op de knop drukt, komen er 5 rijen bij, elk met twee <input>'s. Van daar de [].
Wat me niet duidelijk is: zijn er meerdere knoppen met class="rowadder" ?
Trouwens: aan de hand van een id pas je de name van de input aan. Hoe ga je dan zoeken naar de juiste key $_POST['wat_komt_er_hier?'] ?
Kan je zelf een stuk HTML tonen die bij deze code past? Het zou mij veel verklaren.
Uiteindelijk zal ik je (waarschijnlijk) aanraden om met data-attributes te gaan werken. Dat gegoochel met id ... substr(6) ... dat kan efficiënter.
@Kris, ja er kunnen meerdere knoppen zijn met de class rowadder.
Ik heb voor een klant even snel een voorbeeldje in elkaar gedraaid, de afhandeling in PHP doet ie zelf.
Het gegoochel met id's is bij mij macht der gewoonte, omdat ik heel veel in plain JS gedaan heb.
PS.
Het is ook geen browser ding, IE 10 en FF doen hetzelfde.
http://www.phphulp.nl/php/forum/topic/functie/88042/
Zie je? Ook het zelfde probleem van niet echt weten waar men best data plakt aan een HTML element.
Met die data- attributes kan je veilig gegevens stockeren; die komen verder niet in conflict met de werking van de gewone attributes (zoals id, class, name).
Oei, oei wat een domme fout van mij, een doodgewone typo: er stond een spatie achter de id van de button.
@Kris
Ik had die reactie van jouw al eens gelezen, en heb die toen gelijk in mijn code snippets gezet, en ik zal hem zeker eens gaan toepassen (en waarschijnlijk zeer binnenkort).