Hidden field toevoegen aan Javascript post

12-08-2016 | Marcel van Langen | Javascript | javascript,hidden,formulier,post

In een bestaande toepassing werd nogal wat Javascript gebruikt om de gegevens van een formulier te manipuleren en te controleren. Alleen als alles aan de voorwaarden voldeed werd het formulier ook gepost via datzelfde stuk Javascript. Echter was het nodig om daarbinnen in bijzondere situaties een hidden field toe te voegen met een specifieke waarde.

Kun je Javascript wel gebruiken om dynamisch een hidden field aan te maken? Natuurlijk! Je moet alleen even weten hoe je dit moet doen. Javascript kent daarvoor de functie createElement. Ik zal het even laten zien, de code spreekt voor zich! Allereerst heb je de aanroep van het Javascript nodig. Dit kan bijvoorbeeld via een button met een onSubmit:

<input type="button" value="mail" class="knop" name="knop" onClick="return controleerAantal('mail');" />

Deze functie roept een Javascript functie aan genaamd controleerAantal. In dat script wordt een aantal zaken gedaan, maar het stukje dat hier van belang is, is als volgt:

var hidden = document.createElement("input");
hidden.type = "hidden";
hidden.name = "knop";
hidden.value = actie;
var formToPost = document.getElementById("tabelFacturen");
formToPost.appendChild(hidden);
formToPost.submit();

De eerste 4 regels maken de hidden form variabele aan. Vervolgens wordt deze aan het formulier met het id tabelFacturen toegevoegd, en vervolgens wordt het formulier gepost. Dat is het!

Over Morloff

Morloff ontwerpt en realiseert succesvolle webtoepassingen op het gebied van procesoptimalisatie, eCommerce en rapportage door de inzet van moderne webtechnieken, sociale media en zoekmachine optimalisatie.

over ons | diensten | portfolio | contact | route

naar website IJsmonster.nl naar website ICT intermediairs naar website marcelvanlangen.com

Twitter

Morloff

Cuneraweg 169a
3911 RH Rhenen

M +31 (0)6 - 515 96 189
W www.morloff.nl
E contactformulier

Morloff op Twitter Morloff op Facebook Morloff op LinkedIn Morloff via RSS