M
Mark
Flightless Bird
I don't know if this is the right group for this... All the groups that have
scripting explicitly in the title seem deader than a doornail.
I've got a scripting problem that's driving me nuts... First let me say I
know most of what follows is really bad practice but the code used to work
(still does on some websites) but suddenly stopped working on our new site
and I haven't been able to figure out what the difference is.
We've got a form that gathers user input. Within that form, client-side
script injects another little form that uploads a file in a sort of ajax-y
way; if there's an upload, the client-side scripts takes the json result and
sets other values in the form with it.
The *really* bad practice is that the injected form has some inputs with the
same names as inputs in the outer form. I'm still puzzling through why it
ever worked.
To boil it *way* down to demonstrate, we have something like
<body onload="injectform(document.getElementById('injectHere'))">
<form method="post" action="foo.aspx" id="mainForm">
<input type="hidden" name="foo" value="">
<input type="submit" onclick="document.mainForm.foo='done';return false;">
....
<div id="injectHere"></div>
<script language="javascript">
function injectForm(parentEl)
{
var frm=document.createElement("form");
parentEl.appendChild(frm);
frm.method="post";
frm.enctype="multipart/form-data";
frm.encoding="multipart/form-data";
frm.action="bar.aspx";
var fileCtl=document.createElement("input");
fileCtl.type="file";
fileCtl.name="fileCtl";
fileCtl.onchange=function(evt){fileChosenCallback(fileCtl);};
frm.appendChild(fileCtl);
frm.style.margin="0";
var
ctl=document.createElement("input");ctl.type="hidden";ctl.name="foo";frm.appendChild(ctl);ctl.value="bar";
}
</script>
....
</form>
</body>
So in scripting, document.forms.length = 2 and document.forms[1] is nested
in document.forms[0]. The problem we've just started seeing is when the
submit button is clicked, the "foo" input is not being updated by the onClick
code.
Here's the difference I've been able to see in the debugger:
In the old sites where it works the debugger shows,
1) document.forms[1].foo is undefined
2) document.forms[1].outerHTML has all the injected inputs but all the name=
have been snipped out - there are no displayed name attributes at all.
3) document.forms[0].foo resolves to a single input element - the first
declared one.
In the new site where it's broken, the debugger shows,
1) document.forms[1].foo resolves to the injected foo input
2) document.forms[1].outerHTML shows all the name= attributes
and
3) document.forms[0].foo resolves to an element collection. The onClick
code sets .value on the collection (which apparently goes quietly into the
ether without making a ripple).
So under what circumstances does the HTML dom hide the names on nested form
inputs? That seems to be the only reason why the crap ever did anything at
all. I've compared the script that's injecting the form and that's all the
same. I've compared the html being generated immediately around the parent
forms and that's all the same.
But for some reason perhaps in an outer circle of hell, the javascript dom
simply choses not to see the names of inputs in nested forms. Now suddenly
it is and I haven't been able to nail down why...
Any clues would be appreciated...
Thx
Mark
scripting explicitly in the title seem deader than a doornail.
I've got a scripting problem that's driving me nuts... First let me say I
know most of what follows is really bad practice but the code used to work
(still does on some websites) but suddenly stopped working on our new site
and I haven't been able to figure out what the difference is.
We've got a form that gathers user input. Within that form, client-side
script injects another little form that uploads a file in a sort of ajax-y
way; if there's an upload, the client-side scripts takes the json result and
sets other values in the form with it.
The *really* bad practice is that the injected form has some inputs with the
same names as inputs in the outer form. I'm still puzzling through why it
ever worked.
To boil it *way* down to demonstrate, we have something like
<body onload="injectform(document.getElementById('injectHere'))">
<form method="post" action="foo.aspx" id="mainForm">
<input type="hidden" name="foo" value="">
<input type="submit" onclick="document.mainForm.foo='done';return false;">
....
<div id="injectHere"></div>
<script language="javascript">
function injectForm(parentEl)
{
var frm=document.createElement("form");
parentEl.appendChild(frm);
frm.method="post";
frm.enctype="multipart/form-data";
frm.encoding="multipart/form-data";
frm.action="bar.aspx";
var fileCtl=document.createElement("input");
fileCtl.type="file";
fileCtl.name="fileCtl";
fileCtl.onchange=function(evt){fileChosenCallback(fileCtl);};
frm.appendChild(fileCtl);
frm.style.margin="0";
var
ctl=document.createElement("input");ctl.type="hidden";ctl.name="foo";frm.appendChild(ctl);ctl.value="bar";
}
</script>
....
</form>
</body>
So in scripting, document.forms.length = 2 and document.forms[1] is nested
in document.forms[0]. The problem we've just started seeing is when the
submit button is clicked, the "foo" input is not being updated by the onClick
code.
Here's the difference I've been able to see in the debugger:
In the old sites where it works the debugger shows,
1) document.forms[1].foo is undefined
2) document.forms[1].outerHTML has all the injected inputs but all the name=
have been snipped out - there are no displayed name attributes at all.
3) document.forms[0].foo resolves to a single input element - the first
declared one.
In the new site where it's broken, the debugger shows,
1) document.forms[1].foo resolves to the injected foo input
2) document.forms[1].outerHTML shows all the name= attributes
and
3) document.forms[0].foo resolves to an element collection. The onClick
code sets .value on the collection (which apparently goes quietly into the
ether without making a ripple).
So under what circumstances does the HTML dom hide the names on nested form
inputs? That seems to be the only reason why the crap ever did anything at
all. I've compared the script that's injecting the form and that's all the
same. I've compared the html being generated immediately around the parent
forms and that's all the same.
But for some reason perhaps in an outer circle of hell, the javascript dom
simply choses not to see the names of inputs in nested forms. Now suddenly
it is and I haven't been able to nail down why...
Any clues would be appreciated...
Thx
Mark
