1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

client-side scripting, html dom weirdness -help?

Discussion in 'Internet Explorer' started by Mark, Feb 18, 2010.

  1. Mark

    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
     
  2. rob^_^

    rob^_^ Flightless Bird

    Hi,

    No nested forms. Its invalid markup.

    "Mark" <mmodrall@nospam.nospam> wrote in message
    news:EC5AB147-D4C9-4E35-8E9A-EF52BF07AE26@microsoft.com...
    > 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
    >
    >
     
  3. PA Bear [MS MVP]

    PA Bear [MS MVP] Flightless Bird

    Developer-specific resources include:

    MSDN IE Development Forum (post such questions here instead)
    http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/threads

    IE Developer Center
    http://msdn.microsoft.com/en-us/ie/default.aspx

    Learn IE8
    http://msdn.microsoft.com/en-us/ie/aa740473.aspx

    HTML and DHTML Overviews and Tutorials
    http://msdn.microsoft.com/en-us/library/ms537623.aspx and

    Cascading Style Sheets (CSS)
    http://msdn2.microsoft.com/en-us/ie/aa740476.aspx

    Expression Web SuperPreview for Internet Explorer (free, stand-alone visual
    debugging tool for IE6, IE7, and IE8)
    http://www.microsoft.com/downloads/...FamilyID=8e6ac106-525d-45d0-84db-dccff3fae677

    Expression Web SuperPreview Release Notes
    http://www.microsoft.com/expression/products/Web_SuperPreviewReleaseNotes.aspx

    Validators:
    http://validator.w3.org/
    http://jigsaw.w3.org/css-validator/


    Mark wrote:
    > 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
     

Share This Page