Adaptive forms with Javascript

Discussion in 'Javascript' started by Damo, May 11, 2007.

  1. Damo

    Damo Guest

    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, May 11, 2007
    #1
    1. Advertising

  2. Damo

    Lee Guest

    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.


    --
    Lee, May 11, 2007
    #2
    1. Advertising

  3. Damo

    Damo Guest

    On May 11, 9:01 pm, Lee <> wrote:
    > 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
    Damo, May 11, 2007
    #3
  4. On May 11, 1:45 pm, Damo <> wrote:
    > 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="";
    }
    scripts.contact, May 12, 2007
    #4
  5. Damo

    Damo Guest

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

    elem['on'+ev]=lis ;


    do?

    Thanks
    Damo, May 12, 2007
    #5
  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
    scripts.contact, May 12, 2007
    #6
  7. 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
    scripts.contact, May 12, 2007
    #7
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. sunil
    Replies:
    1
    Views:
    905
    deepak_ddn
    Feb 19, 2004
  2. Nacho Nachev

    Adaptive Rendering Issue

    Nacho Nachev, Mar 30, 2005, in forum: ASP .Net
    Replies:
    4
    Views:
    552
    Nacho Nachev
    Mar 31, 2005
  3. crazygrape
    Replies:
    1
    Views:
    424
    Peter van Merkerk
    Aug 6, 2003
  4. Adaptive datatype (or so...)

    , Jul 20, 2006, in forum: C Programming
    Replies:
    15
    Views:
    463
    Default User
    Jul 21, 2006
  5. Damo

    Adaptive forms

    Damo, Apr 27, 2007, in forum: Javascript
    Replies:
    1
    Views:
    87
    scripts.contact
    Apr 28, 2007
Loading...

Share This Page