Archief - JS-HTML formulier

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
C

Critically

Legacy Member
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
W

W0utR

Legacy Member
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();
C

Critically

Legacy Member
home:
HTML: 
<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: 
<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. :doh:
w

woony

Legacy Member
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.
R

Rumor

Legacy Member
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: 
<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.
C

Critically

Legacy Member
Is er dan geen enkele manier om die variabelen ook op een andere pagina te gebruiken?

Alvast bedankt voor alles :D
R

Rumor

Legacy Member
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.
w

woony

Legacy Member
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.
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan