Click Event to Create a New Item Using ECMAScript

Hello Everyone!

In our projects sometimes a client comes up with a requirement such as:

  1. I need a new item created on a button click
  2. I need the total number of hits if I click on a button.
  3. Many more requirements on a button click

So what normally we will do is use Visual Studio to create a page with an asp button and write our code to work as per our requirements, thereby requiring a lot of time to develop.

Here I will show you a very easy process to use a button click event using JavaScript.

Take a page, or take a form. Add a content editor to the page and paste in the following code.

  1. <script language=“ecmascript” type=“text/ecmascript”>  
  3. var clientContext = null;  
  4. var oWeb = null;  
  5. var oListColl = null;  
  6. var oList = null;  
  7. var oListItem = null;  
  8. var listItemCreationInfo = null

The following code is for creating a new item, you can use it for any update on the click event by modifying the code below.

  1. function createListItem() {  
  2. clientContext = new SP.ClientContext.get_current();  
  3. oWeb = clientContext.get_web();  
  4. oListColl = oWeb.get_lists();  
  5. oList = oListColl.getByTitle(‘TestList’);  
  6. listItemCreationInfo = new SP.ListItemCreationInformation();  
  7. oListItem = oList.addItem(listItemCreationInfo);  
  8. oListItem.set_item(‘Title’‘New Item’);  
  9. oListItem.update();  
  10. clientContext.load(oListItem);  
  11. clientContext.executeQueryAsync(Function.createDelegate(thisthis.onQuerySucceeded), Function.createDelegate(thisthis.onQueryFailed));  
  12. }  
  14. function onQuerySucceeded() {  
  16. alert(oListItem.get_title() + ‘ item is created successfully.’);  
  17. }  
  19. function onQueryFailed(sender, args) {  
  20. alert(‘Request failed. ‘ + args.get_message() + ‘\n’ + args.get_stackTrace());  

The following line of code is for placing the button:

  1. </script>  
  2. <input id=“btnCreateListItem” onclick=“createListItem()” type=“button” value=“Create List Item”/> 

Keep learning, Cheers.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s