Change FORM element to something else or delete it while keeping all child elements.

Question

I've integrated Asp.net MVC with Sharepoint site. It works great. But I'm using default Sharepoint master page as well (~masterurl/default.master namely). the problem is that this particular master page has the whole page wrapped in a form element while all Sharepoint pages are just normal Asp.net WebForm pages.

My MVC content should have it's own form and input elements that I'd like to submit to the server. Ajax calls are obviously not that problematic. I'm not able to use $("form").serializeArray() if I keep the original form element. But nonetheless normal postbacks are problematic, since there's WebForm functionality on submit events and they would send way too much data to server.

I will be using normal postbacks as well as Ajax postbacks. The main problem being normal postbacks.

So I have two possibilities that both should run on $(document).ready():

1. Delete form element and keep all other content as is. In jQuery it would probably mean to prepend form element with a div, move its content to this div and then delete form.
2. Directly change form element to div. This would probably be faster in terms of browser processing, but I don't know how to do it.

So if anyone can elaborate a solution for 2. and provide some input on these two possible solutions: which one should be done and why.

Edit

There's a third possibility as well. I could just create my input elements as neede but containe them inside a div element. When user would want to submit my form (div is not a form anyway) I could:

1. dynamically call $("div.form").serializeArray()
2. create a form element
3. populate it with serialized values
4. append form to body
5. submit it.

Seems tedious but it could work. Still first two solutions seem simpler.

Answer 1

If you're submitting via $.ajax() I'd just go with .serialize() of the elements directly, like this:

$.ajax({
  url: "Path/Action",
  type: "post",
  data: $("#someContainer :input").serialize(),
  success: function(data) {
    //do something
  }
});

Or the shorter $.post() version:

$.post("Path/Action", $("#someContainer :input").serialize(), function(data) {
  //do something
});

This doesn't require any <form> generation or other trickery, just a normal jQuery AJAX post (or GET, whatever's needed).