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:<formrunat="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:

5 comments:

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?

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.

About Me

I've created this blog for sharing my technical experience in software engineering. Most of posts will be dedicated to Sharepoint. But I will write also about another areas of software development for .Net platform. Hope it will be useful and will help you in your work.