Add List Item in SharePoint List Using JavaScript

Look at the following procedure.

Step 1

Create a Web Part using Visual Studio 2013.



Step 2

Open the ascx (MyFirstWebPartUserControl.ascx) and design your UI. Here I have created Employee details information.



The following  is the design part of the code:

<div>
    <table cellpadding="10">
        <tr>
            <td colspan="2" align="center">
                <label style="width: 200px; height: 50px; font-size: large; font: bold;">Employee Details</label>
            </td>
        </tr>
        <tr>
            <td>
                <label style="width: 100px; height: 50px; font-size: large; font: bold;">Employee ID</label>
            </td>
            <td>
                <input type="text" id="txtEmployeeId" style="width: 100px;" />
            </td>
        </tr>
        <tr>
            <td>
                <label style="width: 100px; height: 50px; font-size: large; font: bold;">First Name</label></td>
            <td>
                <input type="text" id="txtFirstName" style="width: 100px;" /></td>
        </tr>
        <tr>
            <td>
                <label style="width: 100px; height: 50px; font-size: large; font: bold;">Last Name</label></td>
            <td>
                <input type="text" id="txtLastName" style="width: 100px;" /></td>
        </tr>
        <tr>
            <td>
                <label style="width: 100px; height: 50px; font-size: large; font: bold;">State</label></td>
            <td>
                <input type="text" id="txtState" style="width: 100px;" /></td>
        </tr>
        <tr>
            <td>
                <label style="width: 100px; height: 50px; font-size: large; font: bold;">City</label></td>
            <td>
                <input type="text" id="txtCity" style="width: 100px;" /></td>
        </tr>
        <tr>
            <td>
                <input type="button" id="btnSave" value="Save" onclick="createListItem();" />

            </td>
            <td>
                <input type="button" id="btnCancel" value="Cancel" onclick="ClearFields();" />
            </td>
        </tr>
    </table>

</div>

The following  is the JavaScript Code:

<script type="text/javascript">
    var siteUrl = 'http://ils-jacobr:35526';

    function createListItem() {
        var empId = document.getElementById('txtEmployeeId').value;
        var firstName = document.getElementById('txtFirstName').value;
        var lastName = document.getElementById('txtLastName').value;
        var state = document.getElementById('txtState').value;
        var city = document.getElementById('txtCity').value;
        var clientContext = new SP.ClientContext(siteUrl);
        var oList = clientContext.get_web().get_lists().getByTitle('EmployeeDetails');
        var itemCreateInfo = new SP.ListItemCreationInformation();
        this.oListItem = oList.addItem(itemCreateInfo);
        oListItem.set_item('EmployeeID', empId);
        oListItem.set_item('FirstName', firstName);
        oListItem.set_item('LastName', lastName);
        oListItem.set_item('City', city);
        oListItem.set_item('State', state);
        oListItem.update();
        clientContext.load(oListItem);
        clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
    }

    function onQuerySucceeded() {

        alert('Item created Successfully !!!!');
        document.getElementById('txtCity').value = "";
        document.getElementById('txtEmployeeId').value = "";
        document.getElementById('txtFirstName').value = "";
        document.getElementById('txtLastName').value = "";
        document.getElementById('txtState').value = "";
    }

    function onQueryFailed(sender, args) {

        alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
    }
    function ClearFields() {
        document.getElementById('txtCity').value = "";
        document.getElementById('txtEmployeeId').value = "";
        document.getElementById('txtFirstName').value = "";
        document.getElementById('txtLastName').value = "";
        document.getElementById('txtState').value = "";
    }
</script>

Step 3

Build and deploy your the solution.



Step 4

Go to your SharePoint site and create one page under site pages. Add your web part to that page.



Step 5

Enter the Employee details and click the Save button.





Step 6

Go to your List and the item will display.



Summary

This article showed how programmatically add a list item to a SharePoint List using JavaScript.