Adaptive forms with Javascript

Damo · May 11, 2007

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

Lee · May 11, 2007

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.

--

Damo · May 11, 2007

Damo said:

Check the name of your script file.

--- Hide quoted text -

- Show quoted text -

oops... i changed it but still nothing

scripts.contact · May 12, 2007

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="";
}

Damo · May 12, 2007

excellent , cheers that did the trick.
What does the line,

elem['on'+ev]=lis ;

do?

Thanks

scripts.contact · May 12, 2007

Damo said:
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

scripts.contact · May 12, 2007

Damo said:
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

Check forms With JavaScript	1	Mar 28, 2023
Help with code	0	Jun 12, 2022
In javascript, XML File Create, File Save	2	Jul 17, 2023
Problem with javascript function call	7	Oct 9, 2011
Help with my responsive home page	2	Dec 14, 2022
Problem formatting forms w/ floats	2	Feb 16, 2008
Song requests	4	Aug 16, 2023
using javascript with radio button to disable a text box - does not work in IE	1	Aug 29, 2006

Adaptive forms with Javascript

Damo

Lee

Damo

scripts.contact

Damo

scripts.contact

scripts.contact

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads