Multiple form weirdness in IE6

Discussion in 'Javascript' started by Rob, Jan 31, 2008.

  1. Rob

    Rob Guest

    I am having an issue where I have multiple forms on a page. The first
    form has a couple of hidden inputs. The second form has all the
    visible controls including three buttons. Each of these buttons has a
    behaviour attached to it (From Ben Nolan's Behaviour.js) based on its
    id. The code for the first button is something like this (I am also
    using prototype.js):

    var button1Func = function(event)
    {
    alert("I am in button1Func");
    $('secondForm').submit();
    };
    Behaviour.register(
    {
    '#button1': function(element)
    {
    Event.observe(element, 'click', button1Func);
    }
    });

    When the button is clicked, an alert pops up saying "I am in
    button1Func", but then the status bar says it is calling the action
    for the first form and not the second. When I move the first form to
    the bottom of the page, the first button works correctly. What is
    going on here? It seems to work ok in FF2 and IE7.

    Thanks,
    Rob
     
    Rob, Jan 31, 2008
    #1
    1. Advertising

  2. Rob

    VK Guest

    On Jan 31, 6:49 pm, Rob <> wrote:
    > I am having an issue where I have multiple forms on a page. The first
    > form has a couple of hidden inputs. The second form has all the
    > visible controls including three buttons. Each of these buttons has a
    > behaviour attached to it (From Ben Nolan's Behaviour.js) based on its
    > id. The code for the first button is something like this (I am also
    > using prototype.js):
    >
    > var button1Func = function(event)
    > {
    > alert("I am in button1Func");
    > $('secondForm').submit();
    > };
    > Behaviour.register(
    > {
    > '#button1': function(element)
    > {
    > Event.observe(element, 'click', button1Func);
    > }
    > });
    >
    > When the button is clicked, an alert pops up saying "I am in
    > button1Func", but then the status bar says it is calling the action
    > for the first form and not the second. When I move the first form to
    > the bottom of the page, the first button works correctly. What is
    > going on here? It seems to work ok in FF2 and IE7.


    There is something wrong either in used libraries or in the way you
    used them. IE6 has no problem with multiple forms:

    <html>
    <head>
    <meta http-equiv="Content-Type"
    content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    </head>
    <body>

    <form name="Form01" action="">

    <input type="hidden" name="hidden" value="hidden value">
    </form>

    <form name="Form02" action="">
    <input type="text" name="textField" value="default">
    <input type="button" value="Click me" onclick="
    window.alert(document.forms['Form01'].hidden.value);
    window.alert(this.form.name);
    this.form.submit();
    ">
    </form>

    </body>
    </html>
     
    VK, Jan 31, 2008
    #2
    1. Advertising

  3. Rob

    Rob Guest

    On Jan 31, 11:11 am, VK <> wrote:
    > On Jan 31, 6:49 pm, Rob <> wrote:
    >
    >
    >
    > > I am having an issue where I have multiple forms on a page. The first
    > > form has a couple of hidden inputs. The second form has all the
    > > visible controls including three buttons. Each of these buttons has a
    > > behaviour attached to it (From Ben Nolan's Behaviour.js) based on its
    > > id. The code for the first button is something like this (I am also
    > > using prototype.js):

    >
    > > var button1Func = function(event)
    > > {
    > > alert("I am in button1Func");
    > > $('secondForm').submit();
    > > };
    > > Behaviour.register(
    > > {
    > > '#button1': function(element)
    > > {
    > > Event.observe(element, 'click', button1Func);
    > > }
    > > });

    >
    > > When the button is clicked, an alert pops up saying "I am in
    > > button1Func", but then the status bar says it is calling the action
    > > for the first form and not the second. When I move the first form to
    > > the bottom of the page, the first button works correctly. What is
    > > going on here? It seems to work ok in FF2 and IE7.

    >
    > There is something wrong either in used libraries or in the way you
    > used them. IE6 has no problem with multiple forms:
    >
    > <html>
    > <head>
    > <meta http-equiv="Content-Type"
    > content="text/html; charset=iso-8859-1">
    > <title>Untitled Document</title>
    > </head>
    > <body>
    >
    > <form name="Form01" action="">
    >
    > <input type="hidden" name="hidden" value="hidden value">
    > </form>
    >
    > <form name="Form02" action="">
    > <input type="text" name="textField" value="default">
    > <input type="button" value="Click me" onclick="
    > window.alert(document.forms['Form01'].hidden.value);
    > window.alert(this.form.name);
    > this.form.submit();
    > ">
    > </form>
    >
    > </body>
    > </html>


    That is not exactly what I was doing, but rather like this:

    <form name="Form01" action="/action1.do">

    <input type="hidden" name="hidden" value="hidden value"/>
    </form>

    <form name="Form02" id="secondForm" action="/action2.do">
    <input type="text" name="textField" value="default"/>
    <button type="button" id="button1">Click me</button>
    </form>

    var button1Func = function(event)
    {
    alert("I am in button1Func");
    $('secondForm').submit();
    };
    Behaviour.register(
    {
    '#button1': function(element)
    {
    Event.observe(element, 'click', button1Func);
    }
    });

    When I click the button, action1.do gets called.

    Thanks,
    Rob
     
    Rob, Jan 31, 2008
    #3
  4. Rob

    VK Guest

    On Jan 31, 8:25 pm, Rob <> wrote:
    > On Jan 31, 11:11 am, VK <> wrote:
    >
    >
    >
    > > On Jan 31, 6:49 pm, Rob <> wrote:

    >
    > > > I am having an issue where I have multiple forms on a page. The first
    > > > form has a couple of hidden inputs. The second form has all the
    > > > visible controls including three buttons. Each of these buttons has a
    > > > behaviour attached to it (From Ben Nolan's Behaviour.js) based on its
    > > > id. The code for the first button is something like this (I am also
    > > > using prototype.js):

    >
    > > > var button1Func = function(event)
    > > > {
    > > > alert("I am in button1Func");
    > > > $('secondForm').submit();
    > > > };
    > > > Behaviour.register(
    > > > {
    > > > '#button1': function(element)
    > > > {
    > > > Event.observe(element, 'click', button1Func);
    > > > }
    > > > });

    >
    > > > When the button is clicked, an alert pops up saying "I am in
    > > > button1Func", but then the status bar says it is calling the action
    > > > for the first form and not the second. When I move the first form to
    > > > the bottom of the page, the first button works correctly. What is
    > > > going on here? It seems to work ok in FF2 and IE7.

    >
    > > There is something wrong either in used libraries or in the way you
    > > used them. IE6 has no problem with multiple forms:

    >
    > > <html>
    > > <head>
    > > <meta http-equiv="Content-Type"
    > > content="text/html; charset=iso-8859-1">
    > > <title>Untitled Document</title>
    > > </head>
    > > <body>

    >
    > > <form name="Form01" action="">

    >
    > > <input type="hidden" name="hidden" value="hidden value">
    > > </form>

    >
    > > <form name="Form02" action="">
    > > <input type="text" name="textField" value="default">
    > > <input type="button" value="Click me" onclick="
    > > window.alert(document.forms['Form01'].hidden.value);
    > > window.alert(this.form.name);
    > > this.form.submit();
    > > ">
    > > </form>

    >
    > > </body>
    > > </html>

    >
    > That is not exactly what I was doing, but rather like this:
    >
    > <form name="Form01" action="/action1.do">
    >
    > <input type="hidden" name="hidden" value="hidden value"/>
    > </form>
    >
    > <form name="Form02" id="secondForm" action="/action2.do">
    > <input type="text" name="textField" value="default"/>
    > <button type="button" id="button1">Click me</button>
    > </form>
    >
    > var button1Func = function(event)
    > {
    > alert("I am in button1Func");
    > $('secondForm').submit();
    > };
    > Behaviour.register(
    > {
    > '#button1': function(element)
    > {
    > Event.observe(element, 'click', button1Func);
    > }
    > });
    >
    > When I click the button, action1.do gets called.


    There is nothing in the posted code that would suggest such weird
    behavior. If
    $('secondForm').submit()
    submits Form01 instead then ask at Prototype.js forums how can it be
    possible - I assume $() method is from Prototype.js

    Other option would be to post or link minimum sample page still
    demonstrating this behavior: that could be some non-obvious typo.

    On the long run I wouldn't clutter the page with a bunch of libraries
    for just three buttons: ol' good DOM0 form methods are much simpler to
    use.
     
    VK, Jan 31, 2008
    #4
    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. Ivor O'Connor
    Replies:
    4
    Views:
    904
    Isofarro
    Nov 25, 2003
  2. Peter Mount
    Replies:
    4
    Views:
    984
    Peter Mount
    Jan 31, 2006
  3. steve
    Replies:
    4
    Views:
    551
    Brian van den Broek
    Mar 13, 2005
  4. Doug Lerner
    Replies:
    5
    Views:
    128
    Richard Cornford
    Jan 22, 2006
  5. Pugi!
    Replies:
    0
    Views:
    255
    Pugi!
    Feb 5, 2007
Loading...

Share This Page