Why is jQuery grabbing the parent form name when serializing a child form's values in ASP.NET?
<p>I am attempting to loop through all forms in the page and serialize the values.  I need to get the form id or name of each form as well.  </p>

<p>In this case, I have 2 forms inside the standard ASP.NET server form that encapsulates everything.</p>

<p>The problem is that when it serializes the second forms values, it writes the name of the parent ASP.NET form, not the actual form the values sit in.</p>

<p>The second form output works perfectly. </p>

<p>Here is my code and output.</p>

<p>The javascript:</p>

<pre><code>$(document).ready(function ()
{
    $("form").each(function ()
    {
        document.write("&lt;li&gt;Form ID: " + $(this).attr("name"));
        document.write("&lt;li&gt;Form Values: " + $(this).serialize());
    });


});
</code></pre>

<p>The HTML output</p>

<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"&gt;&lt;/script&gt;
    &lt;script src="Scripts/cache.js" type="text/javascript"&gt;&lt;/script&gt;

    &lt;title&gt;&lt;/title&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;form method="post" action="CacheTesting.aspx" id="form1" name="form1"&gt;
        &lt;div class="aspNetHidden"&gt;

            &lt;input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE2MTY2ODcyMjlkZJ3NbEPOwkaa9B4UXSJtqYSQBihLaZZ9uYNPO/u0XD1G" /&gt;
        &lt;/div&gt;
        &lt;div&gt;
        &lt;form name="form2" id="form2" action="#"&gt;
            &lt;input type="text" id="txtName" name="txtName" /&gt;
        &lt;/form&gt;
        &lt;form name="form3" id="form3" action="#"&gt;
            &lt;select name="single"&gt;
                &lt;option&gt;Single&lt;/option&gt;
                &lt;option&gt;Single2&lt;/option&gt;
            &lt;/select&gt;

            &lt;br /&gt;

            &lt;select name="multiple" multiple="multiple"&gt;
                &lt;option selected="selected"&gt;Multiple&lt;/option&gt;
                &lt;option&gt;Multiple2&lt;/option&gt;
                &lt;option selected="selected"&gt;Multiple3&lt;/option&gt;
            &lt;/select&gt;

            &lt;br /&gt;

            &lt;input type="checkbox" name="check" value="check1" id="ch1" /&gt;
            &lt;label for="ch1"&gt;check1&lt;/label&gt;

            &lt;input type="checkbox" name="check" value="check2" checked="checked" id="ch2" /&gt;
            &lt;label for="ch2"&gt;check2&lt;/label&gt;

            &lt;br /&gt;

            &lt;input type="radio" name="radio" value="radio1" checked="checked" id="r1" /&gt;
            &lt;label for="r1"&gt;radio1&lt;/label&gt;

            &lt;input type="radio" name="radio" value="radio2" id="r2" /&gt;
            &lt;label for="r2"&gt;radio2&lt;/label&gt;

            &lt;input type="submit" name="btn" id="btn" onclick="showValues()" /&gt;

        &lt;/form&gt;
        &lt;p&gt;
            &lt;tt id="results"&gt;&lt;/tt&gt;
        &lt;/p&gt;
    &lt;/div&gt;
    &lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>And here is what the javascript produces:</p>

<pre><code>Form ID: form1
Form Values: __VIEWSTATE=%2FwEPDwULLTE2MTY2ODcyMjlkZJ3NbEPOwkaa9B4UXSJtqYSQBihLaZZ9uYNPO%2Fu0XD1G&amp;txtName=

Form ID: form3
Form Values: single=Single&amp;multiple=Multiple&amp;multiple=Multiple3&amp;check=check2&amp;radio=radio1
</code></pre>

<p>The problem is that in the first loop, the Form ID should be form2, not form1. I know this because <code>txtName</code> is a part of <code>form2</code>, not <code>form1</code>.</p>

<p>Anything I can do to remedy this?</p>

<p>Thanks
Kevin</p>
