Visit this project at google code: http://code.google.com/p/jquerysharepointform/

Sending a form from to outside of a sharepoint implementation is a tedious task, so I am writing a jquery plugin to facilitate that job.

As most of .net applications (sharepoint being one of them) it wraps the html code with a form element. For some reason you cannot have a form inside of a form. One of the ways to solve is to add a javascript that reference the form outside of the main form element. There are some script that allow you to send form, but uses ajax and generate some crossposting errors. This script allow you to have a form inside of a form with small modification.

There are applications for this code like sending a form to a CRM system or any other system outside of the SharePoint.

Requirements

Load the jquery.js library and `jquery.SharePointFormSubmit.js`

Parameters

* element - element that is wrapping the pseudo form
* method - post / get
* action - the url where the information will be submitted

Example

Let's say you have a form like bellow and you want to put in the Content Editor Web Part (CEWP).

<form method="post" action="http://www.foobar.com/subscribe.aspx">
  first name
  <input type="text" name="firstName id="firstName" value="" size="21" maxlength="50" />

  last name
  <input type="text" name="lastName" id="lastName" value="" size="22" maxlength="50" />
    	
  email
  <input type="text" name="email" id="email" value="" size="45" maxlength="255" />
        
  <input type="submit" name="mysubmit" value="Click!">  
</form>


It is well know the CEWP doesn't allow to add a form, that's the reason I create this jQuery plugin. To make the `<form>` above work in sharepoint, you will need to remove the form tag and replace the submit button with a onclick event. Like the example bellow:

<div id="divIdForm">
  first name
  <input type="text" name="firstName id="firstName" value="" size="21" maxlength="50" />

  last name
  <input type="text" name="lastName" id="lastName" value="" size="22" maxlength="50" />

  email
  <input type="text" name="email" id="email" value="" size="45" maxlength="255" />

  <button id="idButton" type="button" onclick = "jQuery().SharePointFormSubmit('#divIdForm', 'post', 'http://www.foobar.com/readform.aspx')")>
  Sign Up!
  </button>
</div>



Attention to the `<div> </div>` to replace the `<form> </form>` and
jQuery().SharePointFormSubmit('#divIdForm', 'post', 'http://www.foobar.com/readform.aspx')


and replace the `<input submit` with something that have onclick capacity

<button id="idButton" type="button" onclick = "jQuery().SharePointFormSubmit('#divIdForm', 'post', 'http://www.foobar.com/readform.aspx')")>
  Sign Up!
</button>

Thanks

I would like to thank the following people and references that helped me with the inspiration.
* http://www.jquery.com jQuery
* https://developer.mozilla.org/en/DOM/form Mozila Development Center
* http://viralpatel.net/blogs/2009/01/dynamic-add-textbox-input-button-radio-element-html-javascript.html Viral Patel
* http://boris.gomiunik.net/2008/09/making-post-and-get-forms-from-sharepoints-pages/ Boris Gomiunik

Last edited Apr 16, 2009 at 10:57 PM by dinnouti, version 5