Ik heb simpel formulier met twee proeftekstvelden op invullen.php:
[naam]
[straatnaam]
Via de volgende code wordt het gepost naar een andere pagina:
<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>
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?
Ik denk dat het iets in de browser is.
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.
Het probleem doet zich voor in meerdere browsers.
Geladen velden worden verstuurd en opgeslagen, maar velden ingevoegd via Element Inspecteren niet.
Ook al heeft het exact dezelfde naam en waarden.
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.
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?
<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>
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?
Dit is iets anders dan waar je het voorheen over had (veld X verwijderen en weer toevoegen).
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).
Ik ben erachter waar het aan ligt:
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?
Dan heb je waarschijnlijk een fout in je opmaak (HTML). Stel dat je dit hebt:
<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.
