met Ajax variabele naar php overbrengen
Ik doe ergens iets niet goed. Ik heb geen idee wat.
De regel "alert("record_id = " + id); " in de onderstaande code geeft aan dat id is gevuld met bijvoorbeeld 36.
Maar als ik daarna verder ga met de code wordt de code niet naar menu_tabel_update.php overgebracht te worden.
In beheer_menu.php heb ik de volgende code:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function SelecteerRegel( x, id)
{
$(x).siblings().show();
$(x).hide();
$('#Button_Add').hide();
$('#Update_Form').show();
$('#Delete_Yes_No').hide();
alert("record_id = " + id);
$.ajax
({
type: "POST",
data: {id: id},
url: "menu_tabel_update.php",
dataType: "xml",
success: function(data)
{
alert(data);
}
});
};
{
$(x).siblings().show();
$(x).hide();
$('#Button_Add').hide();
$('#Update_Form').show();
$('#Delete_Yes_No').hide();
alert("record_id = " + id);
$.ajax
({
type: "POST",
data: {id: id},
url: "menu_tabel_update.php",
dataType: "xml",
success: function(data)
{
alert(data);
}
});
};
"var_dump($_POST);" geeft in menu_tabel_update.php
array(0) { }
Ik probeer daar met $_POST['íd'] de waarde over te nemen.
Ziet iemand waar ik de fout ingegaan ben?
Gewijzigd op 20/04/2020 00:36:01 door Frits van Leeuwen
Er mist iets aan tekst?
Frits van Leeuwen op 20/04/2020 00:22:50:
"var_dump($_POST);" geeft in menu_tabel_update.php array(0) { }
Hoe constateer je dit? Bekijk je de response van menu_tabel_update.php in de netwerk-tab ofzo?
Mogelijk gaat dat niet helemaal lekker omdat je zegt dat het formaat van retour-informatie (dataType) gelijk is aan XML (en hoezo XML? niet JSON ofzo?).
EDIT: voor de goede orde zou je ook 'id': id moeten gebruiken. Dus met quotes om de keys, het een is een tekst, het ander een echte waarde. Anders krijg je wellicht een "je kunt geen waarde aan een constante toekennen"-foutmelding ofzo.
En weet je ook zeker dat er niets gesubmit wordt, en dat je dus niet wegnavigeert van de pagina ofzo?
Ik heb een deja vu. Is zeer recent iets soortgelijks niet al eerder gevraagd?
In plaats van de netwerktab zou je dus ook de console kunnen controleren, het is waarschijnlijker dat JavaScript ergens over zijn nek gaat.
Gewijzigd op 20/04/2020 00:47:06 door Thomas van den Heuvel
Er staat een schat aan informatie in die je kan helpen met troubleshooten.
Zie je dit niet, dan vindt de AJAX-request niet eens plaats.
Gewijzigd op 20/04/2020 00:44:22 door - Ariën -
var_dump($_POST);
Staat bovenaan in de code van menu_tabel_update.php
Deze geeft dan array(0) { } in beeld
Toevoeging op 20/04/2020 12:15:28:
NB 'type' is een alias voor 'method'. Het is waarschijnlijk beter om 'method' te gebruiken (dus 'method': 'POST'). Ik zou hierbij ook alle keys voorzien van quotes ten einde verwarring te voorkomen tussen tekstuele labels en variabelen, zoals al eerder aangegeven.
console
SCRIPT438: SCRIPT438: Object doesn't support property or method 'ajax'
nerwerk
404 melding op het bestand "jquery.min.map" Maar die roep ik nergens aan, dus die snap ik niet
Ik heb de aanwijzingen overgenomen. Dus method gebruikt en quotes gebruikt
Ik gebruik jquery-3.5.0.slim.js met Ajax er in.
Dat zegt de error ook.
Ik ga dit nog eens controleren en kom er dan op terug.
Toevoeging op 23/04/2020 00:02:03:
Ja stom van me. Ik heb nu jquery-3.5.0.min.js gedownload en online geplaatst.
Nu heb ik:
In Edge F12
console
Geen melding meer die hier iets mee te maken heeft.
nerwerk
404 melding op het bestand "jquery.min.map" Is er dus nog steeds.
En het werkt verder ook nog niet.
Ik gebruik jquery-3.5.0.slim.js met Ajax er in.
Ik heb een query die ik toon in een lijst waar ik op kan klikken. Waarmee ik een mutatie formulier er boven van hidden af haal en met Ajax probeer te vullen.
Het Id nummer zie ik in de Alert voor de Ajax actie. Maar het formulier wordt niet gevuld omdat ik het Id niet in het formulier krijg. In dit formulier probeer ik met een query alleen dat bewuste record te openen.
In de lijst heb ik niet alle velden die ik wel in het formulier wil hebben. En ik wil ook niet alle velden nomen in de link om alles door te zetten naar het mutatieformulier.
ik heb als structuur het volgende:
Beheer.php heeft een include voor toevoegen, muteren en tonen.
Het tonen gebruik ik om de lijst te tonen, en die blijft in beeld.
Toevoegen gebruik ik om een record toe te voegen. Die wordt getoond als ik op een toevoeg knop klik.
Muteren gebruik ik als ik op een regel klik. Daar kan ik ook verwijderen kiezen. (als ik hem in het formulier heb.)
Zelf denk ik dat ik op de een of andere manier beter met Jquery met de 'this' mogelijkheid het formulier kan vullen, maar ik heb geen idee hoe.
Dat gezegd hebbende, als je informatie ophaalt, is het logischer dat je GET gebruikt, al zou dat voor de werking van een AJAX call verder niets uit hoeven te maken.
Als dit vertrouwelijke informatie bevat is het wel zaak dat het bewuste PHP-bestand afgeschermd is zodat niet iedereen deze rechtstreeks kan benaderen. Op eenzelfde wijze zal het PHP-bestand dat nieuwe records en wijzigingen wegschrijft ook beveiligd moeten worden.
Maar met GET verwacht je toch een antwoord? Maar dat lijkt me niet nodig als ik het formulier heb gevuld. Als dat is gelukt, kan ik met een update query makkelijk opgeslagen worden.
Voor alsnog heb ik alles in een lokaal netwerk. Beveiligingen komen later aan bod, als ik over het internet heen wil.
Frits van Leeuwen op 23/04/2020 19:10:32:
Maar met GET verwacht je toch een antwoord?
Niet per se? Als dit een standalone PHP-bestand zou zijn zou dit toch prima kunnen via /admin.php?action=edit&id=1234 of iets dergelijks?
Frits van Leeuwen op 23/04/2020 19:10:32:
Voor alsnog heb ik alles in een lokaal netwerk. Beveiligingen komen later aan bod, als ik over het internet heen wil.
Dat lijkt mij gewoon een slecht idee. In alle facetten van je programma-ontwerp zou je security mee moeten nemen, dus ook tijdens de bouw. Dat is niet een saus die je hier na afloop overheen giet.
Stel dat je straks besluit dat een single-point-of-entry aanpak een goed manier is om alles goed te beveiligen omdat op die manier je applicatie slechts één voordeur heeft die je fatsoenlijk dicht moet timmeren. Maar je bedenkt je dat pas helemaal aan het eind. Mogelijk moet je dan alle code omgooien om dit stramien te kunnen volgen. Deze ellende had je met enige voorbereiding en een duidelijk plan dan kunnen voorkomen, nu ben je een beetje code aan het freewheelen en ga je pas nadenken als je uitgeprogrammeerd bent? Nu-uh, geen goed idee.
Dit is zoiets als een huis bouwen, en dan, als je klaar bent, je realiseren dat een kelder wel handig was geweest.
Als voorbeeld: het volgende werkt gewoon prima, dus ik heb geen idee wat er misgaat (even alles in één bestand gefrommeld bij wijze van test):
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
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
<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
header('Content-Type: application/json; charset=UTF-8');
echo json_encode('received id '.$_POST['id']); // dit is wat je terugkrijgt in de success(d) callback
exit;
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX test</title>
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
</head>
<body>
<button type="button" id="button">click me</button>
<script type="text/javascript">
//<![CDATA[
$().ready(function() {
function whatever(id) {
$.ajax({
'url': '<?php echo $_SERVER['SCRIPT_NAME']; ?>',
'method': 'POST',
'data': {'id': id},
'dataType': 'JSON', // return type of d
'success': function(d) {
alert(d);
}
});
}
$('#button').click(function(e) {
e.preventDefault();
var id = Math.round(Math.random() * 100);
console.log('sending id '+id);
whatever(id);
});
});
//]]>
</script>
</body>
</html>
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
header('Content-Type: application/json; charset=UTF-8');
echo json_encode('received id '.$_POST['id']); // dit is wat je terugkrijgt in de success(d) callback
exit;
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX test</title>
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
</head>
<body>
<button type="button" id="button">click me</button>
<script type="text/javascript">
//<![CDATA[
$().ready(function() {
function whatever(id) {
$.ajax({
'url': '<?php echo $_SERVER['SCRIPT_NAME']; ?>',
'method': 'POST',
'data': {'id': id},
'dataType': 'JSON', // return type of d
'success': function(d) {
alert(d);
}
});
}
$('#button').click(function(e) {
e.preventDefault();
var id = Math.round(Math.random() * 100);
console.log('sending id '+id);
whatever(id);
});
});
//]]>
</script>
</body>
</html>
Gewijzigd op 24/04/2020 01:05:53 door Thomas van den Heuvel
Je hebt gelijk over de beveiliging. Ik dacht daar wel aan, maar dat is een punt waar ik iets later aan ga sleutelen. Ik wil eerst dit punt oplossen. Mijn project staat echt nog in de kinderschoenen, of misschien daar nog niet eens.
Ik ben begonnen een leuke layout te kiezen in Artisteer, maar daarna heb ik er de eerste dingen in gezet.
Dat is allemaal nog spul dat niet echt beveiligd hoeft te worden. Maar als het onderdeel goed werkt waar ik nu mee bezig ben, dan zal ik ook aan de beveiliging gaan werken.
Zoals je hebt kunnen lezen, heb roep via Ajax een PHP bestand op. Daarin staat ook het formulier dat ik open.
Ik probeer nu de door jou gegeven code daarnaartoe te vertalen, Maar dat is me nog niet gelukt.
Of is jouw advies nu om te kijken of dat ik dit formulier juist in het basis bestand plaats. Ik kan me voorstellen dat het misschien helemaal niet nodig is om weer een nieuwe query te maken om dit formulier te vullen met de gegevens die horen bij de gekozen regel.
Je merkt vast wel, dat ik nu erg aan het twijfelen ben welke nou de beste keuze is.
Frits van Leeuwen op 25/04/2020 00:02:26:
Zoals je hebt kunnen lezen, heb roep via Ajax een PHP bestand op. Daarin staat ook het formulier dat ik open.
Okay, bedoel je daarmee dat je een zwik HTML inlaadt die in wezen de complete HTML-code voor het formulier bevat? Of plaats je de data in de values-velden? Ik zie nergens code die dat doet? Ik begrijp niet helemaal waar het schip strandt? Zou je alle relevante code kunnen geven van waar je mee bezig bent? Wat het verwachte gedrag is, en wat het daadwerkelijke gedrag is?
Als je trouwens dynamisch HTML inlaadt, en daarin velden zitten waar je events aan wilt koppelen, dat gaat mogelijk niet werken, omdat de elementen mogelijk niet bestaan op het moment dat je de koppeling probeert te maken, of wanneer het formulier op een gegeven moment volledig uit de broncode verdwijnt, dan zijn je events weg of bestaan ze simpelweg niet, dat zou je op een andere manier moeten oplossen. Dit gebeurt niet vanzelf op een "dynamische" manier zodat elke keer als elementen met specifieke id's opnieuw in de DOM/broncode verschijnen dat dan de events ineens weer van toepassing zijn.
Frits van Leeuwen op 25/04/2020 00:02:26:
Of is jouw advies nu om te kijken of dat ik dit formulier juist in het basis bestand plaats. Ik kan me voorstellen dat het misschien helemaal niet nodig is om weer een nieuwe query te maken om dit formulier te vullen met de gegevens die horen bij de gekozen regel.
Er zijn meerdere aanpakken mogelijk, maar ik volg niet helemaal welke aanpak je op dit moment volgt, dus daar kan ik dan ook geen advies over geven.
Ook maakt het misschien uit hoe je jouw JavaScript schrijft. Zit dit nu inline in een HTML/PHP-bestand, of zijn dit aparte JavaScript-bestanden? De laatstgenoemde variant heeft misschien last van een hardnekkige caching van het bestand, zodat je webpagina mogelijk voor jou onbewust met een oudere kopie werkt, terwijl je de broncode van het JavaScript-bestand inmiddels hebt gewijzigd.
En dan is het de vraag of de verschillende events wel op het juiste moment vuren. Uit de bovenstaande gegevens kan namelijk niet worden opgemaakt hoe en wanneer SelecteerRegel() wordt aangeroepen.
En ja, maak gewoon ff gebruik van een complete minified versie, of omdat je aan het ontwikkelen bent, wellicht een full blown variant, waar gewoon alles in zit. Je kunt dit later nog optimaliseren ofzo. Je wilt niet dat het ontwikkelen niet lukt of dat het onbekend is wat er misgaat omdat er misschien componenten ontbreken in een of ander custom gebouwde library.
Op dit moment zijn er teveel onbekende variabelen in dit vraagstuk. Schep voor jezelf, en voor ons :p, meer overzicht.
Ik ben ook verder gaan googelen. Maar nu denk ik dat het handig is om 1 php file te maken waar ik alle acties af kan handelen. Dus add, edit en delete. Ik heb de file action.php genoemd. Ik ben maar even begonnen met toevoegen.
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
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
<?php
$action = $_POST["action"];
$tabel = $_POST["tabel"];
if(!empty($action))
{
switch($action)
{
case "add":
$velden_add = $_POST["velden"];
$vulling_add = $_POST["vulling"];
$query = "INSERT INTO " . $tabel . $velden . " VALUES(" . $vulling . ")";
echo $query;
break;
case "edit":
$Wijzigingen = ""; // velden=vulling
$id = 0;
$query = "UPDATE " . $tabel . " set " . $Wijzigingen . " WHERE id=" . $id;
break;
case "delete":
$id = 0;
$query = "DELETE FROM " . $tabel . " WHERE id=" . $id;
break;
}
if($connect->query($query) === TRUE)
{
echo 'gelukt';
}
else
{
echo 'mislukt: '$query;
}
$query = "";
}
?>
$action = $_POST["action"];
$tabel = $_POST["tabel"];
if(!empty($action))
{
switch($action)
{
case "add":
$velden_add = $_POST["velden"];
$vulling_add = $_POST["vulling"];
$query = "INSERT INTO " . $tabel . $velden . " VALUES(" . $vulling . ")";
echo $query;
break;
case "edit":
$Wijzigingen = ""; // velden=vulling
$id = 0;
$query = "UPDATE " . $tabel . " set " . $Wijzigingen . " WHERE id=" . $id;
break;
case "delete":
$id = 0;
$query = "DELETE FROM " . $tabel . " WHERE id=" . $id;
break;
}
if($connect->query($query) === TRUE)
{
echo 'gelukt';
}
else
{
echo 'mislukt: '$query;
}
$query = "";
}
?>
Ik roep de code aan vanuit beheer.php waar ik deze code voor gebruik:
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
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
function Opslaan_Add()
{
// onderstaande waarden van i_.... werken. Dit heb ik gecheckt
var a_action = "add";
var a_tabel = "tabel_menu";
var a_velden = "'m_id, m_waarden', 'm_subvan', 'm_tekst', 'm_link'";
var a_vulling = "NULL, '" + $("#fwaarde").val(); + "', '" + $("#fsubvan").val(); + "', '" + $("#ftekst").val(); + "', '" + $("#flink").val(); + "'"
var form_data = {
'action': a_action,
'tabel': a_tabel,
'velden': a_velden,
'invulling': a_vulling
}
jQuery.ajax
({
url:'action.php',
method: 'POST',
data: form_data,
success:function(form_data)
{
switch(a_action)
{
case "add":
alert ("record toegevoegd");
break;
case "edit":
alert ("record gewijzigd");
break;
case "delete":
alert ("record verwijderd");
break;
}
}
});
// formulieren en knoppen tonen of verbergen
$('#Button_Add').show(); // toevoegknop tonen
$('#Add_Form').hide(); // toevoeg formulier verbergen
};
{
// onderstaande waarden van i_.... werken. Dit heb ik gecheckt
var a_action = "add";
var a_tabel = "tabel_menu";
var a_velden = "'m_id, m_waarden', 'm_subvan', 'm_tekst', 'm_link'";
var a_vulling = "NULL, '" + $("#fwaarde").val(); + "', '" + $("#fsubvan").val(); + "', '" + $("#ftekst").val(); + "', '" + $("#flink").val(); + "'"
var form_data = {
'action': a_action,
'tabel': a_tabel,
'velden': a_velden,
'invulling': a_vulling
}
jQuery.ajax
({
url:'action.php',
method: 'POST',
data: form_data,
success:function(form_data)
{
switch(a_action)
{
case "add":
alert ("record toegevoegd");
break;
case "edit":
alert ("record gewijzigd");
break;
case "delete":
alert ("record verwijderd");
break;
}
}
});
// formulieren en knoppen tonen of verbergen
$('#Button_Add').show(); // toevoegknop tonen
$('#Add_Form').hide(); // toevoeg formulier verbergen
};
De functie wordt aangeroepen. Maar het toevoegen werkt helaas niet.
Ik zag eerst jquery.min.map met een 404 melding in Netwerk. Als ik die map aanmaak, wordt het een 403. Maar ik heb dan nog niet de functie aangeroepen.
Als ik in het formulier dat ik heb, iets invul verschijnt er een melding bij console.
0: Unable to get property 'isPersonal' of undefined or null reference
Pas als ik op mijn button klik moet het verder werken met de functie. Dan krijg ik de ze melding
En wat als deze velden quotes bevatten enzo?
Ik zou dit gewoon in $_POST laten zitten en in de verwerking zelf de query bouwen, zodat dingen gewoon op één (en de juiste) plaats gebeuren.
Dit is ook nog steeds niet de hele puzzel. Waar is de pagina- en formuliercode? Waar wordt Opslaan_Add() aangeroepen? "isPersonal" komt verder niet eens voor in bovenstaande code. Waarschijnlijk breekt je JavaScript ergens anders.
De functie is nu trouwens ook generiek geworden, dus dan zou het ook misschien een andere naam dan Opslaan_Add moeten hebben. Verder zou de functie zich niet of minder inhoudelijk moeten bemoeien met wat de actie precies doet, maar gewoon een AJAX POST moeten faciliteren. Je kunt ook in één handeling gewoon alle data van een formulier serialiseren. Wat vervolgens relevant/verplicht is bepaalt de afhandelactie (in PHP-code) verder.
Ook de naam action.php vertelt je niet echt veel; mogelijk kun je deze naam in iets passenders veranderen.
Jij zegt dus dat ik beter $_POST.... bij $query invul, dan dat ik ze in een variabele zet? Het lijkt me wel sneller, maar ik twijfelde over de bruikbaarheid. Ik denk wel dat je gelijk hebt.
In de code hier onder zie je het formulier voor het toevoegen. Deze verschijnt alleen als ik op het add-knopje klik
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
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
<tr id = "Add_Form" <?php echo $verbergregel_add; ?>>
<td>
<Form id = "Add_Row" class="hoverinput" method='post'>
<table id = "FormTabelAdd" >
<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="70">
</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="70">
</td>
</tr>
<tr>
<td colspan="4" align="center">
<button id="Button_Cancel_Add" type="Submit" name="knoppena" value="Cancel" class="button_cancel" alt="annuleren"></button>
<button onclick="Opslaan_Add()" id="Button_Save_Add" type="submit" name="knoppen" value="Submit" class="button_save" alt="opslaan"></button>
</td>
</tr>
<tr >
<td colspan="4" align="center">
<hr>
</td>
</tr>
</table>
</Form>
<td>
<Form id = "Add_Row" class="hoverinput" method='post'>
<table id = "FormTabelAdd" >
<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="70">
</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="70">
</td>
</tr>
<tr>
<td colspan="4" align="center">
<button id="Button_Cancel_Add" type="Submit" name="knoppena" value="Cancel" class="button_cancel" alt="annuleren"></button>
<button onclick="Opslaan_Add()" id="Button_Save_Add" type="submit" name="knoppen" value="Submit" class="button_save" alt="opslaan"></button>
</td>
</tr>
<tr >
<td colspan="4" align="center">
<hr>
</td>
</tr>
</table>
</Form>
Het hele idee van formulierafhandeling via AJAX GET/POST calls is dat je deze normale submit afvangt en voorkomt, dat doe je niet.
Op het moment dat je van jQuery gebruik gaat maken kan eigenlijk ook alle JavaScript uit de HTML-code verdwijnen, omdat je hier interactief events aan kunt koppelen. Ik zou dus in plaats van een functie eerder een submit event bij $('#Add_Row').submit(...) verwachten, waarbij je dus het default gedrag van een formulier (verzending) voorkomt...
Bedankt.
Interessante optie om alles met jquery te gaan doen i.p.v. Javascript. Ik gebruik nog niet veel Javascript, dus ik vind het een interessante optie. Ik moet daar nog even verder in duiken.
Ik ga ook gelijk even kijken in hoeverre ik iets met je laatste aanwijzing kan.
Toevoeging op 26/04/2020 23:06:51:
Betekent dit dat een omcklick vervangen kan worden door een submit event?
Klinkt leuk, ik ga daar eens wat proberen.
Toevoeging op 27/04/2020 14:39:29:
Bij netwerk hou ik bij jquery.min.map een 403 (Forbidden)
Bij consol zie ik als ik het eerste karakter in vul in mijn form:
0: Unable to get property 'SavePersonalAndPaymentData' of undefined or null reference
Autoformfill_ContentScript.js (1,20660)
Na het invullen klik ik op de button om op te slaan. Het resultaat is dat er niets is opgeslagen.
Op het form heb ik 2 buttons staan:
Code (php)
1
2
2
<button id="Button_Cancel_Add" type="Submit" name="knoppena" value="Cancel" class="button_cancel" alt="annuleren"></button>
<button id="Button_Save_Add" type="Submit" name="knoppen" value="Submit" class="button_save" alt="opslaan"></button>
<button id="Button_Save_Add" type="Submit" name="knoppen" value="Submit" class="button_save" alt="opslaan"></button>
Onderaan de pagina heb ik het volgende script staan:
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
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
<script>
$( "#Button_Save_Add" ).submit(function()
{
var a_action = "add";
var form_data = {
'action': a_action,
'tabel': "tabel_menu",
'velden': "'menu_id, menu_waarden', 'menu_subvan', 'menu_tekst', 'menu_link'",
'invulling': "NULL, '" + $("#fwaarde").val() + "', '" + $("#fsubvan").val() + "', '" + $("#ftekst").val() + "', '" + $("#flink").val() + "'"
};
jQuery.ajax
({
url:'action.php',
method: 'POST',
data: form_data,
success:function(form_data)
{
switch(a_action)
{
case "add":
alert ("record toegevoegd");
break;
case "edit":
alert ("record gewijzigd");
break;
case "delete":
alert ("record verwijderd");
break;
}
}
});
// formulieren en knoppen tonen of verbergen
$('#Button_Add').show(); // toevoegknop tonen
$('#Add_Form').hide(); // toevoeg formulier verbergen
});
</script>
$( "#Button_Save_Add" ).submit(function()
{
var a_action = "add";
var form_data = {
'action': a_action,
'tabel': "tabel_menu",
'velden': "'menu_id, menu_waarden', 'menu_subvan', 'menu_tekst', 'menu_link'",
'invulling': "NULL, '" + $("#fwaarde").val() + "', '" + $("#fsubvan").val() + "', '" + $("#ftekst").val() + "', '" + $("#flink").val() + "'"
};
jQuery.ajax
({
url:'action.php',
method: 'POST',
data: form_data,
success:function(form_data)
{
switch(a_action)
{
case "add":
alert ("record toegevoegd");
break;
case "edit":
alert ("record gewijzigd");
break;
case "delete":
alert ("record verwijderd");
break;
}
}
});
// formulieren en knoppen tonen of verbergen
$('#Button_Add').show(); // toevoegknop tonen
$('#Add_Form').hide(); // toevoeg formulier verbergen
});
</script>