469,329 Members | 1,444 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,329 developers. It's quick & easy.

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

May 11 '07 #1
6 1655
Lee
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.
--

May 11 '07 #2
On May 11, 9:01 pm, Lee <REM0VElbspamt...@cox.netwrote:
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 -

- Show quoted text -
oops... i changed it but still nothing

May 11 '07 #3
On May 11, 1:45 pm, Damo <cormacdeba...@gmail.comwrote:
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 ="";
}

May 11 '07 #4
excellent , cheers that did the trick.
What does the line,

elem['on'+ev]=lis ;
do?

Thanks

May 11 '07 #5

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

May 12 '07 #6

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

May 12 '07 #7

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

4 posts views Thread by Jan-Friedrich Mutter | last post: by
10 posts views Thread by Andy B | last post: by
3 posts views Thread by M D | last post: by
4 posts views Thread by Nacho Nachev | last post: by
23 posts views Thread by mosesdinakaran | last post: by
1 post views Thread by Damo | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by Purva khokhar | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.