[JS]Waarden Velden uitlezen en printen
Ik ben momenteel bezig met een website voor een multigaming clan genaamd Hell Bound Soldiers. Aangezien ik nog niet helemaal wegwijs ben met javascript vraag ik daarom ook even om hulp hier bij jullie.
Leden moeten zich natuurlijk aan kunnen melden en ik heb hiervoor een registreer pagina gemaakt. Op het moment is hij nog geheel hard-coded, maar ik wil eerst de layout en zijn functionaliteiten op orde hebben voordat ik verder ga met het uit te werken in PHP ect.
Ik gebruik een acordion om alle stappen op 1 pagina te krijgen zonder dat er herladen hoeft te worden. Zoals jullie kunnen zien is de laatste pagina een feedback moment voor het aanstaande lid. Hier zit nou ook juist het probleem.
Hoe lees ik met javascript de textvelden uit en print ik de waarde op de laatste tab?
Betreffende Pagina
Ik vraag dus eigenlijk om een duwtje in de juiste richting, of als iemand hier ervaring mee heeft een goede uitleg.
Mvg,
Nivek
Gewijzigd op 01/01/1970 01:00:00 door Kevin Tuns
In de huidige situatie kun je de waarde van de velden bijvoorbeeld zo uitlezen:
Code (php)
1
document.forms[0].elements['naam van het veld'].value;
Als je nu op de vervolgpagina achter elke regel een <span> tag met een id zet, kun je de waardes er zo inzetten:
Code (php)
1
document.getElementById('id van je span').innerHTML = document.forms[0].elements['naam van het veld'].value;
Mijn advies: kijk meteen naar een library als jquery of mootools, dit gaat je VEEL regels code schelen!
ik vind ze maar niks :P
zo groot en zo lomp. Je kan je code prima klein maken zonder library's. - kleiner zelfs.
Code (php)
1
document.getelementbyid('id').value = 'value';
Mootools:
Code (php)
1
$('id').value = 'value';
Verschil: 20
Gewijzigd op 01/01/1970 01:00:00 door Erwin Geen
Code (php)
1
document.getElementById('id').value = 'value';
toby hinloopen schreef op 23.12.2008 04:08:
Erg groot en lomp? Natuurlijk.wat heeft iedereen met die library's?
ik vind ze maar niks :P
zo groot en zo lomp. Je kan je code prima klein maken zonder library's. - kleiner zelfs.
ik vind ze maar niks :P
zo groot en zo lomp. Je kan je code prima klein maken zonder library's. - kleiner zelfs.
Maar dat hoef je maar 1 keer toe te passen, en het is zelfs copy/past werk.
Daarna kan je met heel veel minder code (en ik vind het zelf ook mooier) veel meer bereiken.
Ook zijn plugins etc. mogelijk. Daar waar gewoon javascript tien talle losse functies gebruikt voor de verschillende effecten etc.
waarom zou je die trouwens gebruiken als je JS niet eens goed kan, zo leer je niets bij over de JS syntax etc.
Ik opteer voor gewoon JS...
Code (php)
1
2
3
2
3
<script type="text/javascript">
document.getElementById('voornaam').innerHTML = document.forms[0].elements['voornaam'].value
</script>
document.getElementById('voornaam').innerHTML = document.forms[0].elements['voornaam'].value
</script>
Code (php)
1
2
3
4
2
3
4
<form>
<input type="text" name="voornaam"><br />
First Name: <span id="voornaam"></span>
</form>
<input type="text" name="voornaam"><br />
First Name: <span id="voornaam"></span>
</form>
Maar er lijkt helemaal niks te gebeuren als ik het textveld ingevuld heb.
En nu even voor de rest ^^, ik ga zeker wel een libary gebruiken omdat er gewoon veel javascript in voor zal komen, maar wil dit nu eerst wel een werkend zien.
Wat gaat er hierboven dus fout?
Tikkes schreef op 23.12.2008 10:13:
waarom zou je die trouwens gebruiken als je JS niet eens goed kan, zo leer je niets bij over de JS syntax etc.
Ik opteer voor gewoon JS...
Ik opteer voor gewoon JS...
Waarom is het gebruik van een library niet gewoon gebruik van JS? Je doet niets anders dan voorheen, alleen bespaar je je bergen met werk en gezeur met cross-browser compatibility.
En wat betreft dat syntax verhaal: slecht argument. Je weet niet vanuit welk oogpunt dit gezegd wordt, ervaren javascript gebruikers kunnen erg goed gebruik maken van een library, en ook startende gebruikers (zoals TS) zullen basiskennis van de syntax nodig hebben om een en ander te doen...
"on topic":
Je hebt op zich de code goed, maar je moet wel even goed kijken wat er nu gebeurt. Je pagina wordt opgebouwd, en daarmee wordt ook je javascript naar de browser verzonden. Als jij de volgende code toevoegt:
Code (php)
1
2
3
2
3
<script type="text/javascript">
doe iets...
</script>
doe iets...
</script>
wordt dit ook meteen met het opbouwen van de pagina (zelfs bij het parsen van de javascript zelf, dus nog voor je body volledig klaar is) uitgevoerd.
Als je de code binnen een functie plaatst kun je zelf bepalen wanneer het wordt uitgevoerd... Voorbeeldje:
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<script type="text/javascript">
function doewat()
{
alert('klik');
}
</script>
<button onclick="doewat()">Doe wat!</button>
function doewat()
{
alert('klik');
}
</script>
<button onclick="doewat()">Doe wat!</button>
Je zult dus op een of andere manier af moeten vangen dat de gegevens weergegeven moeten worden onder je laatste tab...
Heb hem dus nu ongeveer zo:
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<script type="text/javascript">
function updateValue()
{
document.getElementById('voornaam').innerHTML = document.forms[0].elements['voornaam'].value;
}
</script>
function updateValue()
{
document.getElementById('voornaam').innerHTML = document.forms[0].elements['voornaam'].value;
}
</script>
Code (php)
1
2
3
4
2
3
4
<form>
<input type="text" name="voornaam" onChange="updateValue"><br />
First Name: <span id="voornaam"></span>
</form>
<input type="text" name="voornaam" onChange="updateValue"><br />
First Name: <span id="voornaam"></span>
</form>
Ik ben er 100% zeker van dat hij de functie aanroept want ik heb het eerst geprobeerd met een alert erin zoals jou voorbeeld. Het probleem is nu alleen dat hij niks in de span zet. In FireFox krijg ik geen error, maar IE geeft een unknown runtime error.
Gewijzigd op 01/01/1970 01:00:00 door Kevin Tuns
(hoofdletter zijn belangrijk in JS)
Alhoewel ik het nu eigenlijk ook wel oke vind als ze direct geupdate worden.
Gewijzigd op 01/01/1970 01:00:00 door Kevin Tuns
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<script type="text/javascript">
function updateValue()
{
alert('' + document.forms[0].elements['voornaam'].value);
document.getElementById('voornaam').innerHTML = document.forms[0].elements['voornaam'].value;
}
</script>
function updateValue()
{
alert('' + document.forms[0].elements['voornaam'].value);
document.getElementById('voornaam').innerHTML = document.forms[0].elements['voornaam'].value;
}
</script>
Hij geeft in de alert nu gewoon de waarde terug van het veld dat ik net ingevuld heb dus daar ligt het probleem niet. Het probleem zit dus bij het invullen van de span?
Code (php)
1
2
3
4
2
3
4
<form>
<input type="text" name="voornaam" onChange="updateValue"><br />
First Name: <span id="voornaam"></span>
</form>
<input type="text" name="voornaam" onChange="updateValue"><br />
First Name: <span id="voornaam"></span>
</form>
Wat zou er nou fout kunnen gaan?
En na een kleine debug werkt hij dus helemaal... ik had simpelweg de ; weg gelaten.
Nu ik toch bezig ben zou ik will vragen welke manier om de functie op te roepen het beste is? Want onChange lijkt niet altijd bij een update aangeroepen te worden?
Gewijzigd op 01/01/1970 01:00:00 door Kevin Tuns
is het mogelijk om er een functie van te maken die ik voor alle input velden kan gebruiken?
Code (php)
1
2
3
4
2
3
4
function updateValue()
{
document.getElementById('username').innerHTML = document.forms[0].elements['username'].value;
}
{
document.getElementById('username').innerHTML = document.forms[0].elements['username'].value;
}
Dus zo ombouwen dat ik de naam van het veld er niet hard in hoef te coden?
Code (php)
1
2
3
4
2
3
4
function updateValue(name)
{
document.getElementById(name).innerHTML = document.forms[0].elements[name].value;
}
{
document.getElementById(name).innerHTML = document.forms[0].elements[name].value;
}
+
IE blijft een unkown runtime error geven terwijl hij in FF wel werkt.
Gewijzigd op 01/01/1970 01:00:00 door Kevin Tuns
Dat probleem heb ik ook vaak gehad.