Error occurs when jQuery processing a form is inside another form

Question

I am writing a form using jQuery and encounter some difficulties.

My form works fine in static page (html).
However, when I use the form in dynamic page(aspx), the form does not behave correctly. I cannot append items to the form and call the form.serialize function.

I think the error occurs when a form is inside another form (.aspx code needs to enclosed by a form tag).

What should I do?

Let me give a simplified version of my code:

<form name="Form1" method="post" id="Form1">
some content
<form name="form_inside">
<input name="fname" type="text" />
</form>
</form>

jQuery code:

$("#form_inside").append($("<input type='text' name='lname'>"));

When the user submits,

$("#form_inside").serialize(); 
// it should return fname=inputfname&lname=inputlname

I want to append element to "form_inside" and serialize the form "form_inside".
The form "Form1" is required by the aspx and I cannot remove it.

Answer 1

Could you just serialize the fields inside Form1?

I don't know anything about ASP, but it seems that you're not doing a straightforward "submit" anyway - so does it really matter if the fields aren't within their own separate form?

You could possibly group the fields you're interested in within a <div> or something, e.g.:

<div id="my-interesting-fields">
    ...
</div>

then substitute #form-inside with #my-interesting-fields where appropriate - is that helpful at all?

Edit

OK, a quick glance at the jQuery code suggests that serialize() depends on the form's elements member.

I suppose you could hack this in a couple of different ways:

• Copy all elements from #my-interesting-fields into a temporary <form> that you dynamically create outside Form1, then call serialize() on that. Something like:

  $("#Form1").after("<form id='tmp-form'></form>").
              append("#my-interesting-fields input");
  $("tmp-form").serialize();
  

• Or, create an elements member on #my-interesting-fields, e.g.

  $("#my-interesting-fields").elements = $("#my-interesting-fields input");
  $("#my-interesting-fields").serialize();
  

I haven't tried either of these, but that might give you a couple of ideas. Not that I would necessarily recommend either of them :)

Answer 2

Because you can't have nested <form> tags you'll need to close off the standard dotnet form tag like below:

<script type="text/javascript">
    $(document).ready(function() {
        $("#form_inside").append($("<input type='text' name='lname'>"));
        $("#submitBtn").click(function() {function() {
            var obj = $("#form_inside *");
            var values = new Array();
            obj.each(function(i,obj1) {
                if (obj1.name && !obj1.disabled && obj1.value) {
                    values.push(obj1);
                }; 
                });
                alert(jQuery.param(values));
        }); });
    });

</script>
<form id="form1" runat="server">
<div>
<div id="form_inside" name="form_inside"> <input name="fname" type="text" /><input type="button" id="submitBtn" /></div>

</div>
</form>

jQuery.param on a array of form elements will give you the same results as .serialize()

so you get all elements in div $("#form_inside *) then filter for elements then on the result jQuery.param will give you exactly what you need