Add List Item in SharePoint List Using JavaScript

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> 