Javascript / Client Side Development :: Adaptive forms with Javascript


	Adaptive forms with Javascript Hi I'm new to javascript and i'm trying to create a simple form that: has a text field and a button when the page is initially loaded the text field is not visible. Pressing the button is supposed to make the text field visible This is the code I have HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Test</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <script src = "srcipt.js" type="text/javascript"></script> <form> <fieldset id="testField"> <legend>Test</legend> Test Field &nbsp<input type="text"/> </fieldset> <fieldset> <legend>Test</legend> <button type ="button" id="buttonfield" >Show field</button> </fieldset> </form> </body> </html> The Javasrcript(in an external file) if(window.attachEvent) { window.attachEvent('onload', setupForm); } else if(window.addEventListener) { window.addEventListener('load', setupForm,true); } function setupForm(someEvent) { document.getElementById("testField").style.display="none"; var field = document.getElementById"buttonField"); if(window.attachEvent) { field.attachEvent('onclick', handleClick); } else if(window.addEventListener) { field.addEventListener('click', handleClick,true); } } function handleClick(someEvent) { document.getElementById("testField").style.display=""; } Its not working and i have no idea why, Can anyone please help? Thanks Damo said: - Hide quoted text - >Hi >I'm new to javascript and i'm trying to create a simple form that: >has a text field >and a button >when the page is initially loaded the text field is not visible. >Pressing the button is supposed to make the text field visible >This is the code I have > HTML ><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> ><html xmlns="http://www.w3.org/1999/xhtml"> ><head> ><title>Test</title> ><link rel="stylesheet" type="text/css" href="style.css" /> ></head> ><body> ><script src = "srcipt.js" type="text/javascript"></script> Check the name of your script file. -- On May 11, 9:01 pm, Lee <REM0VElbspamt@cox.net> wrote: - Hide quoted text - > Damo said: > >Hi > >I'm new to javascript and i'm trying to create a simple form that: > >has a text field > >and a button > >when the page is initially loaded the text field is not visible. > >Pressing the button is supposed to make the text field visible > >This is the code I have > > HTML > ><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" > > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> > ><html xmlns="http://www.w3.org/1999/xhtml"> > ><head> > ><title>Test</title> > ><link rel="stylesheet" type="text/css" href="style.css" /> > ></head> > ><body> > ><script src = "srcipt.js" type="text/javascript"></script> > Check the name of your script file. > --- Hide quoted text - > oops... i changed it but still nothing On May 11, 1:45 pm, Damo <cormacdeba@gmail.com> wrote: - Hide quoted text - > if(window.attachEvent) > { > window.attachEvent('onload', setupForm);} > else if(window.addEventListener) > { > window.addEventListener('load', setupForm,true); > } > function setupForm(someEvent) > { > document.getElementById("testField").style.display="none"; > var field = document.getElementById"buttonField"); > if(window.attachEvent) > { > field.attachEvent('onclick', handleClick); > } > else if(window.addEventListener) > { > field.addEventListener('click', handleClick,true); > } > } > function handleClick(someEvent) > { > document.getElementById("testField").style.display=""; > } Try this code: function addListener(ev,lis,elem){ elem=elem\|\|window; if(window.attachEvent) elem.attachEvent('on'+ev, lis); else if(window.addEventListener) elem.addEventListener(ev, lis,false); else elem['on'+ev]=lis } addListener("load",setupForm) function setupForm(someEvent) { document.getElementById("testField").style.display="none"; var field = document.getElementById("buttonField"); addListener('click', handleClick,field); } function handleClick(someEvent) { document.getElementById("testField").style.display=""; - Hide quoted text - } excellent , cheers that did the trick. What does the line, elem['on'+ev]=lis ; do? Thanks Damo wrote: > excellent , cheers that did the trick. > What does the line, > elem['on'+ev]=lis ; If the tests for addEventListener and attachEvent fails, it sets the onEventName attribute of element. For example-if you call addListener("load",someFunc) then that line(if it runs) will set: window.onload=someFunc Damo wrote: > excellent , cheers that did the trick. > What does the line, > elem['on'+ev]=lis ; If the tests for addEventListener and attachEvent fails, it sets the onEventName attribute of element. For example-if you call addListener("load",someFunc) then that line(if it runs) will set: window.onload=someFunc