Create wizard using accordion in EJ2 JavaScript Accordion control
2 May 202319 minutes to read
Accordion items can be disabled dynamically by passing the index and boolean value with the enableItem method and also dynamically expand the item using expandItem method.
The below Wizard sample is designed for Online Shopping model. In this, each Accordion item is integrated with required components to fill
the details and designed for getting user details and making payment at the end. Each field is provided with validation for all mandatory
option to enable/disable to next Accordion. In below sample, accordion items can be disabled dynamically with enableItem method using created event.
ej.base.enableRipple(true);
var success = 'Your payment successfully processed';
var email_alert = 'Enter valid email address';
var mobile_alert = 'Mobile number length should be 10';
var card_alert = 'Card number length should be 16';
var cvv_alert = 'CVV number length should be 3';
var mobile = new ej.inputs.NumericTextBox({
placeholder: 'Mobile',
floatLabelType: 'Auto',
format: '0',
showSpinButton: false
});
mobile.appendTo('#mobile');
var cardNum = new ej.inputs.NumericTextBox({
placeholder: 'Card No',
floatLabelType: 'Auto',
format: '0',
showSpinButton: false
});
cardNum.appendTo('#cardNo');
var datepicker = new ej.calendars.DatePicker({
width: '100%',
format: 'MM/yyyy',
floatLabelType: 'Auto',
placeholder: 'Expiry Date'
});
datepicker.appendTo('#expiry');
var cvv = new ej.inputs.NumericTextBox({
placeholder: 'CVV',
floatLabelType: 'Auto',
format: '0',
showSpinButton: false
});
cvv.appendTo('#CVV');
var alertDialog = new ej.popups.Dialog({
header: 'Alert',
width: 200,
isModal: true,
content: '',
target: document.body,
buttons: [{
buttonModel: { content: 'Ok', isPrimary: true },
click: (() => {
alertDialog.hide();
if (acrdnObj.expandedIndices[0] === 2 && alertDialog.content === success) {
acrdnObj.enableItem(0, true);
acrdnObj.enableItem(1, false);
acrdnObj.enableItem(2, false);
acrdnObj.expandItem(true, 0);
}
})
}]
});
alertDialog.appendTo('#alertDialog');
alertDialog.hide();
var acrdnObj = new ej.navigations.Accordion({
expanding: expand,
created: () => {
},
items: [
{ header: 'Sign In', content: '#Sign_In_Form', expanded: true },
{ header: 'Delivery Address', content: '#Address_Fill' },
{ header: 'Card Details', content: '#Card_Fill' },
]
});
acrdnObj.appendTo('#element');
function checkMail(mail) {
if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(mail)) {
return (true);
} else {
alertDialog.content = email_alert;
alertDialog.show();
return (false);
}
}
function checkMobile(mobile) {
if (mobile.match(/^\d{10}$/)) {
return (true);
} else {
alertDialog.content = mobile_alert;
alertDialog.show();
return (false);
}
}
function checkCardNo(cardNo) {
if (cardNo.match(/^\d{16}$/)) {
return (true);
} else {
alertDialog.content = card_alert;
alertDialog.show();
return (false);
}
}
function checkCVV(cvv) {
if (cvv.match(/^\d{3}$/)) {
return (true);
} else {
alertDialog.content = cvv_alert;
alertDialog.show();
return (false);
}
}
function expand(e) {
if (e.name === 'expanding' && [].indexOf.call(this.items, e.item) === 0) {
document.getElementById('Continue_Btn').onclick = (e) => {
var email = document.getElementById('email');
var password = document.getElementById('password');
if (email.value !== '' && password.value !== '') {
if (checkMail(email.value)) {
email.value = password.value = '';
acrdnObj.enableItem(1, true);
acrdnObj.enableItem(0, false);
acrdnObj.expandItem(true, 1);
}
document.getElementById('err1').classList.remove('show');
} else {
document.getElementById('err1').classList.add('show');
}
};
} else if (e.name === 'expanding' && [].indexOf.call(this.items, e.item) === 1) {
document.getElementById('Continue_BtnAdr').onclick = (e) => {
var name = document.getElementById('name');
var address = document.getElementById('address');
var mobile = document.getElementById('mobile');
if ((name.value !== '') && (address.value !== '') && (mobile.value !== '')) {
if (checkMobile(mobile.value)) {
acrdnObj.enableItem(2, true);
acrdnObj.enableItem(1, false);
acrdnObj.expandItem(true, 2);
}
document.getElementById('err2').classList.remove('show');
} else {
document.getElementById('err2').classList.add('show');
}
};
} else if (e.name === 'expanding' && [].indexOf.call(this.items, e.item) === 2) {
document.getElementById('Back_Btn').onclick = (e) => {
acrdnObj.enableItem(1, true);
acrdnObj.enableItem(2, false);
acrdnObj.expandItem(true, 1);
};
document.getElementById('Save_Btn').onclick = (e) => {
var cardHolder = document.getElementById('cardHolder');
var expiry = document.getElementById('expiry');
var cardNo = document.getElementById('cardNo');
var cvv = document.getElementById('CVV');
if ((cardNo.value !== '') && (cardHolder.value !== '') && (expiry.value !== '') && (cvv.value !== '')) {
if (checkCardNo(cardNo.value)) {
if (checkCVV(cvv.value)) {
alertDialog.content = success;
alertDialog.show();
}
}
document.getElementById('err3').classList.remove('show');
} else {
document.getElementById('err3').classList.add('show');
}
};
}
}<!DOCTYPE html><html lang="en"><head>
<title>Essential JS 2 Accordion</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript Toolbar Controls">
<meta name="author" content="Syncfusion">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/25.1.35/material.css" rel="stylesheet">
<link href="index.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<div class="template_title"> Online Shopping Payment Module</div>
<div id="element"></div>
<div id="result"></div>
</div>
<div id="Sign_In_Form" style="display: none; padding: 3px 0">
<form id="formId">
<div class="form-group">
<div class="e-float-input">
<input type="text" id="email" name="Email" required="">
<span class="e-float-line"></span>
<label class="e-float-text" for="email">Email</label>
</div>
<div class="e-float-input">
<input class="e-input" id="password" type="password" name="Password" required="">
<span class="e-float-line"></span>
<label class="e-float-text" for="password">Password</label>
</div>
</div>
</form>
<div style="text-align: center">
<button class="e-btn" id="Continue_Btn">Continue</button>
<div id="err1">* Please fill all fields</div>
</div>
</div>
<div id="Address_Fill" style="display: none; padding: 3px 0">
<form id="formId_Address">
<div class="form-group">
<div class="e-float-input">
<input type="text" id="name" name="Name" required="">
<span class="e-float-line"></span>
<label class="e-float-text" for="name">Name</label>
</div>
</div>
<div class="form-group">
<div class="e-float-input">
<input type="text" id="address" name="Address" required="">
<span class="e-float-line"></span>
<label class="e-float-text" for="address">Address</label>
</div>
</div>
<div class="form-group">
<input type="text" id="mobile">
</div>
</form>
<div style="text-align: center">
<button class="e-btn" id="Continue_BtnAdr">Continue</button>
<div id="err2">* Please fill all fields</div>
</div>
</div>
<div id="Card_Fill" style="display: none; padding: 3px 0;">
<div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
<div class="form-group">
<input type="text" id="cardNo">
</div>
</div>
<div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
<div class="form-group">
<div class="e-float-input">
<input type="text" id="cardHolder" name="cardHolder" required="">
<span class="e-float-line"></span>
<label class="e-float-text" for="cardHolder">CardHolder Name</label>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
<input id="expiry">
</div>
<div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
<div class="form-group">
<input type="text" id="CVV">
</div>
</div>
<div style="text-align: center">
<button class="e-btn" id="Back_Btn">Back</button>
<button class="e-btn" id="Save_Btn">Save</button>
<div id="err3">* Please fill all fields</div>
</div>
</div>
<div id="alertDialog"></div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>