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.
Any chance to use this with a form to upload a file ?
For me the document.getElementsByName('name')[1].value = document.getElementsByName('name')[0].value; line did not set a query string with the values I needed. I solved this by changing the string set as theForm.action. My new string looks like:
theForm.action = 'SearchResults.aspx?name=' + document.getElementsByName('name')[0].value;
This string can be made as long as needed by adding further strings and element values to it. Note I hard coded the first 'name' into the string, rather than taking the value from document.getElementsByName('name')[1].value.
Exactly. Thanks for the update which I forgot. The .value attribute works also for textareas.
Hello
Excellent blog. I am starting using SP as an end user after I tried to get another teamwork software into the company.
thanks sharing
Very nice post, I have a javascript question, in the document.getElementsByName('name')[1].value = document.getElementsByName('name')[0].value; how does the value get submitted if it is assigned the value to the document element and not to formToSubmit?
thanks
Alex
Great post thanks. It doesn't even feel too 'hacky' in order to get yourself a form within a form. Thanks!
Awesome solution,
i was trying to figure out how to add a damn form in sharepoint and your code did it for me.
thanks a lotttt.
Hi all,
There is another work around to cheat sharepoint with forms.
Write your form code into an html page.
Save this page into a sharepoint directory (or directly to the root, whatever…).
In your main page where you want your form to show up, insert a web part ‘html viewer’ which point to the html page you saved before.
(Don’t forget to add “target=_blank” in your form tag)
Enjoy.
Yann,
If there is any way that we can hidden scroll bars under web viewer page? it shows dual scroll bars from main sharepoint site and hidden FORM page website? Please advise and thanks so much to share with us with this tricks?…:)…:)..!!!
Hi, Yann. Also a simple and effective trick
You are my saviour!
Glad I could help
Hi Boris…I am using google checkout button for donenation purpose. Like you mentioned everything is working fine in IE without any modification upto 3. To make it work in chrome and other Browsers. I have updated it with other input fields values too. Its working fine in chrome but not in FF. Any guess why its not working as expected.
When i alert(document.getElementsByName(‘name’).length) in FF it returns only 1 where as in case of chrome it returns 2.
Submit
I think the above should be:
Submit
Yann
Your trick is simply wonderful.. It saved a lot of time on my side..
I’m using this example with Paypal code on sharepoint WSS 3.0 site. But it doesn’t seems like working!
Pay Now paypal button shows up as per their code, but clicking on the button doesn’t seems to be working. Any ideas
Hi Boris,
Thanks for the nice post. This works amazing in IE. As you suggested, I placed document.getElementsByName(‘name’)[1].value = document.getElementsByName(‘name’)[0].value; line below var formToSubmit = document.body.appendChild(theForm); line. But I am getting document.getElementsByName(‘name’)[1].value is undefined error. I am using FF 3.6.15
Thanks,
Gopal
The submit button is not showing up. It is also not sending me the information to my email address.
function submitForm(containerElement) {
var theForm = document.createElement(“form”);
theForm.action = ‘mailto:iknowmyemailaddressgoeshere’;
theForm.method = “post”;
theForm.innerHTML = document.getElementById(containerElement).outerHTML;
var formToSubmit = document.body.appendChild(theForm);
formToSubmit.submit();
}
Your Name:
Your E-mail:
Phone Number:
Suggested Name for School:
Explanation of suggested name:
Submit
I’m having a tough time. If you could look at my code I would appreciate it. Thanks.
Hi All,
The reason for above code not working in firefox is, firefox doesn’t support
document.getElementById(containerElement).outerHTML even though it supports for .innerHTML. Therefore we can meke this working like this,
instead of document.getElementById(containerElement).outerHTML
you can write
theForm.innerHTML = getOuterHTML(document.getElementById(containerElement));
function getOuterHTML(object) {
var element;
if (!object) return null;
element = document.createElement(“div”);
element.appendChild(object.cloneNode(true));
return element.innerHTML;
}
Have Fun!
-Dilip Nilanka
Hi ,
Thanks for your solution!
there’s just one hint for your code :
Submit
you missed the ending ‘ ” ‘
Submit”
bye
How do you get the feedback sent to a mailbox (email address) instead?
By plain html forms or ootb sharepoint forms it’s not possible. You have to have a special form handler on server. Otherwise it would be too open for spamming. Otherwise you could achieve sending form results to email in prior versions of SharePoint/FrontPage by creating forms and form actions
This below code does not support in IE7 , Its support to higher version than IE7 . When we put vaue to search in textbox and directly press enter its not working but its works when I click to submit button
function submitForm(containerElement) {
var theForm = document.createElement(“form”);
theForm.action = ‘mailto:iknowmyemailaddressgoeshere’;
theForm.method = “post”;
theForm.innerHTML = document.getElementById(containerElement).outerHTML;
var formToSubmit = document.body.appendChild(theForm);
formToSubmit.submit();
}
Please suggest me how its works in IE 7
Glad you find it useful
I hope you'll find just how much power is hidden under the hood of SharePoint 
Hi, Alex! Sorry for waiting for the reply. Basically this part of the code coppies the values to the formToSubmit. What the script above does is that it makes a duplicate form under the variable of formToSubmit. This duplicate form is outside of the SharePoint's original form. Because it is a duplicate, the document.getElementsByName returns two elements: document.getElementsByName('name')[0] references the original field (in SharePoint) the document.getElementsByName('name')[1] the duplicate of the field in the formToSubmit object which is a form. Hope I didn't complicate too much with the answer.
Glad you liked it. Kind of making form inside of form. You're basically copying the "form" outside of the SharePoint's form and submitting a copy. This happens fast enough for user not to feel the difference.