Vanuit Javascript INSERT, UPDATE of DELETE gebruiken naar database
Ik heb een PHP bestand. Als ik die open, wordt ook de verbinding met de database gemaakt.
Zo heb ik
Code (php)
1
2
3
4
5
6
2
3
4
5
6
$query_menu_beheer =
"SELECT menu_id, menu_sub_van, menu_waarde, menu_tekst, menu_link
FROM tabel_menu
ORDER BY menu_sub_van, menu_waarde";
$result_menu_beheer = mysqli_query($connect, $query_menu_beheer);
"SELECT menu_id, menu_sub_van, menu_waarde, menu_tekst, menu_link
FROM tabel_menu
ORDER BY menu_sub_van, menu_waarde";
$result_menu_beheer = mysqli_query($connect, $query_menu_beheer);
En dat werkt.
Maar nu ga ik in dat bestand verder en gebruik ik ook Javascript.
In een HTML-FORM heb ik twee BUTTONs
Code (php)
1
<button onclick="Verwijderen()" id="Button_Delete" type="Submit" value="Delete" class="button_delete" alt="verwijderen"></button> <button onclick="Opslaan()" id="Button_Save" type="submit" value="Submit" class="button_save" alt="opslaan"></button>
De aanroep werkt. Zo open ik de volgende Javascript functies:
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// Er is op de verwijder-knop geklikt
function Verwijderen()
{
alert('Verwijderen');
// formulieren en knoppen aan of uit zetten
$('#Button_Add').show(); // toevoegknop tonen
$('#Add_Form').hide(); // toevoeg formulier verbergen
};
function Opslaan()
{
var j_connect = $connect;
alert(j_connect);
if ( $('#fidnr').val().length === 0 )
{
alert('nieuwe opslaan');
}
else
{
alert('bestaande opslaan: id = ' + $('#fidnr').val());
}
// formulieren en knoppen tonen of verbergen
$('#Button_Add').show(); // toevoegknop tonen
$('#Add_Form').hide(); // toevoeg formulier verbergen
};
function Verwijderen()
{
alert('Verwijderen');
// formulieren en knoppen aan of uit zetten
$('#Button_Add').show(); // toevoegknop tonen
$('#Add_Form').hide(); // toevoeg formulier verbergen
};
function Opslaan()
{
var j_connect = $connect;
alert(j_connect);
if ( $('#fidnr').val().length === 0 )
{
alert('nieuwe opslaan');
}
else
{
alert('bestaande opslaan: id = ' + $('#fidnr').val());
}
// formulieren en knoppen tonen of verbergen
$('#Button_Add').show(); // toevoegknop tonen
$('#Add_Form').hide(); // toevoeg formulier verbergen
};
En in deze aansturing van de knoppen wil ik een record verwijderen, muteren of toevoegen. De SQL code begrijp ik wel.
Kan ik $connect uit PHP over nemen? Of is dat misschien helemaal niet nodig.
Hoe kan ik naar mijn MYSQL database schrijven?
Alvast bedankt voor de assistentie.
Gewijzigd op 17/03/2020 00:22:40 door Frits van Leeuwen
De enige weg om JavaScript te laten praten met serverside scripts, is een AJAX-request die asynchroon plaatsvindt.
Lijn 11 zal dus nooit werken.
Zie ook: https://www.tutorialsteacher.com/jquery/jquery-ajax-method
Gewijzigd op 17/03/2020 00:34:38 door - Ariën -
Dan zal ik me dus ook in AJAX moeten gaan verdiepen, want daar weet ik nog niets van. Kan ik vragen daarover hier ook kwijt?
Ik denk dat het voor dit vraagstuk interessant is om te weten hoe je deze lijst van menu-items presenteert.
Wat in een beheerkant vrij gebruikelijk is is dat je eerst een overzichtslijst toont, eventueel met een paginering ofzo. Op zo'n pagina staat meestal ook een "toevoegen" knop voor het toevoegen van een item. Elk item in de lijst heeft vaak ook een aantal acties die toegepast kunnen worden op het item. Dit zijn ofwel hyperlinks of wellicht buttons. Denk hierbij aan een "wijzig"-knop of -link, een voor het verwijderen, en wellicht een knop om een item omhoog of omlaag te verplaatsen door de lijst.
Al de bovenstaande hyperlinks en buttons verwijzen naar aparte code-segmenten, bijvoorbeeld door middel van een "action" variabele, bijvoorbeeld:
list.php?action=add voor het toevoegen van een item
list.php?action=edit&id=X voor het wijzigen van item X
list.php?action=delete&id=X voor het (na bevestiging) verwijderen van item X
De default actie van list.php is het tonen van bovengenoemde lijst. Na het uitvoeren van de gewenste actie keer je hier ook naar terug, mogelijk met een (tijdelijke) boodschap of de actie is geslaagd of niet.
Dit stelt je in staat om al deze acties apart te implementeren en te wijzigen. Dit helpt enorm bij het verkrijgen en behouden van overzicht in jouw code.
Mogelijk kun je dit later uitbreiden met AJAX zodat het er allemaal wat gelikter uitziet, maar hiervoor kun je vrijwel dezelfde codestructuur gebruiken. Het enige wat verandert is de manier waarop je bovengenoemde acties aanroept.
Als je wat "simpeler" (het bovenstaande is complex genoeg) wilt beginnen laat je AJAX in eerste instantie achterwege. Een aanpak met AJAX is ook wat lastiger te debuggen, dus als je daarmee vastloopt is het vaak een stuk ondoorzichtiger wat er precies misgaat tenzij je al enige ervaring hebt met hoe AJAX werkt. Als je deze ervaring nog niet hebt dan zou ik eerst met wat simpelere dingen beginnen dan direct aan de slag te gaan met een complete AJAX-aangestuurde backend.
Ik maak in PHP de regels die ik in HTML toon. Dit is combinatie met CSS.
Als je op een regel klikt, krijg je die regel boven aan in een HTML-formulier (FORM) dat ik dan toon.
Onder alle regels heb ik een toevoeg knop staan. Ook die opent het zelfde HTML-formulier. Alleen die is dan leeg.
In dat zelfde formulier heb ik 3 buttons. (Ik zie nu dat ik in mijn eerste melding hier niet compleet over was.
Code (php)
1
2
2
<button onclick="Annuleren()" id="Button_Cancel" type="Submit" value="Cancel" class="button_cancel" alt="annuleren"></button>
<button onclick="Verwijderen()" id="Button_Delete" type="Submit" value="Delete" class="button_delete" alt="verwijderen"></button> <button onclick="Opslaan()" id="Button_Save" type="submit" value="Submit" class="button_save" alt="opslaan"></button>
<button onclick="Verwijderen()" id="Button_Delete" type="Submit" value="Delete" class="button_delete" alt="verwijderen"></button> <button onclick="Opslaan()" id="Button_Save" type="submit" value="Submit" class="button_save" alt="opslaan"></button>
De annuleer knop werkt perfect. Die zet alle regels in beeld en sluit het formulier voor wijzigen en toevoegen.
Bij toevoegen heb ik geen ID bij muteren wel.
De knop om te verwijderen heb ik alleen als ik op een regel klik. Dus in de muteer stand.
Ik vind het niet mooi als ik in de URL iets van de actie zie.
Maar ik heb nog ergens een fout.
Als ik in het mutatieformulier op verwijderknop druk, toont hij de tabel regel met de ja/nee-vraag heel even snel, maar knalt direct naar het beginscherm. Dus dat het mutatie scherm weer dicht is. En dat terwijl ik had verwacht dat hij een tabel-regel in beeld zou zouden.
De tabel-regel die hij zou moeten tonen is een ja/nee-vraag. Bij ja moet hij het gevraagde record verwijderen. Bij nee moet hij terug in het mutatieformulier komen.
hier mijn 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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<?php
//beheer_menu.php
error_reporting(E_ALL);
ini_set('display_startup_errors', true);
ini_set('display_errors', 'stdout');
include("init.php");
include("databaseopenen.php"); // openen van de database
$Huidige_bestandsnaam = "beheer_menu.php";
include("menuchecker.php"); // Check de filenaam in de tabel van het menu
$link_menu_beheer = "";
/*
//Het kan niet zijn dat er geen menu is. Want dan kan deze keuze niet gemaakt worden.
*/
?>
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<!-- Created by Artisteer v4.3.0.60745 -->
<meta charset="utf-8">
<title>Geldboom: Menu beheer</title>
<meta name="viewport" content="initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no, width = device-width">
<!--[if lt IE 9]><script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<link rel="stylesheet" href="style.css" media="screen">
<!--[if lte IE 7]><link rel="stylesheet" href="style.ie7.css" media="screen" /><![endif]-->
<link rel="stylesheet" href="style.responsive.css" media="all">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Dancing+Script|Josefin+Sans&subset=latin">
<link rel="stylesheet" href="extra.css" media="all">
<link rel="stylesheet" type="text/css" href="lijsten.css">
<script type="text/javascript" src="jquery.js" ></script>
<script type="text/javascript" src="jquery-3.4.1.min.js" ></script>
<script src="script.js"></script>
<script src="script.responsive.js"></script>
<script type="text/javascript">
// pagina is open
$( document ).ready(function()
{
$('#Add_Form').hide();
});
// Er is een regel aangeklikt
function SelecteerRegel( x, j_idnr, j_waarde, j_subvan, j_tekst, j_link )
{
// formulieren en knoppen tonen of verbergen
$(x).siblings().show(); // alle regels tonen
$(x).hide(); // geselecteerde regel verbergen
$('#Button_Add').hide(); // toevoegknop verbergen
$('#Add_Form').show(); // toevoeg formulier tonen
$('#Button_Delete_Verzoek').show(); // verwijderknop tonen
// velden moeten gevuld worden
$('#fidnr').val(j_idnr);
$('#fwaarde').val(j_waarde);
$('#fsubvan').val(j_subvan);
$('#ftekst').val(j_tekst);
$('#flink').val(j_link);
};
// Er is op de toevoeg-knop geklikt
function Toevoegen()
{
// formulieren en knoppen tonen of verbergen
$('#Add_Form').show(); // toevoeg formulier tonen
$('#Button_Delete_Verzoek').hide(); // verwijderknop verbergen
$('#Button_Add').hide(); // toevoegknop verbergen
};
</script>
</head>
<body>
<div id="art-main">
<?php
if (file_exists($filename)) {
include ("menu.php");
}
?>
<div class="art-sheet clearfix">
<div class="art-layout-wrapper">
<div class="art-content-layout">
<div class="art-content-layout-row">
<?php include ("blok_links.php"); ?>
<!-- Content blok -->
<Table>
<tr><td>
<div class="art-layout-cell art-content">
<article class="art-post art-article">
<div class="art-postcontent art-postcontent-0 clearfix">
<H1 align="center">Menu beheer</H1>
<table>
<tr id = "Add_Form">
<td>
<?php include ("menu_tabel_toevoegen_muteren.php");?>
</td>
</tr>
<tr id = "show_lines"><td>
<table id = "Tabel" class = "hovertabel">
<thead>
<tr>
<th>Waarde</th><th>Sub van</th><th>Menulabel</th><th>Link naar pagina</th>
</tr>
</thead>
<tbody id="datalijst"> <!-- Hier volgt de lijst -->
<?php include ("menu_tabel_tonen.php"); ?>
</tbody>
<tfoot>
<tr>
<th colspan="4">
<button onclick="Toevoegen()" id="Button_Add" type="Submit" value="New" class="button_add" alt="Nieuwe toevoegen"></button>
</th>
</tr>
</tfoot>
</table>
</td></tr>
</table>
</div>
</article>
</div>
</td></tr>
</table>
<!-- einde Content blok -->
</div>
</div>
</div>
</div>
</div>
<?php include("footer.php"); ?>
</body>
</html>
//beheer_menu.php
error_reporting(E_ALL);
ini_set('display_startup_errors', true);
ini_set('display_errors', 'stdout');
include("init.php");
include("databaseopenen.php"); // openen van de database
$Huidige_bestandsnaam = "beheer_menu.php";
include("menuchecker.php"); // Check de filenaam in de tabel van het menu
$link_menu_beheer = "";
/*
//Het kan niet zijn dat er geen menu is. Want dan kan deze keuze niet gemaakt worden.
*/
?>
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<!-- Created by Artisteer v4.3.0.60745 -->
<meta charset="utf-8">
<title>Geldboom: Menu beheer</title>
<meta name="viewport" content="initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no, width = device-width">
<!--[if lt IE 9]><script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<link rel="stylesheet" href="style.css" media="screen">
<!--[if lte IE 7]><link rel="stylesheet" href="style.ie7.css" media="screen" /><![endif]-->
<link rel="stylesheet" href="style.responsive.css" media="all">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Dancing+Script|Josefin+Sans&subset=latin">
<link rel="stylesheet" href="extra.css" media="all">
<link rel="stylesheet" type="text/css" href="lijsten.css">
<script type="text/javascript" src="jquery.js" ></script>
<script type="text/javascript" src="jquery-3.4.1.min.js" ></script>
<script src="script.js"></script>
<script src="script.responsive.js"></script>
<script type="text/javascript">
// pagina is open
$( document ).ready(function()
{
$('#Add_Form').hide();
});
// Er is een regel aangeklikt
function SelecteerRegel( x, j_idnr, j_waarde, j_subvan, j_tekst, j_link )
{
// formulieren en knoppen tonen of verbergen
$(x).siblings().show(); // alle regels tonen
$(x).hide(); // geselecteerde regel verbergen
$('#Button_Add').hide(); // toevoegknop verbergen
$('#Add_Form').show(); // toevoeg formulier tonen
$('#Button_Delete_Verzoek').show(); // verwijderknop tonen
// velden moeten gevuld worden
$('#fidnr').val(j_idnr);
$('#fwaarde').val(j_waarde);
$('#fsubvan').val(j_subvan);
$('#ftekst').val(j_tekst);
$('#flink').val(j_link);
};
// Er is op de toevoeg-knop geklikt
function Toevoegen()
{
// formulieren en knoppen tonen of verbergen
$('#Add_Form').show(); // toevoeg formulier tonen
$('#Button_Delete_Verzoek').hide(); // verwijderknop verbergen
$('#Button_Add').hide(); // toevoegknop verbergen
};
</script>
</head>
<body>
<div id="art-main">
<?php
if (file_exists($filename)) {
include ("menu.php");
}
?>
<div class="art-sheet clearfix">
<div class="art-layout-wrapper">
<div class="art-content-layout">
<div class="art-content-layout-row">
<?php include ("blok_links.php"); ?>
<!-- Content blok -->
<Table>
<tr><td>
<div class="art-layout-cell art-content">
<article class="art-post art-article">
<div class="art-postcontent art-postcontent-0 clearfix">
<H1 align="center">Menu beheer</H1>
<table>
<tr id = "Add_Form">
<td>
<?php include ("menu_tabel_toevoegen_muteren.php");?>
</td>
</tr>
<tr id = "show_lines"><td>
<table id = "Tabel" class = "hovertabel">
<thead>
<tr>
<th>Waarde</th><th>Sub van</th><th>Menulabel</th><th>Link naar pagina</th>
</tr>
</thead>
<tbody id="datalijst"> <!-- Hier volgt de lijst -->
<?php include ("menu_tabel_tonen.php"); ?>
</tbody>
<tfoot>
<tr>
<th colspan="4">
<button onclick="Toevoegen()" id="Button_Add" type="Submit" value="New" class="button_add" alt="Nieuwe toevoegen"></button>
</th>
</tr>
</tfoot>
</table>
</td></tr>
</table>
</div>
</article>
</div>
</td></tr>
</table>
<!-- einde Content blok -->
</div>
</div>
</div>
</div>
</div>
<?php include("footer.php"); ?>
</body>
</html>
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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
<?php
//menu_tabel_toevoegen_muteren.php
if(isset($_POST['knoppen']))
{
switch ($_POST['knoppen'])
{
case 'Submit': // Opslaan van het record
$i_waarde = $_POST['fwaarde'];
$i_subvan = $_POST['fsubvan'];
$i_tekst = $_POST['ftekst'];
$i_link = $_POST['flink'];
if (strlen($_POST['fidnr'])>>0)
{
$i_idnr = $_POST['fidnr'];
$query_insert_update_menu = "UPDATE tabel_menu SET menu_waarde='" . $i_waarde . "', menu_sub_van='" . $i_subvan . "', menu_tekst='" . $i_tekst . "', menu_link='" . $i_link . "' WHERE menu_id = ". $i_idnr;
}
else
{
$query_insert_update_menu = "INSERT INTO `tabel_menu` (`menu_id`, `menu_waarde`, `menu_sub_van`, `menu_tekst`, `menu_link`) VALUES (NULL, '$i_waarde', '$i_subvan', '$i_tekst', '$i_link')";
}
if ($connect->query($query_insert_update_menu) === TRUE)
{
echo "Record opgeslagen";
}
else
{
echo "Bij het opslaan gaat er iets mis.";
}
$query_insert_update_menu = "";
break;
case 'Delete': // Verwijderen van het record
$i_idnr = $_POST['fidnr'];
$query_delete_menu = "DELETE FROM tabel_menu WHERE menu_id = $i_idnr";
if ($connect->query($query_delete_menu) === TRUE)
{
echo "Record verwijderd";
}
else
{
echo "Bij het verwijderen gaat er iets mis.";
}
$query_delete_menu = "";
break;
case 'Delete_Request': // Verwijderen van het record
break;
default: // Situatie terug brengen in oude staat.
break;
}
}
?>
<Form id = "Add_Row" class="hoverinput" method='post'>
<table id = "FormTabel" >
<TR>
<th >
Waarde:
</th >
<th >
Sub van:
</th>
</tr>
<tr>
<td >
<input type="text" id = "fwaarde" name="fwaarde" autofocus size="5">
</td >
<td >
<input type="text" id = "fsubvan" name="fsubvan" size="5">
<span style = "visibility:hidden;"><input type="text" id = "fidnr" name="fidnr"></span>
<br>
</td>
</tr>
<tr>
<th colspan="2" >
<label for = "Ftekst">Menulabel:</label><BR>
</th>
</tr>
<tr>
<td colspan="2" >
<input type="text" id = "ftekst" name="ftekst" size="50">
</td>
</tr>
<tr>
<th colspan="2" >
<label for = "Flink">Link naar pagina:</label>
</th>
</tr>
<tr>
<td colspan="2" >
<input type="text" id = "flink" name="flink" size="50">
</td>
</tr>
<tr id = "Knoppen_Add_Form">
<td colspan="2" align="center">
<button onclick="Annuleren()" id="Button_Cancel" type="Submit" name="knoppen" value="Cancel" class="button_cancel" alt="annuleren"></button>
<button onclick="Verwijderen_Nee_Ja()" id="Button_Delete_Verzoek" type="Submit" name="knoppen" value="Delete_Request" class="button_delete" alt="verwijderen" ></button>
<button onclick="Opslaan()" id="Button_Save" type="submit" name="knoppen" value="Submit" class="button_save" alt="opslaan"></button>
</td>
</tr>
<tr id = "Delete_Yes_No">
<td colspan="2" align="center">
<H2>Weet u zeker dat u deze gegevens wilt verwijderen?</h2><BR>
<button onclick="Verwijderen_Nee()" id="Button_Cancel_No" type="reset" name="knoppen" value="Cancel_No" alt="Niet verwijderen">Nee</button>
<button onclick="Verwijderen_Ja()" id="Button_Delete" type="Submit" name="knoppen" value="Delete" alt="Wel verwijderen" >Ja</button>
</td>
</tr>
</table>
</Form>
<script type="text/javascript">
$( document ).ready(function()
{
$('#Delete_Yes_No').hide(); // verwijdervraag verbergen
$('#Knoppen_Add_Form').show(); // knoppen tonen
if ( $("#fidnr").val().length === 0 ) // nieuw record
{
$('#Button_Delete_Verzoek').hide(); // verwijderknop verbergen
}
else // bestaand record mag ook verwijderd worden
{
$('#Button_Delete_Verzoek').show(); // verwijderknop tonen
}
}
);
// als de verwijder knop gedrukt wordt, moet er een vraag volgen
function Verwijderen_Nee_Ja()
{
$('#Delete_Yes_No').show(); // verwijdervraag tonen
$('#knoppen_Add_Form').hide(); // knoppen verbergen
}
function Verwijderen_Nee()
{
$('#knoppen_Add_Form').show(); // knoppen tonen
$('#Delete_Yes_No').hide(); // verwijdervraag verbergen
}
// Er is op de verwijder-knop geklikt
function Verwijderen_Ja()
{
// formulieren en knoppen aan of uit zetten
$('#knoppen_Add_Form').show(); // knoppen tonen
$('#Delete_Yes_No').hide(); // verwijdervraag verbergen
$('#Button_Add').show(); // toevoegknop tonen
$('#Add_Form').hide(); // toevoeg formulier verbergen
};
// Er is op de annuleer-knop geklikt
function Annuleren()
{
// formulieren en knoppen tonen of verbergen
$('#Button_Add').show(); // toevoegknop tonen
$('#Add_Form').hide(); // toevoeg formulier verbergen
};
function Opslaan()
{
// onderstaande waarden van i_.... werken. Dit heb ik gecheckt
var i_waarde = $("#fwaarde").val();
var i_subvan = $("#fsubvan").val();
var i_tekst = $("#ftekst").val();
var i_link = $("#flink").val();
if ( $("#fidnr").val().length === 0 ) // nieuw record
{
var form_data = {
menu_waarde: i_waarde,
menu_subvan: i_subvan,
menu_tekst: i_tekst,
menu_link: i_link
}
}
else
{
var menu_idnr = $("#fwaarde").val();
var form_data = {
menu_id: i_idnr,
menu_waarde: i_waarde,
menu_subvan: i_subvan,
menu_tekst: i_tekst,
menu_link: i_link
}
}
$.ajax
({
url:'menu_tabel_toevoegen_muteren.php',
method:'POST',
data: form_data,
success: function()
{
}
});
// formulieren en knoppen tonen of verbergen
$('#Button_Add').show(); // toevoegknop tonen
$('#Add_Form').hide(); // toevoeg formulier verbergen
};
</script>
//menu_tabel_toevoegen_muteren.php
if(isset($_POST['knoppen']))
{
switch ($_POST['knoppen'])
{
case 'Submit': // Opslaan van het record
$i_waarde = $_POST['fwaarde'];
$i_subvan = $_POST['fsubvan'];
$i_tekst = $_POST['ftekst'];
$i_link = $_POST['flink'];
if (strlen($_POST['fidnr'])>>0)
{
$i_idnr = $_POST['fidnr'];
$query_insert_update_menu = "UPDATE tabel_menu SET menu_waarde='" . $i_waarde . "', menu_sub_van='" . $i_subvan . "', menu_tekst='" . $i_tekst . "', menu_link='" . $i_link . "' WHERE menu_id = ". $i_idnr;
}
else
{
$query_insert_update_menu = "INSERT INTO `tabel_menu` (`menu_id`, `menu_waarde`, `menu_sub_van`, `menu_tekst`, `menu_link`) VALUES (NULL, '$i_waarde', '$i_subvan', '$i_tekst', '$i_link')";
}
if ($connect->query($query_insert_update_menu) === TRUE)
{
echo "Record opgeslagen";
}
else
{
echo "Bij het opslaan gaat er iets mis.";
}
$query_insert_update_menu = "";
break;
case 'Delete': // Verwijderen van het record
$i_idnr = $_POST['fidnr'];
$query_delete_menu = "DELETE FROM tabel_menu WHERE menu_id = $i_idnr";
if ($connect->query($query_delete_menu) === TRUE)
{
echo "Record verwijderd";
}
else
{
echo "Bij het verwijderen gaat er iets mis.";
}
$query_delete_menu = "";
break;
case 'Delete_Request': // Verwijderen van het record
break;
default: // Situatie terug brengen in oude staat.
break;
}
}
?>
<Form id = "Add_Row" class="hoverinput" method='post'>
<table id = "FormTabel" >
<TR>
<th >
Waarde:
</th >
<th >
Sub van:
</th>
</tr>
<tr>
<td >
<input type="text" id = "fwaarde" name="fwaarde" autofocus size="5">
</td >
<td >
<input type="text" id = "fsubvan" name="fsubvan" size="5">
<span style = "visibility:hidden;"><input type="text" id = "fidnr" name="fidnr"></span>
<br>
</td>
</tr>
<tr>
<th colspan="2" >
<label for = "Ftekst">Menulabel:</label><BR>
</th>
</tr>
<tr>
<td colspan="2" >
<input type="text" id = "ftekst" name="ftekst" size="50">
</td>
</tr>
<tr>
<th colspan="2" >
<label for = "Flink">Link naar pagina:</label>
</th>
</tr>
<tr>
<td colspan="2" >
<input type="text" id = "flink" name="flink" size="50">
</td>
</tr>
<tr id = "Knoppen_Add_Form">
<td colspan="2" align="center">
<button onclick="Annuleren()" id="Button_Cancel" type="Submit" name="knoppen" value="Cancel" class="button_cancel" alt="annuleren"></button>
<button onclick="Verwijderen_Nee_Ja()" id="Button_Delete_Verzoek" type="Submit" name="knoppen" value="Delete_Request" class="button_delete" alt="verwijderen" ></button>
<button onclick="Opslaan()" id="Button_Save" type="submit" name="knoppen" value="Submit" class="button_save" alt="opslaan"></button>
</td>
</tr>
<tr id = "Delete_Yes_No">
<td colspan="2" align="center">
<H2>Weet u zeker dat u deze gegevens wilt verwijderen?</h2><BR>
<button onclick="Verwijderen_Nee()" id="Button_Cancel_No" type="reset" name="knoppen" value="Cancel_No" alt="Niet verwijderen">Nee</button>
<button onclick="Verwijderen_Ja()" id="Button_Delete" type="Submit" name="knoppen" value="Delete" alt="Wel verwijderen" >Ja</button>
</td>
</tr>
</table>
</Form>
<script type="text/javascript">
$( document ).ready(function()
{
$('#Delete_Yes_No').hide(); // verwijdervraag verbergen
$('#Knoppen_Add_Form').show(); // knoppen tonen
if ( $("#fidnr").val().length === 0 ) // nieuw record
{
$('#Button_Delete_Verzoek').hide(); // verwijderknop verbergen
}
else // bestaand record mag ook verwijderd worden
{
$('#Button_Delete_Verzoek').show(); // verwijderknop tonen
}
}
);
// als de verwijder knop gedrukt wordt, moet er een vraag volgen
function Verwijderen_Nee_Ja()
{
$('#Delete_Yes_No').show(); // verwijdervraag tonen
$('#knoppen_Add_Form').hide(); // knoppen verbergen
}
function Verwijderen_Nee()
{
$('#knoppen_Add_Form').show(); // knoppen tonen
$('#Delete_Yes_No').hide(); // verwijdervraag verbergen
}
// Er is op de verwijder-knop geklikt
function Verwijderen_Ja()
{
// formulieren en knoppen aan of uit zetten
$('#knoppen_Add_Form').show(); // knoppen tonen
$('#Delete_Yes_No').hide(); // verwijdervraag verbergen
$('#Button_Add').show(); // toevoegknop tonen
$('#Add_Form').hide(); // toevoeg formulier verbergen
};
// Er is op de annuleer-knop geklikt
function Annuleren()
{
// formulieren en knoppen tonen of verbergen
$('#Button_Add').show(); // toevoegknop tonen
$('#Add_Form').hide(); // toevoeg formulier verbergen
};
function Opslaan()
{
// onderstaande waarden van i_.... werken. Dit heb ik gecheckt
var i_waarde = $("#fwaarde").val();
var i_subvan = $("#fsubvan").val();
var i_tekst = $("#ftekst").val();
var i_link = $("#flink").val();
if ( $("#fidnr").val().length === 0 ) // nieuw record
{
var form_data = {
menu_waarde: i_waarde,
menu_subvan: i_subvan,
menu_tekst: i_tekst,
menu_link: i_link
}
}
else
{
var menu_idnr = $("#fwaarde").val();
var form_data = {
menu_id: i_idnr,
menu_waarde: i_waarde,
menu_subvan: i_subvan,
menu_tekst: i_tekst,
menu_link: i_link
}
}
$.ajax
({
url:'menu_tabel_toevoegen_muteren.php',
method:'POST',
data: form_data,
success: function()
{
}
});
// formulieren en knoppen tonen of verbergen
$('#Button_Add').show(); // toevoegknop tonen
$('#Add_Form').hide(); // toevoeg formulier verbergen
};
</script>
Gewijzigd op 30/03/2020 23:53:09 door Frits van Leeuwen
Ik vind rond de 300 regels een beetje te gortig.
Alle knoppen van de form zijn immers van het type "submit". Het default gedrag is dat vervolgens het formulier gePOST wordt, maar dat is dus nooit de bedoeling omdat je hebt besloten om alles via AJAX af te handelen. Een goed begin zou dus zijn om hier buttons van simpelweg het type="button" van te maken.
Maar je zou ook onclicks kunnen toevoegen die een return-waarde verwachten. Als je zorgt dat de return waarde false is dan zal de submit nooit plaatsvinden.
Weer een andere manier, en wellicht beter, is dat je gewoon je click-events definieert in JavaScript/jQuery. Dan hoef je je HTML ook niet te doorspekken met JavaScript maar houd je dat lekker gescheiden allemaal. Met jQuery kun je het default gedrag van events afvangen met de preventDefault() methode. Ingeval van een submitbutton houdt dat in dat dan het formulier niet gesubmit wordt.
Of je vangt het gewoon op het formulier niveau af, als een soort van catch-all, wellicht is dat nog het simpelste.
Niet getest, maar dit zou ook moeten werken:
Code (php)
1
2
3
4
5
2
3
4
5
$('#Add_Row').submit(function(e) {
// never submit form, we use AJAX calls for this
e.preventDefault();
alert('preventing form submission!'); // bij wijze van test om te zien of dit altijd wordt tegengehouden
});
// never submit form, we use AJAX calls for this
e.preventDefault();
alert('preventing form submission!'); // bij wijze van test om te zien of dit altijd wordt tegengehouden
});
Trouwens, mogelijk een tip. Scheid ofwel variabelen met underscores: add_form, of gebruik Hoofdletters: AddForm, maar niet beide, dat leest nou niet bepaald prettig.
Thomas van den Heuvel, hartelijk dank voor het uitgebreide antwoord. Ik was vergeten dat ik bij "submit" ook "button" kon invullen. Ik was er wel naar op zoek gegaan, maar vond alleen "reset", maar die wilde ik niet gebruiken. Ik had immers wel een vermoede dat het daar zou kunnen zitten.
Ook bedankt voor de alternatieven en de tip aan het eind. Bedankt.
Ik laat weten welke oplossing ik uiteindelijk heb gekozen.
Ik heb ook nog een andere vraag die hierbij past. Als ik de pagina start, zie ik even alles, dus ook het invulformulier. Hoe kan ik die ook bij het starten verbergen?
Dat zou wel inhouden dat het weinig doet zonder JavaScript. Aan de andere kant, bij deze opzet is het gebruik van JavaScript onvermijdelijk, dus wat dat betreft maakt het niet zoveel uit.
BEDANKT
Ik heb inderdaad de "Submit" in "Button" veranderd.
En bij "id = Add_Form" ook een class aangeroepen die in de CSS de regel verbergt.
Helemaal top. Bedankt weer voor deze service, uitleg en tips.
Ik heb nu deze code staan
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
// Er is een regel aangeklikt
function SelecteerRegel( x, j_idnr, j_waarde, j_subvan, j_tekst, j_link )
{
// formulieren en knoppen tonen of verbergen
$(x).siblings().show(); // alle regels tonen
$(x).hide(); // geselecteerde regel verbergen
$('#Button_Add').hide(); // toevoegknop verbergen
$('#Add_Form').show(); // toevoeg formulier tonen
$('#Button_Delete_Verzoek').show(); // verwijderknop tonen
// velden moeten gevuld worden
$('#fidnr').val(j_idnr);
$('#fwaarde').val(j_waarde);
$('#fsubvan').val(j_subvan);
$('#ftekst').val(j_tekst);
$('#flink').val(j_link);
};
function SelecteerRegel( x, j_idnr, j_waarde, j_subvan, j_tekst, j_link )
{
// formulieren en knoppen tonen of verbergen
$(x).siblings().show(); // alle regels tonen
$(x).hide(); // geselecteerde regel verbergen
$('#Button_Add').hide(); // toevoegknop verbergen
$('#Add_Form').show(); // toevoeg formulier tonen
$('#Button_Delete_Verzoek').show(); // verwijderknop tonen
// velden moeten gevuld worden
$('#fidnr').val(j_idnr);
$('#fwaarde').val(j_waarde);
$('#fsubvan').val(j_subvan);
$('#ftekst').val(j_tekst);
$('#flink').val(j_link);
};
Ik roep die aan vanuit de ondersstaande 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
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
<?php
//menu_tabel_tonen.php
$query_menu_beheer =
"SELECT menu_id, menu_sub_van, menu_waarde, menu_tekst, menu_link
FROM tabel_menu
ORDER BY menu_sub_van, menu_waarde";
$result_menu_beheer = mysqli_query($connect, $query_menu_beheer);
// *** regels vullen ***
$i = 0;
foreach($result_menu_beheer as $record_menu_beheer)
{
$i = $i + 1;
// *** regel maken ***
echo
"<tr id='regel' class='clickregel' onclick='SelecteerRegel( this, " . $record_menu_beheer['menu_id'] . ", "
. $record_menu_beheer['menu_waarde'] . ", "
. $record_menu_beheer['menu_sub_van'] .", \""
. $record_menu_beheer['menu_tekst'] . "\", \""
. $record_menu_beheer['menu_link'] . "\" )'>
<td align = right>". $record_menu_beheer['menu_waarde'] . "</td>
<td align = right>" . $record_menu_beheer['menu_sub_van'] . "</td>
<td align = left>" . $record_menu_beheer['menu_tekst'] . "</td>
<td align = left>" . $record_menu_beheer['menu_link'] . "</td>
</tr>";
// *** einde regel maken ***
}
// *** einde regels vullen ***
?>
//menu_tabel_tonen.php
$query_menu_beheer =
"SELECT menu_id, menu_sub_van, menu_waarde, menu_tekst, menu_link
FROM tabel_menu
ORDER BY menu_sub_van, menu_waarde";
$result_menu_beheer = mysqli_query($connect, $query_menu_beheer);
// *** regels vullen ***
$i = 0;
foreach($result_menu_beheer as $record_menu_beheer)
{
$i = $i + 1;
// *** regel maken ***
echo
"<tr id='regel' class='clickregel' onclick='SelecteerRegel( this, " . $record_menu_beheer['menu_id'] . ", "
. $record_menu_beheer['menu_waarde'] . ", "
. $record_menu_beheer['menu_sub_van'] .", \""
. $record_menu_beheer['menu_tekst'] . "\", \""
. $record_menu_beheer['menu_link'] . "\" )'>
<td align = right>". $record_menu_beheer['menu_waarde'] . "</td>
<td align = right>" . $record_menu_beheer['menu_sub_van'] . "</td>
<td align = left>" . $record_menu_beheer['menu_tekst'] . "</td>
<td align = left>" . $record_menu_beheer['menu_link'] . "</td>
</tr>";
// *** einde regel maken ***
}
// *** einde regels vullen ***
?>
Maar eigenlijk zou ik het mooi vinden als ik alleen de id mee neem, en dan met een select query het formulier open waar die alvast ingevuld is.
Ik wil daar het zelfde formulier voor gebruiken als het toevoegen, maar bij het toevoegen is het formulier leeg.
Terugkerend naar beantwoording oorspronkelijke vraag. Je wilt JS gebruiken voor database-mutaties. Een legitiem argument hiervoor zou kunnen zijn page-(re)loads beperken (SPA?). Een mooie oplossing, zoals reeds aangereikt, AJAX.
Bedoel je met "mixing concerns" dat ik veel soorten code door elkaar gooi? Ik doe al mijn best om het gescheiden te houden.
PHP boven aan en Javascript in de HEAD van HTML en dan de rest van HTML. Maar ik zie ook veel voorbeelden dat Javascript onderaan staat. Ik begin langzaam meer te begrijpen van Jquery en nu probeer ik ook ajax te doorgronden. Maar ik kan niet zeggen dat ik het op dit moment makkelijk vind. Vandaar ook dat ik het een en ander uiteen zet. In de hoop dat iemand weer een goude tip voor me heeft, waardoor ik het weer beter ga begrijpen.
Gouden tip: begin 'ns met routing via index.php en je scripts te ordenen. Je kan afkijken bij PHP microframeworks of vanuit een paradigm (bijvoorbeeld MVC) je scripts onderbrengen in verschillende folders en zelf iets uitwerken.
Persoonlijk vind ik het prettig models, controllers, views, classes en templates in aparte folders onder te brengen. Tevens heb ik een folder met assets, waarin onder andere js, css en image-bestanden zijn ondergebracht (in dito folders).
Gebruik je bijvoorbeeld zelf al een template-engine?