Javascript toont de velden horende bij de eerder geselecteerde waarden uit dropdown niet
Dit werkt perfect als je de waarde nog moet kiezen maar niet als ze al gekozen is zoals hieronder. Dit betreft een aanpaspagina van eerder ingevulde gegevens.
De dropdown:
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
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
$sql = "SELECT * FROM accountics WHERE id = '$id'";
$res = mysql_query($sql) or die (mysql_error());
while($row = mysql_fetch_assoc($res)) {
<div class="col-sm-10">
<select name="categorie" class="form-control" id="selectMe">
<option selected value="<?php echo $row['categorie']; ?>"><?php echo $row['categorie']; ?></option>
<?php
$sql1 = "SELECT distinct naam FROM lijst_accountics_categorie";
$res1 = mysql_query($sql1) or die (mysql_error());
while($row = mysql_fetch_assoc($res1)) {
?>
<option value="<?php echo $row['naam']; ?>"><?php echo $row['naam']; ?></option>
<?php
}
$sql = "SELECT * FROM accountics WHERE id = '$id'";
$res = mysql_query($sql) or die (mysql_error());
while($row = mysql_fetch_assoc($res)) {
?>
</select>
</div>
$res = mysql_query($sql) or die (mysql_error());
while($row = mysql_fetch_assoc($res)) {
<div class="col-sm-10">
<select name="categorie" class="form-control" id="selectMe">
<option selected value="<?php echo $row['categorie']; ?>"><?php echo $row['categorie']; ?></option>
<?php
$sql1 = "SELECT distinct naam FROM lijst_accountics_categorie";
$res1 = mysql_query($sql1) or die (mysql_error());
while($row = mysql_fetch_assoc($res1)) {
?>
<option value="<?php echo $row['naam']; ?>"><?php echo $row['naam']; ?></option>
<?php
}
$sql = "SELECT * FROM accountics WHERE id = '$id'";
$res = mysql_query($sql) or die (mysql_error());
while($row = mysql_fetch_assoc($res)) {
?>
</select>
</div>
Daaronder komen de div's die moeten opgeroepen worden afhankelijk van de selectie uit de dropdown.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!-- Start restaurant -->
<div id="Restaurant" class="group">
<div class="col-sm-10">
<input type="text" name="bedrag1_excl" class="form-control" id="field-1" value="<?php echo $row['bedrag1_excl']; ?>">
</div>
</div>
<!-- Start als categorie niet gelijk is aan Restaurant -->
<div id="Geen" class="group">
<div class="col-sm-10">
<input type="text" name="bedrag_excl" class="form-control" id="field-1" value="<?php echo $row['bedrag_excl']; ?>">
</div>
</div>
</div>
<div id="Restaurant" class="group">
<div class="col-sm-10">
<input type="text" name="bedrag1_excl" class="form-control" id="field-1" value="<?php echo $row['bedrag1_excl']; ?>">
</div>
</div>
<!-- Start als categorie niet gelijk is aan Restaurant -->
<div id="Geen" class="group">
<div class="col-sm-10">
<input type="text" name="bedrag_excl" class="form-control" id="field-1" value="<?php echo $row['bedrag_excl']; ?>">
</div>
</div>
</div>
Hieronder hebben we de javascript die daarbij hoort. Denk dat hier wel nog enkele wijzigingen zullen aan moeten gebeuren om dit goed werkende te krijgen. Verder uitleg staat onder de javascript code.
De waarde 'Geen' betreft alles wat niet als restaurant is geselecteerd.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script>
$(document).ready(function () {
$('.group').hide();
$('#Geen').show();
$('#selectMe').change(function () {
$('.group').hide();
var Restaurant = document.getElementById("selectMe").value;
if(Restaurant === 'Restaurant') {
$('#Restaurant').show();
} else {
$('#Geen').show();
}
})
});
</script>
$(document).ready(function () {
$('.group').hide();
$('#Geen').show();
$('#selectMe').change(function () {
$('.group').hide();
var Restaurant = document.getElementById("selectMe").value;
if(Restaurant === 'Restaurant') {
$('#Restaurant').show();
} else {
$('#Geen').show();
}
})
});
</script>
Als ik die aanpaspagina refresh staan de waarden uit de database in de dropdown wel juist ingevuld maar de velden die overeen komen met de geselecteerde waarde houden geen rekening met de javascript. Dus ze komen niet naar boven. Wat is er aan mijn javascript fout?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
$('#selectMe').change(function () {
$('.group').hide();
var Restaurant = document.getElementById("selectMe").value;
if(Restaurant === 'Restaurant') {
$('#Restaurant').show();
} else {
$('#Geen').show();
}
})
$('.group').hide();
var Restaurant = document.getElementById("selectMe").value;
if(Restaurant === 'Restaurant') {
$('#Restaurant').show();
} else {
$('#Geen').show();
}
})
Dit deel wordt gestart als de div met id selectMe wordt gewijzigd, niet als de pagina inlaad. In jouw geval worden de waardes al eerder geselecteerd en moet je dat deel dus naar de de document ready zetten zodat het wordt ingeladen als de pagina start.
Wat wel werkt is als je dan even dat veld aanpast in iets anders en dan terug zet op restaurant werkt het wel. Maar niet bij het inladen van de pagina.
Gewijzigd op 20/01/2015 21:37:33 door Brecht S
In je select bouw je een lijst met options.
Waarom laat je categorie zien als optie (op regel 9) plus alle waardes uit lijst_accountics_categorie (op regel 18 in de lus)?
En waarom maak je die op regel 9 altijd selected? Zou dat niet de option regel moeten zijn waarvan de waarde in de database staat?
Iets als:
Code (php)
Dit maakt die option selected waarvan de naam gelijk is aan de categorie.
$categorie = $row['categorie'] gezet, voor regel 12 (omdat je 2 maal $row gebruikt voor je sql resultaat).
Ook hier weer, uit de losse pols opgetikt, dus misschien hier en daar een foutje.
Gewijzigd op 21/01/2015 18:42:22 door Jan de Laet
Regel 18 is nodig als je de dropdown opent dat er waarden in staan. Anders is dat leeg... Zo kan je van de eerder geselecteerde option die veranderen door iets anders te kiezen in de lijst en dit zijn dan de waarden uit de lijst_accountics_categorie.
Ik zal jouw manier eens bekijken, jan. Geen idee wat de uitkomst daarvan gaat zijn. Misschien dat dit inderdaad wel werkt dan. Ik laat nog iets weten hier straks.
Toevoeging op 21/01/2015 21:49:53:
@Jan: ik heb alles beetje aangepast en het resultaat is:
Code (php)
En natuurlijk eerst juist onder de while loop de regel $categorie = $row['categorie'] toevoegen.
Maar het is nog steeds hetzelfde resultaat. Mijn eerdere versie en de jouwe zijn hetzelfde. Alleen spaar ik met jouw versie een regel uit.
Het zal dus wel een javascript probleem zijn, maar niemand weet hier precies wat het probleem is want de reacties zijn heel laag.
In wat pseudo code doe je dit:
Bedoel je dan bij de input velden? Dit zit volledig in een bootstrap framework dus dezelfde id's op input fields kan maar heeft niks met de javascript te maken.
Kan je eens uitleggen wat je bedoeld met je pseudo code?
Wat ik op maak aan de hand van de door jouw aangeleverde informatie is dat je dingen onnodig moeilijk aan het maken bent.
Buiten dat, je hebt het verbergen/tonen van de div's in de change evenListener staan, dus dit wordt pas uitgevoerd nadat er iets veranderd in the select (dit is al eerder door Peter Flos aangegeven).
Maar als je dus NA het aanmaken van de eventListener de event triggert:
Code (js)
1
$("#selectMe").trigger("change");
Dan zal het met de aan zekerheid grenzende waarschijnlijkheid wel goed gaan
Gewijzigd op 22/01/2015 16:51:02 door Ger van Steenderen
Even de volledige javascript posten van het uiteindelijke 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
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
<script>
$(document).ready(function () {
$('.group').hide();
if($('#selectMe').val() === 'Restaurant') {
$('#Restaurant').show();
}
else {
$('#Geen').show();
}
$('#selectMe').change(function () {
$('.group').hide();
if($('#selectMe').val() === 'Restaurant') {
$('#Restaurant').show();
}
else {
$('#Geen').show();
}
})
});
</script>
$(document).ready(function () {
$('.group').hide();
if($('#selectMe').val() === 'Restaurant') {
$('#Restaurant').show();
}
else {
$('#Geen').show();
}
$('#selectMe').change(function () {
$('.group').hide();
if($('#selectMe').val() === 'Restaurant') {
$('#Restaurant').show();
}
else {
$('#Geen').show();
}
})
});
</script>
Nu ga ik mij bezig houden met een paar varianten op dit script. Want heb er nog zo een paar staan met velden die moeten verdwijnen/verschijnen maar met andere waarden.
Gewijzigd op 22/01/2015 18:31:43 door Brecht S
Met .change hang je een eventListener aan een element, met .trigger('change') trigger je dat event, en wordt hetgeen binnen de eventListener staat uitgevoerd.
Gewijzigd op 26/01/2015 23:04:24 door Brecht S
Wordt het niet eens tijd (en vooral wanneer je nieuwe code aan het schrijven bent) dat je gebruik gaat maken van ofwel mysqli ofwel PDO om met je MySQL-database te communiceren?
Al vanaf MySQL versie 4.1.3 (die circa 10 jaar geleden werd geintroduceerd) was het al mogelijk (en werd je aangemoedigd) om afscheid te nemen van de mysql_ functies.