Making "Post" and "Get" forms from SharePoint’s pages !

If you’ve tried to insert a form into a sharepoint’s page you mus have been disappointed. The form just didn’t work. You can’t make the form to post or get to some url, because the whole SharePoint’s page is one big <form> element.

So I went a bit deeper on how Microsoft guys are doing it on their spaces site (blog this functionality makes a post to a certain url) and based on this, I’ve made this simple script to make “forms” to post and to submit.

First thing: Insert your form as it should be

<form action="http://www.somesite.com/somepage.aspx" method="post">
      <input name="name"/>
      ... etc. with all the fields you need.
      <input type="submit" value="Submit"/>
  </form> 

Before you save the page or the content editor webparts, make the three changes:

1. Remove the <form> tags and replace them with <div id=”contactForm”>

<div id="contactForm">
      <input name="name"/>
      ... etc. with all the fields you need.
      <input type="submit" value="Submit"/>
  </div> 

2. Add the following script before the form

<script type="text/javascript">
  function submitForm(containerElement) {
      var theForm = document.createElement("form");
          theForm.action = 'http://www.somesite.com/somepage.aspx';
          theForm.method = "post";
          theForm.innerHTML = document.getElementById(containerElement).outerHTML;
      var formToSubmit = document.body.appendChild(theForm);
          formToSubmit.submit();
  }
  </script>

Note: be sure to correct the theForm.action and theForm.method to appropriate url and method (for your form)

3. Change the submit button with

<button onclick="submitForm('contactForm')>Submit</button>

Note: Make sure you copy the ID of the layer (in the sample above is the contactForm) to the parameter of the submitForm function.

the end code would look something like below:

<script type="text/javascript">
function submitForm(containerElement) {
    var theForm = document.createElement("form");
        theForm.action = 'http://www.somesite.com/somepage.aspx';
        theForm.method = "post";
        theForm.innerHTML = document.getElementById(containerElement).outerHTML;
    var formToSubmit = document.body.appendChild(theForm);
        formToSubmit.submit();
}
</script>
<div id="contactForm">
    <input name="name" type="text"/>
    ... etc. with all the fields you need.
    <button onclick="submitForm('contactForm')>Submit</button>
</div>

Update (5.11.): Unfortunately this method works straight only in IE, because it’s the only one that coppies the innerHTML with the changes (input data). So to get this method to work in FF, Chrome, Safari, Opera,.. you have to copy the field values. Here’s how

After the line

var formToSubmit = document.body.appendChild(theForm);

add code similar to the one below for copying the values for each of the input fields

document.getElementsByName('name')[1].value = document.getElementsByName('name')[0].value;

Apply the similar methodology for other types of fields. I’ll try to come up with a universal script to copy values.

*******************************************************************************************