Bojensen Blogs

Sharepoint

Submit a form to outside website from sharepoint

by  • 

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.SharePointFormSubmit2.js

Version 2

I decide to replace with array instead of args, it make our life easier.

So you have a form like:

<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>

 

To use in SharePoint use the following changes in a Content Editor Web Part:

<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({'element':'#divIdForm', 'frmMethod':'post', 'frmAction': 'http://www.foobar.com/readform.aspx'})">Sign Up!</button>
</div>

Note, there is no <form> and <input type='submit'> , and the addition of <div> .

Old Version

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>

jquerysharepointform – Submit a form to outside website from sharepoint – Google Project Hosting

Comments are closed.