De PHPhulp kroeg
drop-downlijst direct opslaan
Ik heb een php bestand met daar in een gegenereerde lijst. Het bevat veen x aantal regels vanuit een database tabel(1).
Iedere regel bevat een form. En op dat form heb ik een hidden id. Die gebruik ik om een record te kunnen selecteren.
Maar op ieder form heb ik ook een drop-down veld/lijst. Deze is gegenereerd uit een andere database tabel(2). De id daarvan wil ik opslaan in tabel(1).
Hiervoor wil ik een MySQLi commando gebruiken met het SQL statement UPDATE.
Maar mijn vraag is nu, hoe kan ik query direct starten als ik mijn keuze heb gemaakt in de dropdown. Ik wil dan eigenlijk geen ander knopje hoeven in te drukken.
ALvast vriendelijk bedankt.
Frits van Leeuwen
Gewijzigd op 01/11/2023 18:59:50 door - Ariën -
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<select id="selectbox">
<option value="optie1">Optie 1</option>
<option value="optie2">Optie 2</option>
<option value="optie3">Optie 3</option>
</select>
<div id="result"></div>
<option value="optie1">Optie 1</option>
<option value="optie2">Optie 2</option>
<option value="optie3">Optie 3</option>
</select>
<div id="result"></div>
En de Javascript code. Vergeet niet jQuery toe te voegen.
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
$(document).ready(function() {
$('#selectbox').change(function() {
// Haal de geselecteerde waarde op
var selectedValue = $(this).val();
// Voer een AJAX-verzoek uit met de geselecteerde waarde als GET-parameter
$.ajax({
url: 'ajax_select.php',
type: 'GET',
data: { option: selectedValue },
dataType: 'json', // Het verwachte datatype van de respons
success: function(data) {
// Verwerk de succesvolle respons hier
$('#result').html('De request is met succes uitgevoerd: ' + JSON.stringify(data));
},
error: function(xhr, status, error) {
alert('Fout bij het uitvoeren van de AJAX-request: ' + error);
}
});
});
});
$('#selectbox').change(function() {
// Haal de geselecteerde waarde op
var selectedValue = $(this).val();
// Voer een AJAX-verzoek uit met de geselecteerde waarde als GET-parameter
$.ajax({
url: 'ajax_select.php',
type: 'GET',
data: { option: selectedValue },
dataType: 'json', // Het verwachte datatype van de respons
success: function(data) {
// Verwerk de succesvolle respons hier
$('#result').html('De request is met succes uitgevoerd: ' + JSON.stringify(data));
},
error: function(xhr, status, error) {
alert('Fout bij het uitvoeren van de AJAX-request: ' + error);
}
});
});
});
Ik raad wel aan om in je ajax_select.php goede controle te bouwen op de invoervalidatie. Een UPDATE-query moet hopelijk geen probleem zijn voor je. En maak ook goede foutafhandeling aan de hand van je return-waarde bij je succes-event.
Gewijzigd op 08/10/2023 23:33:06 door - Ariën -
Ik kan er nu niet direct mee aan de slag, maar ik hoop dat morgen wel te kunnen. Mijn FORM is met $_POST Is dat geen probleem? Ik zie immers dat je GET gebruikt in de code.
Code (php)
1
2
3
4
5
6
2
3
4
5
6
$selectielijst_packings = "<select name='verpakkingen' id='verpakkingen' alt='verpakkingen'>
<option value='0'> </option>";
while ($row_packings = mysqli_fetch_row($result_packings)) {
$selectielijst_packings .= "<option value='".$row_packings[0]."'>".$row_packings[1].": ".$row_packings[2]."x".$row_packings[3]."x".$row_packings[4]."</option>";
}
$selectielijst_packings .= "</select><div id='resultselect_necessary_packaging'></div>";
<option value='0'> </option>";
while ($row_packings = mysqli_fetch_row($result_packings)) {
$selectielijst_packings .= "<option value='".$row_packings[0]."'>".$row_packings[1].": ".$row_packings[2]."x".$row_packings[3]."x".$row_packings[4]."</option>";
}
$selectielijst_packings .= "</select><div id='resultselect_necessary_packaging'></div>";
Ik voeg die code op elke regel in, zodat ik een HTML tabel kan genereren.
Dat werkt prima. Maar als ik dan de volgende code er in zet start de pagina niet.
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
$(document).ready(function() {
$('#verpakkingen').change(function() {
// Haal de geselecteerde waarde op
var selectedValue = $(this).val();
// Voer een AJAX-verzoek uit met de geselecteerde waarde als GET-parameter
$.ajax({
url: 'necessary_packaging.php',
type: 'POST',
data: { option: selectedValue },
dataType: 'json', // Het verwachte datatype van de respons
success: function(data) {
// Verwerk de succesvolle respons hier
$('#resultselect_necessary_packaging').html('De request is met succes uitgevoerd: ' + JSON.stringify(data));
},
error: function(xhr, status, error) {
alert('Fout bij het uitvoeren van de AJAX-request: ' + error);
}
});
});
});
$('#verpakkingen').change(function() {
// Haal de geselecteerde waarde op
var selectedValue = $(this).val();
// Voer een AJAX-verzoek uit met de geselecteerde waarde als GET-parameter
$.ajax({
url: 'necessary_packaging.php',
type: 'POST',
data: { option: selectedValue },
dataType: 'json', // Het verwachte datatype van de respons
success: function(data) {
// Verwerk de succesvolle respons hier
$('#resultselect_necessary_packaging').html('De request is met succes uitgevoerd: ' + JSON.stringify(data));
},
error: function(xhr, status, error) {
alert('Fout bij het uitvoeren van de AJAX-request: ' + error);
}
});
});
});
Verder heb ik deze code er in staan om afte vangen wat er moet gebeuren als de dropdown gebruikt wordt. (maar ik heb nu wel het vermoede dat het anders moet)
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
if(isset($_POST['verpakkingen'])){
$id = $_POST['id'];
$id_packing_choosen=$_POST['verpakkingen'];
$query_update_necessary_packaging = "UPDATE prstshp_collect_productstype_packing SET id_packing='$id_packing_choosen' WHERE id = '$id';";
// Voer de query uit
$result_update_necessary_packaging = mysqli_query($con, $query_update_necessary_packaging);
$id = "";
$query_update_necessary_packaging = "";
echo "<meta http-equiv='refresh' content='0'>";
}
$id = $_POST['id'];
$id_packing_choosen=$_POST['verpakkingen'];
$query_update_necessary_packaging = "UPDATE prstshp_collect_productstype_packing SET id_packing='$id_packing_choosen' WHERE id = '$id';";
// Voer de query uit
$result_update_necessary_packaging = mysqli_query($con, $query_update_necessary_packaging);
$id = "";
$query_update_necessary_packaging = "";
echo "<meta http-equiv='refresh' content='0'>";
}
Heb je de jQuery library al ingeladen?
Verder vergeet je ook je data in je query te escapen!!
Vanwaar een metatag voor de redirect? Die heb je niet nodig voor AJAX.
Gewijzigd op 09/10/2023 11:45:11 door - Ariën -
Is de volgorde van belang waarin ik de boel open?
De volgende 2 regels heb ik staan in de HTML header. Daarmee laad ik toch de jquery?
Code (php)
1
2
2
<link rel="stylesheet" href="https://geschenkenlaantje.nl/js/jquery/ui/themes/base/minified/jquery-ui.min.css" type="text/css" media="all">
<link rel="stylesheet" href="https://geschenkenlaantje.nl/js/jquery/ui/themes/base/minified/jquery.ui.theme.min.css" type="text/css" media="all">
<link rel="stylesheet" href="https://geschenkenlaantje.nl/js/jquery/ui/themes/base/minified/jquery.ui.theme.min.css" type="text/css" media="all">
De jquery code staat vrijwel boven aan in dit php bestand.
Die metatag kan inderdaad nu weg. (Is nu weg)
Code (php)
1
<script type="text/javascript" src="https://geschenkenlaantje.nl/js/jquery/ui/jquery-ui.min.js" ></script>
Als dit ook niets is, zou je me kunnen vertellen wat voor regel ik waar moet plaatsen?
Gewijzigd op 09/10/2023 17:19:32 door Frits van Leeuwen
Kijk hier eens: https://releases.jquery.com/
Gebruik bij voorkeur de externe CDN locatie.
Gewijzigd op 09/10/2023 17:30:38 door - Ariën -
- Ariën - op 09/10/2023 17:29:18:
Gebruik bij voorkeur de externe CDN locatie.
Waarom?
Persoonlijk en professioneel hekel ik dergelijke CDNs.
Er zijn zelfs speciale populaire browserplugins tegen die CDN's, zoals Decentralyyes.
En met reden, want jQuery.com is van een anoniem bedrijf in California, in de VS.
Dan geldt wederom dat Europa er geen verdrag meer mee heeft, sinds 'Safe Harbour' en 'Privacy Shield', dus je begeeft je juridisch op dun ijs.
Ik zou het ten alle tijde afraden.
De workaround is simpel, gewoon zelf de laatste versie downloaden en via je eigen server hosten, dan is het hele probleem opgelost. Geldt ook voor al die gratis lettertypen in die 'gratis' Wordpress templates. Gewoon niet doen. Is slecht.
Maar als ik op de link klik om jquery te downloaden, krijg ik een heleboel code tekst in beeld. Hoe kan ik dan jquery zelf hosten? Ik heb nu de tekst maar opgeslagen op mijn computer met de naam code.jquery.com_jquery-3.7.1.min. Daarna heb ik deze naar de server overgezet met de naam en gaf het de naam jquery-3.7.1.min.js. Deze naam gaf ik omdat ik meer bestanden zag met een sortgelijke naam. Ik denk eerdere versies. (3.4.1 en 3.5.1) Ze staan vanuit de hoofdmap van de site in de map /js/jquery
Nu hou ik over de vraag hoe ik dat dan moet gebruiken. Dus hoe laad ik het en hoe roep ik het aan.
Gewijzigd op 09/10/2023 19:32:32 door Frits van Leeuwen
Code (php)
1
<script src="jquery.min.js"></script>
Basis van HTML eigenlijk ;-)
Gewijzigd op 09/10/2023 19:22:18 door - Ariën -
Ik heb ook op internet door gezocht en vond wel een paar kleine verbeterpunten, Waardoor nu de pagina in beeld blijft.
Maar verder kom ik nu niet. De fout die ik nu heb, is de volgende:
Ik kan in mijn drop-downlist een keuze maken. Deze blijft in beeld zolang ik de pagina niet ververs.
Het is voor mij duidelijk dat er niets wordt bewaard in een tabel. Hierdoor zijn mijn drop-downvelden altijd leeg na een refresh.
Ik zet de code nog even op een rij.
Ik heb 1 bestand. Daar in staat de volgende php-code.
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
64
65
66
67
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
$TotaalTabel_packings = "";
$i_packings = 1;
$query_packings = "SELECT id, name, height, width, depth, location
FROM prstshp_collect_packings
ORDER BY name,height,width,depth;";
$result_packings = mysqli_query( $con,$query_packings );
$n_packings = mysqli_num_rows( $result_packings );
$selectielijst_packings = "<select name='verpakkingen' id='verpakkingen' alt='verpakkingen'>
<option value='0'> </option>";
$query_necessary_packaging = "SELECT id, producttype, quantity, id_packing
FROM prstshp_collect_productstype_packing
ORDER BY quantity, producttype;";
$result_necessary_packaging = mysqli_query( $con,$query_necessary_packaging );
$n_necessary_packaging = mysqli_num_rows( $result_necessary_packaging );
while ($row_packings = mysqli_fetch_row($result_packings)) {
$selectielijst_packings .= "<option value='".$row_packings[0]."'>".$row_packings[1].": ".$row_packings[2]."x".$row_packings[3]."x".$row_packings[4]."</option>";
}
$selectielijst_packings .= "</select><div id='result_update_necessary_packaging'></div>";
while ( $rows = mysqli_fetch_array( $result_necessary_packaging, MYSQLI_ASSOC ) )
{
$id = $rows["id"];
$producttype = $rows["producttype"];
$quantity = $rows["quantity"];
$id_packing = $rows["id_packing"];
$TotaalTabel_necessary_packaging .= "<form name = 'form_necessary_packaging".$id."' method = 'POST' action='necessary_packaging.php'>
<tr class='normaaal_tabel'>
<td><input type = 'hidden' name = 'id' value = '".$id."'> ".$quantity."x ".$producttype."</td>
<td>";
$TotaalTabel_necessary_packaging .= $selectielijst_packings;
$TotaalTabel_necessary_packaging .= "</td><td>";
$TotaalTabel_necessary_packaging .="
<button type = 'submit' name = 'Verwijderen' class = 'button_administratie' alt = 'Verwijderen' >
<img src = 'img/administratie/delete.png' alt = 'Verwijderen' name = 'Verwijderen".$id."' class = 'check_administratie' style = 'float:left' >
</button>";
$TotaalTabel_necessary_packaging .="</td></tr></form>";
$id = "";
}
if(isset($_POST['verpakkingen'])){
$id = $_POST['id'];
$id_packing_choosen=$_POST['verpakkingen'];
$query_update_necessary_packaging = "UPDATE prstshp_collect_productstype_packing SET id_packing='$id_packing_choosen' WHERE id = '$id';";
// Voer de query uit
$result_update_necessary_packaging = mysqli_query($con, $query_update_necessary_packaging);
$id = "";
$query_update_necessary_packaging = "";
}
if(isset($_POST['Verwijderen'])){
$id = $_POST['id'];
$query_del_necessary_packaging = "Delete FROM prstshp_collect_productstype_packing WHERE id = '$id';";
// Voer de query uit
mysqli_query($con, $query_del_necessary_packaging);
$id = "";
$query_del_necessary_packaging = "";
echo "<meta http-equiv='refresh' content='0'>";
}
$i_packings = 1;
$query_packings = "SELECT id, name, height, width, depth, location
FROM prstshp_collect_packings
ORDER BY name,height,width,depth;";
$result_packings = mysqli_query( $con,$query_packings );
$n_packings = mysqli_num_rows( $result_packings );
$selectielijst_packings = "<select name='verpakkingen' id='verpakkingen' alt='verpakkingen'>
<option value='0'> </option>";
$query_necessary_packaging = "SELECT id, producttype, quantity, id_packing
FROM prstshp_collect_productstype_packing
ORDER BY quantity, producttype;";
$result_necessary_packaging = mysqli_query( $con,$query_necessary_packaging );
$n_necessary_packaging = mysqli_num_rows( $result_necessary_packaging );
while ($row_packings = mysqli_fetch_row($result_packings)) {
$selectielijst_packings .= "<option value='".$row_packings[0]."'>".$row_packings[1].": ".$row_packings[2]."x".$row_packings[3]."x".$row_packings[4]."</option>";
}
$selectielijst_packings .= "</select><div id='result_update_necessary_packaging'></div>";
while ( $rows = mysqli_fetch_array( $result_necessary_packaging, MYSQLI_ASSOC ) )
{
$id = $rows["id"];
$producttype = $rows["producttype"];
$quantity = $rows["quantity"];
$id_packing = $rows["id_packing"];
$TotaalTabel_necessary_packaging .= "<form name = 'form_necessary_packaging".$id."' method = 'POST' action='necessary_packaging.php'>
<tr class='normaaal_tabel'>
<td><input type = 'hidden' name = 'id' value = '".$id."'> ".$quantity."x ".$producttype."</td>
<td>";
$TotaalTabel_necessary_packaging .= $selectielijst_packings;
$TotaalTabel_necessary_packaging .= "</td><td>";
$TotaalTabel_necessary_packaging .="
<button type = 'submit' name = 'Verwijderen' class = 'button_administratie' alt = 'Verwijderen' >
<img src = 'img/administratie/delete.png' alt = 'Verwijderen' name = 'Verwijderen".$id."' class = 'check_administratie' style = 'float:left' >
</button>";
$TotaalTabel_necessary_packaging .="</td></tr></form>";
$id = "";
}
if(isset($_POST['verpakkingen'])){
$id = $_POST['id'];
$id_packing_choosen=$_POST['verpakkingen'];
$query_update_necessary_packaging = "UPDATE prstshp_collect_productstype_packing SET id_packing='$id_packing_choosen' WHERE id = '$id';";
// Voer de query uit
$result_update_necessary_packaging = mysqli_query($con, $query_update_necessary_packaging);
$id = "";
$query_update_necessary_packaging = "";
}
if(isset($_POST['Verwijderen'])){
$id = $_POST['id'];
$query_del_necessary_packaging = "Delete FROM prstshp_collect_productstype_packing WHERE id = '$id';";
// Voer de query uit
mysqli_query($con, $query_del_necessary_packaging);
$id = "";
$query_del_necessary_packaging = "";
echo "<meta http-equiv='refresh' content='0'>";
}
In de header van de HTML staat:
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
<script src="https://geschenkenlaantje.nl/js/jquery/jquery-3.7.1.min.js" ></script>
<script>
$(document).ready(function() {
$('#verpakkingen').change(function() {
// Haal de geselecteerde waarde op
var selectedOption = $(this).val('id');
// Voer een AJAX-verzoek uit met de geselecteerde waarde als GET-parameter
$.ajax({
url: 'necessary_packaging.php',
type: 'POST',
data: { option: selectedOption },
success: function(data) {
// Verwerk de succesvolle respons hier
$('$result_update_necessary_packaging').html('De request is met succes uitgevoerd: ' + JSON.stringify(data));
},
error: function(xhr, status, error) {
alert('Fout bij het uitvoeren van de AJAX-request: ' + error);
}
});
});
});
</script>
<script>
$(document).ready(function() {
$('#verpakkingen').change(function() {
// Haal de geselecteerde waarde op
var selectedOption = $(this).val('id');
// Voer een AJAX-verzoek uit met de geselecteerde waarde als GET-parameter
$.ajax({
url: 'necessary_packaging.php',
type: 'POST',
data: { option: selectedOption },
success: function(data) {
// Verwerk de succesvolle respons hier
$('$result_update_necessary_packaging').html('De request is met succes uitgevoerd: ' + JSON.stringify(data));
},
error: function(xhr, status, error) {
alert('Fout bij het uitvoeren van de AJAX-request: ' + error);
}
});
});
});
</script>
En in de body van dde HTML heb ik dit staan:
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
<table class = "Tabelregel" >
<tr>
<th><label for="aantal x producttype">aantal x producttype</label></th>
<th><label for="Benodigde verpakking">Benodigde verpakking</label></th>
<th> </th>
</tr>
<?php echo $TotaalTabel_necessary_packaging; ?>
</table>
<tr>
<th><label for="aantal x producttype">aantal x producttype</label></th>
<th><label for="Benodigde verpakking">Benodigde verpakking</label></th>
<th> </th>
</tr>
<?php echo $TotaalTabel_necessary_packaging; ?>
</table>
Ik heb even de code er uitgelicht om niet teveel afgeleid te worden door de rest van de code in het bestand. Ik vermoed dat aan de hand van de gegeven stukjes code, jullie wel een indruk hebben wat er waar mis gaat.
Als voorbeeld:
Gewijzigd op 10/10/2023 21:39:35 door - Ariën -
Ik gebruik MS Edge, Ik kan wel de tool openen om dan Netwerk te kiezen, maar ik begrijp daar niet veel van.
Zie je daar de URL's die vanuit je site worden opgevraagd? En zo ja, ook je necessary_packaging.php?
maar ik zie in de tool niets gebeuren als ik een keuze maak. Behalve als ik een keuze maak op de eerste regel in de tabel. Niet dat hij het gegeven onthoud, maar gebeurt meer dan op andere regels.
Toevoeging op 10/10/2023 22:49:37:
Is het een idee dat ik de link naar het necessary_packaging.php geef?
Heb je de jQuery ingeladen?
En kan je anders even een testcase link laten zien?
En ik zag die ook in de tool voorbij komen. Zelf denk ik dat er iets mis is met de code.
Zal ik je in een PM de link sturen?
Het is allemaal in test. je kan er niets mee verzieken.
Gewijzigd op 10/10/2023 22:57:08 door Frits van Leeuwen
Graag via dit topic, en als het om gevoelige data gaat, beperk je het enkel tot wat nodig is.