Monday, January 17, 2011

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.

5 comments:

  1. Thanks for the Nice Article. I want to know if I am not allowed to download script to the server, and if I want to use JQuery in the Content Editor Web Part, how should I go about that ? Means where should I add referrence to the JQuery library in my Content Editor Web part's source editor and how?

    ReplyDelete
  2. hello Dhaval,
    you can use CDN hosts. Check the following link: http://docs.jquery.com/Downloading_jQuery:
    - Google Ajax API CDN: https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js
    - Microsoft CDN: http://ajax.microsoft.com/ajax/jquery/jquery-1.5.min.js
    - jQuery CDN: http://code.jquery.com/jquery-1.5.min.js

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete
  4. Alex, can most of these steps be accomplished through SharePoint Designer? If not, what did you use?

    Thanks

    ReplyDelete
  5. kpl,
    yes it can be done via Sharepoint Designer. It will be even simpler, because you won't need to add javascript via web parts (this article was written for Sharepoint 2007, in Sharepoint 2010 in order to add javascript via CEWP, you need to upload js file as txt file to the doclib and add content link via CEWP properties. Otherwise js will be trimmed because of security reasons) and add javascript directly to the master page or to the particular page.

    ReplyDelete