Add Items to List using ECMA/Javascript Client Object Model and Content Editor Webpart

Thanks a lot to sharepointtrac.wordpress.com explained step by step to add item to list in sharepoint using Javascript client object model.

Reference:

http://sharepointtrac.wordpress.com/2013/10/11/create-contact-form-using-ecmascriptjavascript-client-object-model-sharepoint-2010/

Create Contact form Using Ecmascript\Javascript Client Object model – SharePoint 2010

 

In continuation with my previous post about How to create Contact Forms in SharePoint 2010 here is the second option to create a Contact Us form using Content Editor Webpart with JavaScript and Ecmascript.
Resulting Form -

In the above Contact Us form when user Clicks on “Send” button a new item is created in “Contact Us” list using Ecmascript.
For Testing paste the below in content editor webpart and change the Contact Us list Name.

 
<script type=”text/ecmascript”>

function SendEnquiry()
{
var NameField = document.getElementById(“Name”);
var companyField = document.getElementById(“Company”);
var emailField = document.getElementById(“email”);
var enquiryField = document.getElementById(“Enquiry”);
SaveInContactUs(NameField.value,companyField.value,enquiryField.value);
}
function SaveInContactUs(Name,Company,Enquiry)
{
var context = new SP.ClientContext.get_current();
var web = context.get_web();
var list = web.get_lists().getByTitle(‘Contact Us’);
var listItemCreationInfo = new SP.ListItemCreationInformation();
var newItem = list.addItem(listItemCreationInfo);
newItem.set_item(‘Title’, ‘Enq’);
newItem.set_item(‘Name’,Name);
newItem.set_item(‘Company’,Company);
newItem.set_item(‘Enquiry’,Enquiry);
newItem.update();
context.executeQueryAsync(Function.createDelegate(this, this.success), Function.createDelegate(this, this.failed));
}
function success() {
alert(‘Added!’); }
function failed(sender, args) {
alert(‘failed. Message:’ + args.get_message()); }
</script>
​​<table><tbody>
<tr><td>Name</td>
<td><input type=”text” id=”Name” name=”Name”/></td>
</tr>
<tr><td>Company</td>
<td><input type=”text” id=”Company” name=”Company”/></td>
</tr>
<tr><td>E-mail</td>
<td><input type=”text” id=”email” name=”E-mail”/></td>
</tr>
<tr><td>Enquiry</td>
<td><input type=”text” id=”Enquiry” name=”Enquiry”/></td>
</tr>
<tr><td><input type=”submit” onclick=”Javascript:SendEnquiry();” value=”Send”/></td></tr>
</tbody></table>

Once done you can fill-up the Form  and click Send and check the Contact Us list for details.
Make sure you have a Contact Us list created in your Site with the columns {Name, Company,email,Enquiry} used in this example.​​​​​​​​​​​​​​
Article from: http://www.learningsharepoint.com/2011/10/03/create-contact-form-using-ecmascriptjavascript-client-object-model-sharepoint-2010/