Submit html form using Content Editor Web Part in Sharepoint

Recently I faced with the problem of submitting of html form which should be added on the page using CEWP. The problem is that in most cases master page of Sharepoint web part already has top-level html form:

   1: <form runat="server" onsubmit="return _spFormOnSubmitWrapper();">

   2: ...

   3: </form>

And all placeholders are inserted within this form. So if you try to add your form in page layout or add html layout with form element on the page using standard Content Editor Web Part you will get nested forms which is not well formed html.

Trying to figure out how to solve this issue, I found the following project on Codeplex: http://sharepointformsubmit.codeplex.com. This is single javascript file (jquery.SharePointFormSubmit.js) which uses the following trick: instead of real html form you should add div element in the CEWP. And instead of submit input element you should use button with onclick event handler attached. Script will create form with all input elements dynamically, but not as nested form – as a sibling form – and then will call submit() method on it.

Unfortunately it did work for me as is (at least revision 1 from 2009-04-16 which is available on Codeplex. There is also revision 2 available on code.google.com - http://code.google.com/p/jquerysharepointform, but I didn’t tried it). I was needed to slightly modify the script:

   1: (function($){

   2:     $.fn.SharePointFormSubmit = function(element,method,action) {

   3:         var e; // new input element

   4:         var f = document.createElement("form"); // form

   5:             f.method = method;

   6:             f.action = action;            

   7:             f.setAttribute("style","display:none");

   8:  

   9:             $(element).find("input, select, textarea").each(function(){

  10:                 e = document.createElement("input")

  11:                 e.setAttribute("type", $(this).attr("type"));

  12:                 e.setAttribute("id", $(this).attr("id"));

  13:                 e.setAttribute("name", $(this).attr("name"));

  14:                 e.setAttribute("value", $(this).val());

  15:                 e.setAttribute("checked", $(this).attr("checked"));

  16:                 e.setAttribute("multiple", $(this).attr("multiple"));

  17:                 f.appendChild(e);

  18:             });

  19:  

  20:             var s = document.body.appendChild(f);

  21:             s.submit();

  22:     };

  23: })(jQuery);

Having this script you need to do the following actions in order to submit form from CEWP:

1. Add 1st CEWP on the page with the following content:

   1: <script type="text/javascript"

   2: src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

   3: <script type="text/javascript"

   4: src="http://jquerysharepointform.googlecode.com/files/jquery.SharePointFormSubmit.js">

You can also download these scripts on your web server (e,g, in [12 or 14]/Templates/Layouts folder) and use them from it.

2. Add 2nd CEWP with your “form” (instead of form you need to insert div element, like described here):

   1: <div id="divIdForm">

   2: Email: <input type="text" name="email" id="email"><br />

   3: <input type="submit" value="Submit" onclick="jQuery().SharePointFormSubmit('#divIdForm', 'post',

   4: 'http://example.com')">

   5: </div>

In this example with this code added to the CEWP you will be able to submit forms into “html://example.com” URL. It will work also for cross domain submits.