Hello Friends, in this tutorial we are going to implement Multi Level Cascading Dropdown in SharePoint Online custom Bootstrap form using REST api.
Multi Level Cascading Dropdown in SharePoint Online using REST
We have one list for City which has only one column named Title.
We have one list for State which has only one column named Title
We have one master list for all (Country, state and City) in which we are storing country values in Title field, State is a lookup field in which data is coming from State list, City is also a lookup column in which data is coming from City list.
We have one custom bootstrap form in which we have 3 dropdowns which are Multi Level Cascading Dropdown, Country, State and City.
Html code:
<html>
<head>
<title>Contact Form Tutorial by Bootstrapious.com</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="../CustomCode/referenceFiles/bootstrap.min.css" rel="stylesheet">
<link href='../CustomCode/referenceFiles/googleFonts.css' rel='stylesheet' type='text/css'>
<link href="../CustomCode/css/CustomCSS.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2" id="form-body">
<div id="main-form" role="form">
<div class="messages"></div>
<div class="controls">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="form_name">Firstname *</label>
<input id="form_name" type="text" name="name" class="form-control" placeholder="Please enter your firstname *">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="form_lastname">Lastname *</label>
<input id="form_lastname" type="text" name="surname" class="form-control" placeholder="Please enter your lastname *">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="form_email">Email *</label>
<input id="form_email" type="email" name="email" class="form-control" placeholder="Please enter your email *">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="form_phone">Phone</label>
<input id="form_phone" type="tel" name="phone" class="form-control" placeholder="Please enter your phone">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="form_country">Country</label>
<select class="form-control" id="form_country">
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="form_state">State</label>
<select class="form-control" id="form_state">
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="form_city">City</label>
<select class="form-control" id="form_city">
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="form_address">Address *</label>
<textarea id="form_address" name="address" class="form-control" rows="4"></textarea>
</div>
</div>
<div class="col-md-12">
<input type="button" class="btn btn-success btn-send" value="Submit">
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="text-muted"><strong>*</strong> These fields are required.</p>
</div>
</div>
</div>
</div>
</div>
<!-- /.8 -->
</div>
<!-- /.row-->
</div>
<!-- /.container-->
<script src="../CustomCode/referenceFiles/jquery.min.js"></script>
<script src="../CustomCode/referenceFiles/bootstrap.min.js"></script>
<script src="../CustomCode/js/CustomJS.js"></script>
<!--<script src="validator.js"></script>
<script src="contact.js"></script>-->
</body>
</html>This will look like
SharePoint Bootstap form[/caption]When user selects Country, it will populate only those states which belongs to selected countris, when user select perticular state, it will populate only those cities which belongs to selected state.
here is the REST javascript file for Multi Level Cascading Dropdown:
$(document).ready(function() {
appendCountries();
$('#form_country').change(function() {
appendStates();
});
$('#form_state').change(function() {
appendCity();
});
$('.btn').click(function() {
AddListItem();
});
});
function appendCountries() {
$.ajax({
url: "../_vti_bin/ListData.svc/CountryStateCity()?$orderby= Title asc&$select=Title",
type: "get",
headers: {
"Accept": "application/json;odata=verbose"
},
success: function(data) {
var values = [];
var uniqueValues = [];
var option = "";
var valuesArray = data.d.results;
$.each(valuesArray, function(i, result) {
values.push(result.Title);
});
$.each(values, function(i, el) {
if ($.inArray(el, uniqueValues) === -1) {
uniqueValues.push(el);
option += "";
}
});
$("#form_country").append(option);
},
error: function(data) {
alert(data.responseJSON.error);
}
});
}
function appendStates() {
var country = $('#form_country').val();
$.ajax({
url: "../_vti_bin/ListData.svc/CountryStateCity()?$select=State&$filter=Title eq '" + country + "'&$expand=State&$orderby= State/Title asc",
type: "get",
headers: {
"Accept": "application/json;odata=verbose"
},
success: function(data) {
var values = [];
var uniqueValues = [];
var option = "";
var valuesArray = data.d.results;
$.each(valuesArray, function(i, result) {
values.push(result.State.Title);
});
$.each(values, function(i, el) {
if ($.inArray(el, uniqueValues) === -1) {
uniqueValues.push(el);
option += "";
}
});
$("#form_state").empty();
$("#form_state").append(option);
},
error: function(data) {
alert(data.responseJSON.error);
}
});
}
function appendCity() {
var state = $('#form_state').val();
$.ajax({
url: "../_vti_bin/ListData.svc/CountryStateCity()?$select=City&$filter=State/Title eq '" + state + "'&$expand=State,City&$orderby= City/Title asc",
type: "get",
headers: {
"Accept": "application/json;odata=verbose"
},
success: function(data) {
var values = [];
var uniqueValues = [];
var option = "";
var valuesArray = data.d.results;
$.each(valuesArray, function(i, result) {
values.push(result.City.Title);
});
$.each(values, function(i, el) {
if ($.inArray(el, uniqueValues) === -1) {
uniqueValues.push(el);
option += "";
}
});
$("#form_city").empty();
$("#form_city").append(option);
},
error: function(data) {
alert(data.responseJSON.error);
}
});
}
function AddListItem()
{
var firstName = $("#form_name").val();
var lastName = $("#form_lastname").val();
var email = $("#form_email");
var phone = $('#form_phone');
var country = $('#form_country');
var state = $('#form_state');
var city = $('#form_city');
var address = $('#form_address');
$.ajax({
url: _spPageContextInfo.webAbsoluteUrl + "../_vti_bin/ListData.svc/EmployeeDetails()",
type: "POST",
data: JSON.stringify({
__metadata:
{
type: "SP.Data.TestListItem"
},
FirstName: firstName,
Lastname: lastName,
Email: email,
Phone: phone,
Country: country,
State: state,
City: city,
Address: address
}),
headers:
{
"Accept": "application/json;odata=verbose",
"Content-Type": "application/json;odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val(),
"X-HTTP-Method": "POST"
},
success: function(data, status, xhr)
{
alert('Request has been submitted successfully');
},
error: function(xhr, status, error)
{
//console.log(data.responseJSON.error);
alert('Error');
}
});
}You can download full code here: Download or use mediafire link or user Google Drive link.
0 Comments