Add record into SharePoint List using JavaScript

Add record into SharePoint List using JavaScript


HTML Control
  <div>
        <table>
        <tr>
            <td colspan="2" >
                <label style="width: 200px; height: 50px; font-size: large; font: bold;">Customer Details</label>
            </td>
        </tr>
            <tr>
                <td>
                    <label for="txtFirstName">First Name</label>
                </td>
                <td>
                    <input id="txtFirstName" type="text" name="txtFirstName" />
                </td>

            </tr>
            <tr>
                <td>
                    <label for="txtLastName">Last Name</label>
                </td>
                <td>
                    <input id="txtLastName" type="text" name="txtLastName" />
                </td>

            </tr>
            <tr>
                <td>
                    <label for="txtoccupation">Occupation:</label>
                </td>
                <td>
                    <input id="txtoccupation" type="text" name="txtoccupation" />
                </td>

            </tr>
            <tr>
                <td>
                    <label for="txtlocation">Location:</label>
                </td>
                <td>
                    <input id="txtlocation" type="text" name="txtlocation" />
                </td>

            </tr>
            <tr>
                <td>
                    <label for="ddlCountry">Country:</label>
                </td>
                <td>
                    <select id="ddlCountry" name="ddlCountry">
                        <option value="0" selected>Select</option>
                        <option value="India">India</option>
                        <option value="USA">USA</option>
                        <option value="UK">UK</option>
                        <option value="SA">SA</option>
                    </select>
                </td>

            </tr>


            <tr>
                <td>
                    <label for="txtComments">Comments:</label>
                </td>
                <td>
                    <textarea id="txtComments" name="txtComments" cols="40" rows="5"></textarea>
                </td>

            </tr>

            <tr>
                <td>
                    <input id="btnsumbit" type="submit" value="Add" />
                </td>
                <td>
                   <input id="btnCancel" type="submit" value="Cancel" onclick="" />
                </td>
            </tr>

        </table>

    </div>


JS File:-

var clientcontext;
var hostWebUrl;
var appWebUrl;
var AddCustomerID = 0;


$(document).ready(function () {
    hostWebUrl = decodeURIComponent(manageQueryStringParameter('SPHostUrl'));
    appWebUrl = decodeURIComponent(manageQueryStringParameter('SPAppWebUrl'));
    //Add method
    $("#btnsumbit").click(function () {
        AddItemsToList();
    });
   
});


//This function is used to get the hostweb url
function manageQueryStringParameter(paramToRetrieve) {
    var params =
    document.URL.split("?")[1].split("&");
    var strParams = "";
    for (var i = 0; i < params.length; i = i + 1) {
        var singleParam = params[i].split("=");
        if (singleParam[0] == paramToRetrieve) {
            return singleParam[1];
        }
    }
}


//Add List Item to SP host web
function AddItemsToList() {
    var ctx = new SP.ClientContext(appWebUrl);//Get the SharePoint Context object based upon the URL
    var appCtxSite = new SP.AppContextSite(ctx, hostWebUrl);
    var web = appCtxSite.get_web(); //Get the Site  
    var list = web.get_lists().getByTitle("Customer"); //Get the List based upon the Title
    var listCreationInformation = new SP.ListItemCreationInformation(); //Object for creating Item in the List
    var listItem = list.addItem(listCreationInformation);
    listItem.set_item("Title", $("#txtFirstName").val());
    listItem.set_item("FirstName", $("#txtFirstName").val());
    listItem.set_item("LastName", $("#txtLastName").val());
    listItem.set_item("Occupation", $("#txtoccupation").val());
    listItem.set_item("Location", $("#txtlocation").val());
    listItem.set_item("Country", $("#ddlCountry").val());
    //var selectedText = $("#ddlCountry").find("option:selected").text(); Mango
    //var selectedValue = $("#ddlCountry").val();  1
    listItem.set_item("Comments", $("#txtComments").val());
    listItem.update(); //Update the List Item
    //AddCustomerID = listItem.get_id();
    ctx.load(listItem);
    //Execute the batch Asynchronously
    ctx.executeQueryAsync(
    Function.createDelegate(this, success),
    Function.createDelegate(this, fail)
    );
}

function success() {
    //alert("Item added successfully");
    //alert('Item added successfully: ' + AddCustomerID);
    $("#divSubmitMessage").html("<div style= 'color:green'>Record has been submitted</div>");
    ClearFields();
}

function fail(sender, args) {
    //alert('Failed to get user name. Error:' + args.get_message());
    alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}


function ClearFields() {
    $('#txtFirstName').val('');
    $('#txtLastName').val('');
    $('#txtoccupation').val('');
    $('#txtlocation').val('');
    $('#ddlCountry').prop('selectedIndex', 0);  
    $('#txtComments').val('');
}