Dynamic select geeft geen value bij POST van form
Ik heb een form met daarin 2 selectboxen.
Box1 is standaard gevuld en Box2 is leeg.
Wanneer je in Box1 iets selecteerd wordt er via een Ajax en SQL Box2 gevuld.
Dit gaat allemaal goed maar wanneer ik dan het form post krijg ik wel de geselecteerde waarde uit Box1 te zien maar niet uit Box2 te zien.
Wanneer ik het volgende in mijn form pagina stop;
echo "<pre>";
print_r($_POST);
echo "</pre>";
En ik post het form dan zie ik de naam van Box2 helemaal niet in de lijst staan.
Ik heb in de form pagina Box2 in een div gestopt en wanneer je iets selecteerd uit Box1 wordt het volgende uitgevoerd;
$('#box2').empty();
$('#box2').append(tijden);
$('#box2').show();
Ik haal de div (met hierin Box2 die leeg is weg) en append de nieuwe Box2 met hierin alle juiste selectiemogelijkheden.
Kan iemand mij misschien vertellen wat ik zou moeten doen om wel de waarde te krijgen bij het posten van het form?
Als ik namelijk de pagina laad en Box1 en Box2 zijn nog met de standaard selectie en ik druk op de knop krijg ik wel beide waardes te zien in $_POST.
Maar wanneer ik iets in Box1 selecteer krijg ik wanneer ik het form post geen Box2 waarde meer. Die hele Box2 waarde is dan ook weg alsof hij niet meer in het form zit, terwijl hij wel gewoon in de pagina zichtbaar is.
<span id="box2"><select name="box2" class="van"><option value="" SELECTED>tot</option></select></span>
En wanneer er dus uit box1 iets geselecteerd wordt, wordt de span leeggemaakt en de select opnieuw aangemaakt met dezelfde naam en class alleen de options worden toegevoegd.
Je kan namelijk ook gewoon de options aanmaken binnen de select, op dezelfde manier als je nu de select toevoegt binnen de span. Die span is dus overbodig en vanwege de id van de span die gelijk is aan de naam van de select heb ik het vermoeden dat dat een conflict geeft.
Gewijzigd op 30/12/2011 11:39:52 door Erwin H
Ik heb ook al de span een andere naam gegeven maar dan krijg ik precies hetzelfde.
Ik kan nog wel even uitzoeken hoe ik de option's binnenin de select box kan vernieuwen, inplaats van de hele selectbox opnieuw te plaatsen om te kijken of dat iets uitmaakt...
Als je id van de select bijvoorbeeld "select2" is, dan kan je op deze manier de select leeggooien en er nieuwe options aan toevoegen:
$("#select2").empty().append('<option value="1">tekst</option>');
index.php
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
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
<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
echo '<pre>' . print_r($_POST, 1) . '</pre>';
}
?>
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(e){
/**
* functie wordt aangeroepen wanneer box1 wordt veranderd.
*/
$("#box1 select").change(function(e) {
// ajax verzoek:
$.ajax({
type: "POST",
url: "ajaxrequest.php",
data: "box1=" + escape($("#box1 select").val()),
success: function(msg){
// ajax resons
$('#box2').empty();
$('#box2').append(msg);
$('#box2').show();
}
});
});
});
</script>
</head>
<body>
<form action="" method="post">
<span id="box1">
<select name="box1" >
<option value="0">---</option>
<option value="1">auto</option>
<option value="2">fruit</option>
<option value="3">kleur</option>
</select>
</span>
<span id="box2"></span>
<input type="submit" />
</form>
</body>
</html>
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
echo '<pre>' . print_r($_POST, 1) . '</pre>';
}
?>
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(e){
/**
* functie wordt aangeroepen wanneer box1 wordt veranderd.
*/
$("#box1 select").change(function(e) {
// ajax verzoek:
$.ajax({
type: "POST",
url: "ajaxrequest.php",
data: "box1=" + escape($("#box1 select").val()),
success: function(msg){
// ajax resons
$('#box2').empty();
$('#box2').append(msg);
$('#box2').show();
}
});
});
});
</script>
</head>
<body>
<form action="" method="post">
<span id="box1">
<select name="box1" >
<option value="0">---</option>
<option value="1">auto</option>
<option value="2">fruit</option>
<option value="3">kleur</option>
</select>
</span>
<span id="box2"></span>
<input type="submit" />
</form>
</body>
</html>
ajaxrequest.php:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
/*
Voorbeeldje van een ajax respons, die op basis van $_POST['box1'], een selectbox genereert
*/
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
if (!empty($_POST['box1'])) {
switch ($_POST['box1']) {
case 1: echo '<select name="box2"><option value="Ferrari">Ferrari</option><option value="Porche">Porche</option></select>'; break;
case 2: echo '<select name="box2"><option value="Citroen">Citroen</option><option value="Appel">Appel</option><option value="kers">kers</option></select>'; break;
case 3: echo '<select name="box2"><option value="rood">rood</option><option value="groen">groen</option><option value="blauw">blauw</option></select>'; break;
}
}
}
?>
/*
Voorbeeldje van een ajax respons, die op basis van $_POST['box1'], een selectbox genereert
*/
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
if (!empty($_POST['box1'])) {
switch ($_POST['box1']) {
case 1: echo '<select name="box2"><option value="Ferrari">Ferrari</option><option value="Porche">Porche</option></select>'; break;
case 2: echo '<select name="box2"><option value="Citroen">Citroen</option><option value="Appel">Appel</option><option value="kers">kers</option></select>'; break;
case 3: echo '<select name="box2"><option value="rood">rood</option><option value="groen">groen</option><option value="blauw">blauw</option></select>'; break;
}
}
}
?>
uiteraard jquery niet vergeten
Het ging dus fout bij het opnieuw maken van de selectbox op 1 of andere manier.
@Kris Peeters: Zoiets heb ik ook ongeveer uiteindelijk.
Heren hartstikke bedankt voor jullie hulp!
Zonder jullie was ik er nog niet achter gekomen :)
$('#box2').empty();
$('#box2').append(msg);
$('#box2').show();
kan je alleen in een keer schrijven, dat scheelt tijd. JQuery hoeft dan maar een keer het element in de DOM op te zoeken.
$('#box2').empty().append(msg).show();
Code (php)
1
$("#box1 select").change(function(e) {
volgens mij heeft een span geen select.
denk dat je deze op de checkbox moet zetten
Dat werkt op de zelfde manier als css.
Gewijzigd op 30/12/2011 15:47:48 door Kris Peeters