1. #1

    Registered
    19/08/13
    Location
    Brugge
    Posts
    3
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/0

    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.

    Mvg
    no votes  

  2. #2
    W0utR's Avatar
    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:
    Code:
    document.getElementById('inputID').value;
    Of via jQuery:
    Code:
    $('#inputID').val();
    no votes  

  3. #3

    Registered
    19/08/13
    Location
    Brugge
    Posts
    3
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/0
    home:
    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>
    new 3.html:
    HTML Code:
    <head>
    	<title>test</title>
    	<script type="text/javascript" src="regionFood.js"></script>
    </head>
    <body> 
    			
    </body>
    regionFood.js:
    Code:
    var foodRegions = document.getElementById('foodRegion').value;
    document.write(foodRegions);
    Als ik gewoon vraag via prompt dan wordt de variabele wel ingevuld, nu echter niet.
    no votes  

  4. #4
    woony's Avatar
    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  

  5. #5
    Rumor's Avatar
    Registered
    26/03/12
    Location
    Laakdal
    Posts
    4
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/0
    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  

  6. #6

    Registered
    19/08/13
    Location
    Brugge
    Posts
    3
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/0
    Is er dan geen enkele manier om die variabelen ook op een andere pagina te gebruiken?

    Alvast bedankt voor alles
    no votes  

  7. #7
    Rumor's Avatar
    Registered
    26/03/12
    Location
    Laakdal
    Posts
    4
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/0
    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.

    Code:
    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, " "));
    }
    De parameter in een variabele steken lukt dan met onderstaande regel code
    Code:
    var foodRegion = getParameterByName("foodRegion");
    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.
    no votes  

  8. #8
    woony's Avatar
    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  

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Log in

Log in