Thread: JS-HTML formulier
-
19-08-2013, 22:32 #1
JS-HTML formulier
Hallo iedereen
ik ben bezig met een beetje javascript en html, maar ik zit vast. Ik heb een basis gehad op school, maar ja, blijkbaar niet genoeg, dus vraag ik even om jullie hulp.
Ik ben maar wat aan het experimenteren omdat ik scripten enzo nog tof vind en ik heb een formulier gemaakt in HTML. Nu zou ik graag met de gegevens van dat formulier kunnen rekenen, verwerken, enz. enz. Dus ik dacht direct aan javascript om dat te doen, maar ik heb geen idee hoe je van gegevens uit een formulier een variabele voor javascript maakt.
Allez, ik heb al heel wat geprobeerd, opgezocht op verschillende websites, maar kon het antwoord niet vinden. Dus ik hoop op jullie hulp.
Mvgno votes
-
-
20-08-2013, 05:56 #2Member
- Registered
- 16/04/08
- Location
- Hong Kong
- Posts
- 1,989
- iTrader
- 6 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 7/9
Wat heb je al geprobeerd? Zet het desnoods even op Create a new Fiddle - jsFiddle zodat we jou vandaar kunnen verder helpen.
Want om gegevens uit een input te halen is het:Of via jQuery:Code:document.getElementById('inputID').value;Code:$('#inputID').val();no votes
-
20-08-2013, 12:52 #3
home:
new 3.html:HTML Code:<form name="form1" method="post" action="new 3.html" > Voedselregio's: <br /> <input type="text" name="foodRegion" id="foodRegion"/> <input type="submit" value="verzenden" /> </form>
regionFood.js:HTML Code:<head> <title>test</title> <script type="text/javascript" src="regionFood.js"></script> </head> <body> </body>
Als ik gewoon vraag via prompt dan wordt de variabele wel ingevuld, nu echter niet.Code:var foodRegions = document.getElementById('foodRegion').value; document.write(foodRegions);
no votes
-
20-08-2013, 13:54 #4Approved 9-lifer
- Registered
- 03/12/03
- Location
- Oostende
- Posts
- 2,599
- iTrader
- 78 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 7/10
Eigenlijk is het logisch dat dit niet werkt.
Wanneer wordt die .js code uitgevoerd? Bij het laden van de pagina klopt?
dus bij het laden van de pagina is je formulier nog leeg.
Als uw form post, is hij opnieuw leeg want je pagina wordt gerefreshed.
dus zul je moeten de code uitvoeren wanneer je op je button duwt , dus een function maken van je javascript code.
vooraleer hij gepost wordt.no votes
-
20-08-2013, 14:13 #5
Hier wil ik ook nog aan toevoegen dat de js-file moet worden geladen in de home pagina, niet in new 3.
In new 3 gaat hij de form niet kunnen vinden omdat er gewoonweg geen form is.
Home:
HTML Code:<html> <head> <title></title> </head> <body> <form name="form1" method="post" action="#" > Voedselregio's: <br /> <input type="text" name="foodRegion" id="foodRegion"/> <input type="submit" value="verzenden" id="btnSubmit" /> </form> <script type="text/javascript" src="regionFood.js"></script> </body> </html>
regionFood.js
Code:document.getElementById("btnSubmit").addEventListener("click", handleForm, false); function handleForm(){ var foodRegions = document.getElementById('foodRegion').value; document.write(foodRegions); event.preventDefault(); }
We hangen een event aan de submitknop, waardoor onze handleForm functie wordt uitgevoerd als er op de knop wordt geklikt, de waarde van het formulier komt terecht in de foodRegions variabele en event.preventDefault() zorgt ervoor dat we geen page refresh krijgen, want dan wordt het formulier terug leeggemaakt.
De js file wordt ook onderaan de html pagina toegevoegd, dit zorgt ervoor dat de knop waaraan het event wordt toegevoegd al bestaat als we het event eraan hangen.no votes
-
20-08-2013, 20:19 #6
Is er dan geen enkele manier om die variabelen ook op een andere pagina te gebruiken?
Alvast bedankt voor alles
no votes
-
20-08-2013, 20:44 #7
Als je de method van je formulier verandert naar get worden de waardes vanuit je formulier in in de url van je action pagina gezet, als je de onderstaande functie in je js file plakt kan je je parameter simpel uitlezen.
De parameter in een variabele steken lukt dan met onderstaande regel codeCode:function getParameterByName(name) { name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]"); var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"), results = regex.exec(location.search); return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " ")); }
Je moet er nu ook op letten dat je de code die werd uitgevoerd bij het submitten van het formulier wordt weggehaald, anders word je niet naar de action page gestuurd.Code:var foodRegion = getParameterByName("foodRegion");no votes
-
21-08-2013, 17:20 #8Approved 9-lifer
- Registered
- 03/12/03
- Location
- Oostende
- Posts
- 2,599
- iTrader
- 78 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 7/10
Voor dergelijke basis zaken staat het internet vol met tutorials, volg deze met wat gezond verstand en dan kom je al een heel stuk verder.
no votes
