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('');
}
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('');
}
ReplyDeleteraavana
रावण