Opslaan formulier
[naam]
[straatnaam]
Via de volgende code wordt het gepost naar een andere pagina:
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
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
<script type="text/javascript">
//<![CDATA[
// als je document klaar is met laden...
$().ready(function() {
// als het formulier #theForm wordt gesubmit...
$('form#theForm').submit(function(e) {
// vang het submit event af, jQuery/AJAX handelt dit immers af
e.preventDefault(); // het default gedrag is dat het formulier gePOST wordt, en dat willen we niet
$('#postResult').hide();
$.post(
'shared/saveItem.php', // het script waar je naartoe POST
$('#theForm').serialize(), // verzamel alle form data in 1x (naam, content)
null, // we gebruiken .done() dus deze is niet nodig
'json' // geef een "hint" over het type van de terug te ontvangen data
)
.done(function( data ) {
$('#postResult').show();
})
.fail(function() {
$('#postResult').show();
})
.always(function( data ) {
$('#postResult').show();
setTimeout(function(){ $('#postResult').hide(); }, 3000);
});
});
});
//]]>
</script>
//<![CDATA[
// als je document klaar is met laden...
$().ready(function() {
// als het formulier #theForm wordt gesubmit...
$('form#theForm').submit(function(e) {
// vang het submit event af, jQuery/AJAX handelt dit immers af
e.preventDefault(); // het default gedrag is dat het formulier gePOST wordt, en dat willen we niet
$('#postResult').hide();
$.post(
'shared/saveItem.php', // het script waar je naartoe POST
$('#theForm').serialize(), // verzamel alle form data in 1x (naam, content)
null, // we gebruiken .done() dus deze is niet nodig
'json' // geef een "hint" over het type van de terug te ontvangen data
)
.done(function( data ) {
$('#postResult').show();
})
.fail(function() {
$('#postResult').show();
})
.always(function( data ) {
$('#postResult').show();
setTimeout(function(){ $('#postResult').hide(); }, 3000);
});
});
});
//]]>
</script>
Als ik nu op invullen.php het tekstvak [naam] weg haal en dat vervolgens zelf in chrome (element inspecteren) er weer bij zet (zodat de eindcode exact hetzelfde is), dan wordt de naam niet opgeslagen. Raar, want dat gebeurt wel als het veld in invullen.php is ingeprogrameerd en geladen wordt bij het openen van de pagina.
Is dat een beveiliging die op de server aan en uit gezet kan worden? Zodat je niet iets in velden kunt veranderen wat vervolgens in de database gepost kan worden?
Gewijzigd op 11/10/2018 09:40:35 door - Ariën -
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
<?php
var_dump($_POST);
echo("<script>
console.log('PHP: ".($_POST)."');
</script>");
$naam = mysqli_real_escape_string($conn, $_POST['naam']);
$adres = mysqli_real_escape_string($conn, $_POST['adres']);
$itemID = "1";
$update_item = mysqli_query($conn, "UPDATE items SET naam ='".$naam."', straat ='".$straat."' WHERE itemID ='".$itemID."'");
?>
var_dump($_POST);
echo("<script>
console.log('PHP: ".($_POST)."');
</script>");
$naam = mysqli_real_escape_string($conn, $_POST['naam']);
$adres = mysqli_real_escape_string($conn, $_POST['adres']);
$itemID = "1";
$update_item = mysqli_query($conn, "UPDATE items SET naam ='".$naam."', straat ='".$straat."' WHERE itemID ='".$itemID."'");
?>
Dit is even simpel omschreven zoals het opgeslagen wordt.
Gewijzigd op 11/10/2018 09:51:28 door Daan Vee
Maar een AJAXrequest kan je ook testen door een aparte request te doen met POST en GET. Zijn zeker wel add-ons voor als je Inspector de mogelijkheid niet heeft.
Geladen velden worden verstuurd en opgeslagen, maar velden ingevoegd via Element Inspecteren niet.
Ook al heeft het exact dezelfde naam en waarden.
Quote:
Als ik nu op invullen.php het tekstvak [naam] weg haal en dat vervolgens zelf in chrome (element inspecteren) er weer bij zet (zodat de eindcode exact hetzelfde is), dan wordt de naam niet opgeslagen. Raar, want dat gebeurt wel als het veld in invullen.php is ingeprogrameerd en geladen wordt bij het openen van de pagina.
Dit kan ik niet reproduceren. Als je een formulierveld weghaalt en weer toevoegt via de inspector werkt dit zoals je zou verwachten, de naam wordt gewoon weer gePOST.
Quote:
Is dat een beveiliging die op de server aan en uit gezet kan worden? Zodat je niet iets in velden kunt veranderen wat vervolgens in de database gepost kan worden?
Het HTML-document (en het DOM) zijn clientside.
JavaScript is clientside.
Dus, nee.
Ook zie ik niet hoe dit relevant is. In de verwerkingsstap dien je de velden (i.i.g. de velden die je wilt verwerken) te valideren. Als je input valideert maakt het verder toch niet uit wat een gebruiker allemaal met het document uitspookt? Hoe is dit een probleem?
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
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
<script type="text/javascript">
//<![CDATA[
// als je document klaar is met laden...
$().ready(function() {
// als het formulier #theForm wordt gesubmit...
$('form#theForm').submit(function(e) {
// vang het submit event af, jQuery/AJAX handelt dit immers af
e.preventDefault(); // het default gedrag is dat het formulier gePOST wordt, en dat willen we niet
$('#postResult').hide();
$.post(
'shared/saveItem.php', // het script waar je naartoe POST
$('#theForm').serialize(), // verzamel alle form data in 1x (naam, content)
null, // we gebruiken .done() dus deze is niet nodig
'json' // geef een "hint" over het type van de terug te ontvangen data
)
.done(function( data ) {
$('#postResult').show();
})
.fail(function() {
$('#postResult').show();
})
.always(function( data ) {
$('#postResult').show();
setTimeout(function(){ $('#postResult').hide(); }, 3000);
});
});
});
//]]>
</script>
//<![CDATA[
// als je document klaar is met laden...
$().ready(function() {
// als het formulier #theForm wordt gesubmit...
$('form#theForm').submit(function(e) {
// vang het submit event af, jQuery/AJAX handelt dit immers af
e.preventDefault(); // het default gedrag is dat het formulier gePOST wordt, en dat willen we niet
$('#postResult').hide();
$.post(
'shared/saveItem.php', // het script waar je naartoe POST
$('#theForm').serialize(), // verzamel alle form data in 1x (naam, content)
null, // we gebruiken .done() dus deze is niet nodig
'json' // geef een "hint" over het type van de terug te ontvangen data
)
.done(function( data ) {
$('#postResult').show();
})
.fail(function() {
$('#postResult').show();
})
.always(function( data ) {
$('#postResult').show();
setTimeout(function(){ $('#postResult').hide(); }, 3000);
});
});
});
//]]>
</script>
Volgens mij wordt hier gekeken welke velden #theForm allemaal heeft bij het laden van de pagina.
Later kunnen die worden verzonden. Dus velden die ik na het laden van de pagina handmatig toevoeg worden niet mee verzonden. Klopt dat?
En nee, ook het toevoegen van een extra veld via de inspector lijkt gewoon te werken (Chrome Version 69.0.3497.100 (Official Build) (64-bit), jQuery 1.12.4.min).
Maar nogmaals, wat maakt dit alles uit?
Het formulier waar alle velden inzitten wordt eerder afgekapt met een </form> dan waar ik 'm in php heb neergezet.
Met andere woorden: de velden erna worden (uiteraard) niet mee verzonden.
Iemand die dit ooit heeft meegemaakt?
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<div>
<form>
blablabla
</div> //deze hoort hier niet
rest van je form
</form>
</div>
<form>
blablabla
</div> //deze hoort hier niet
rest van je form
</form>
</div>
De browser denkt nu dat die eerste </div> (die met het commentaar erachter) bij de eerste <div> hoort. Omdat daarbinnen een <form> werd geopend, wordt die dan ook maar gesloten. De "rest van je form" valt dan dus niet meer binnen je form.