Indsæt input's igennem javascript

Forord Nu vil jeg vise hvordan man indsætter input felter på sin hjemmeside igennem javascript. Man kan fx, bruge det til en WYSIWYG Editor, eller bare et CMS system :D Dette kræver at du kan HTML og en lille smule javascript. Derfor vil jeg ikke gøre ret meget ud af HTML delen, men her kommer den: <form>   <select name="element">   <option value="button">Knap</option> <option value="text">Tekstboks</option> <option value="file">Filfinder</option> <option value="radio">Valgmulighed</option> <option value="checkbox">Tjekboks</option> </select> <input type="button" value="Tilf&oslash;j" onClick="add(document.forms[0].element.value)" />   </form> <div id="ID1"></div> Lige en hurtig forklaring Vi laver en HTML form med et select felt. Så laver vi en knap til sidst hvor vi bruger javascript. add er vores funktion, som vi laver i javascript bagefter.. Vi siger at fra dokumentet tager vi den første form og tager det input felt med navn element, og indholdet af den (value) Og til sidst laver vi et div, hvor vores input felter skal være i :D Nu går vi så over til javascript'et :D function add(type) {   var element = document.createElement("input");   element.setAttribute("type", type);   element.setAttribute("value", type);   element.setAttribute("name", type);   var felt = document.getElementById("ID1");   felt.appendChild(element);   } Først laver vi den funktion som vi kaldte frem før i HTML, men med en bestemt type. Vi laver en variabel som hedder element og den "gør klar" til at oprette elementet. Så sætter vi vores nye element's type til at være den bestemte type, dvs sige at hvis jeg havde valgt at jeg ville indsætte en knap ville det se sådan her ud:  element.setAttribute("type", "button");   Så sætter vi også fx. knappens tekst til at være den bestemte type, det vil igen sige at hvis det er en knap, så står der knap på knappen :D Og det samme med navnet. Så vælger hvor vi vil placere vores input felt, jeg har så valgt at det skal være i ID1. Nu sætter vi så i vores felt, vores input felt ind :D Det var så det, meget enkelt faktisk :p

Oprettet af: fyhring4 Javascript Point modtaget: 50 Rating: 3   Mail Kommentarer 17:00 22/12/2009

Kommentarer

Giv din mening tilkende om denne artikel, eller læs andres.
Har du spørgsmål eller brug for hjælp til denne artikel henvises du til forummet.

nice nok lavet - jeg har ikke testet det, men jeg forstår godt meningen i koden.

Oprettet af: NicPaHa   Mail 00:20 31/12/2009

tak, og godt at du forstår koden, ellers blev jeg nød til at lave det om ;) Sidst redigeret 14:13 31/12/2009

Oprettet af: fyhring4   Mail 14:12 31/12/2009

Du skal være oprettet og logget ind for at kommentere en artikel