Multiple form weirdness in IE6

R

Rob

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
 
V

VK

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.
Click to expand...

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>
 
R

Rob

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):
Click to expand...
var button1Func = function(event)
{
alert("I am in button1Func");
$('secondForm').submit();
};
Behaviour.register(
{
'#button1': function(element)
{
Event.observe(element, 'click', button1Func);
}
});
Click to expand...
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.
Click to expand...

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>
Click to expand...

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
 
V

VK

There is something wrong either in used libraries or in the way you
used them. IE6 has no problem with multiple forms:
Click to expand...
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>
<body>
Click to expand...
<form name="Form01" action="">
Click to expand...
<input type="hidden" name="hidden" value="hidden value">
</form>
Click to expand...
<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>
Click to expand...
</body>
</html>
Click to expand...

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.
Click to expand...

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.
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Client-side JavaScript weirdness with assigning a form element -in Windows / IE6 only. Any ideas? 5
Multiple screen in wxphyton 0
psycopg2 weirdness 2
Detect popup window in IE6 3
XHR problem in IE6 (long) 1
IE6 Form and Its Properties After Submit 3
IE6 Bug Workaround ????? 7
dynamic image map not working in IE6 0

Members online

No members online now.
Total: 40 (members: 0, guests: 40)
Robots: 314

Forum statistics

Threads
473,995
Messages
2,570,236
Members
46,825
Latest member
VernonQuy6

Latest Threads

Top