Inschakelen/Uitschakelen van een form veld
Ik zat net wat te coden en moest een vrij eenvoudig stukje javascript hebben. Maar het is dan altijd weer even hard graven in het brein om te achterhalen hoe dat moest. Lange leven de blogs die je kunnen helpen een fantastisch archief aan te leggen.
Stel ik wil aan de hand van een radio button een input field in een form in of uitschakelen.
<form name="formuliernaam">Vraag a:<input name="vraag" value="antwoord1" onclick="javascript:document.formuliernaam.knipperveld.disabled=false" type="radio" />
Vraag b:<input name="vraag" value="antwoord2" onclick="javascript:document.formuliernaam.knipperveld.disabled=true" type="radio" />
Het fantastische veld dat aan of uit moet: <input name="knipperveld" disabled="disabled" type="text" />
</form>
Dat is alles.
Stel nu dat je het veld eigenlijk helemaal niet wilt zien. Dan komt er wat extra bij kijken. Een aanpak is om het fantastische veld uit het vorige voorbeeld te verplaatsen naar een span of div. Dit element geef je een id en in je stylesheet geef je aan dat deze niet wordt getoond: specialfield {display: none;}.
Vervolgens pas je de javascriptjes aan zodat deze niet het veld in het formulier opzoeken en aanpassen, maar het id zoeken en de stijl daarvan aanpassen. De code wordt nu:
<form name="formuliernaam">Vraag a:<input name="vraag" value="antwoord1" onclick="javascript:document.getElementById('specialfield').style.display='inline';" type="radio" />
Vraag b:<input name="vraag" value="antwoord2" onclick="javascript:document.getElementById('specialfield').style.display='none';" type="radio" />
<span id="specialfield">Het fantastische veld dat aan of uit moet: <input name="knipperveld" type="text" /></span>
</form>
En sorry voor de mensen die even willen lezen/kopieren wat er staat. Het huidige ontwerp van deze blog werkt daarbij niet echt mee. Het nieuwe ontwerp wat nog immer in ontwikkeling is zou dit grotendeels moeten oplossen.
Reageer
Reageren? Stuur een trackback (Zet Javascript aan om een Trackback URL te genereren ) of gebruik onderstaand formulier.