[JS]Waarden Velden uitlezen en printen

Er zijn een aantal libraries voor javascript beschikbaar waarmee je naast accordions ook meteen heel makkelijk je velden kunt aanspreken... Kijk bijvoorbeeld eens naar jquery...

In de huidige situatie kun je de waarde van de velden bijvoorbeeld zo uitlezen:

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:

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!

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.

Normaal:

document.getelementbyid('id').value = 'value';

Mootools:

$('id').value = 'value';

Verschil: 20

@Warchief: bij 'normaal' ben je document. vergeten ;-).

document.getElementById('id').value = 'value';

toby hinloopen schreef op 23.12.2008 04:08

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.

Erg groot en lomp? Natuurlijk.

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.

jah, die libraries...ik werk ook liever gewoon met JS zonder mootools 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...

Om nou gewoon eens te kijken hoe de eerste methode in zijn werk zou gaan heb ik het volgende gebruikt:

<script type="text/javascript">
document.getElementById('voornaam').innerHTML = document.forms[0].elements['voornaam'].value
</script>

<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?

Ja maar het scriptje wordt nooit aangeroepen. Die code moet in een functie, en die moet aangeroepen worden.

offtopic:

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...

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:

<script type="text/javascript">
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:

<script type="text/javascript">
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...

Heel erg bedankt voor je hulp, zo leer ik dus terwijl ik er een beetje mee aan het spelen ben.

Heb hem dus nu ongeveer zo:

<script type="text/javascript">
function updateValue()
{
	document.getElementById('voornaam').innerHTML = document.forms[0].elements['voornaam'].value;
}
</script>

<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.