You can read the dialog element values by binding the action handler to the footer buttons. The buttons property provides the options to bind events to the action buttons. For detailed information about buttons, refer to the footer section. In the below sample, value of input elements within the dialog has been checked in the footer button click event and send the values as the content of confirmation dialog.
import { enableRipple } from '@syncfusion/ej2-base';
import { Button } from '@syncfusion/ej2-buttons';
import { Dialog } from '@syncfusion/ej2-popups';
let dialogObj: Dialog = new Dialog({
header: 'User details',
content: document.getElementById("dlgContent"),
showCloseIcon: true,
visible: false,
buttons: [{
buttonModel: { isPrimary: true, content: 'Submit' }, click: function() {
createModalDialog();
},
}],
target: document.querySelector('body'),
width: '400px',
animationSettings: { effect: 'Zoom' },
beforeOpen: onBeforeopen
});
dialogObj.appendTo('#dialog');
document.getElementById('openBtn').onclick = (): void => {
dialogObj.show();
};
let modalObj: Dialog;
function createModalDialog() {
dialogObj.hide()
if (!document.getElementById('modalDialog').classList.contains('e-dialog')) {
modalObj = new Dialog({
header: 'User details',
content: getDynamicContent(),
showCloseIcon: true,
isModal: true,
visible: true,
width: '600px',
buttons: [{buttonModel: {isPrimary: true, content: 'Yes'}, click: function() {
this.hide();
}}, {buttonModel: {isPrimary: false, content: 'No'}, click: function() {
this.hide();
dialogObj.show();
}}],
target: document.querySelector('body'),
animationSettings: { effect: 'Zoom' }
});
modalObj.appendTo('#modalDialog');
} else {
modalObj.content = getDynamicContent();
modalObj.show()
}
}
function getDynamicContent(): string {
let input: HTMLInputElement = document.getElementById('dialog').querySelector('#name');
let email: HTMLInputElement = document.getElementById('dialog').querySelector('#email');
let contact: HTMLInputElement = document.getElementById('dialog').querySelector('#contact');
let address: HTMLTextAreaElement = document.getElementById('dialog').querySelector('#address');
let template: string = "<div class='row'><div class='col-xs-6 col-sm-6 col-lg-6 col-md-6'><b>Confirm your details</b></div>" +
"</div><div class='row'><div class='col-xs-6 col-sm-6 col-lg-6 col-md-6'><span id='name'> Name: </span>" +
"</div><div class='col-xs-6 col-sm-6 col-lg-6 col-md-6'><span id='nameValue'>"+ input.value + "</span> </div></div>" +
"<div class='row'><div class='col-xs-6 col-sm-6 col-lg-6 col-md-6'><span id='email'> Email: </span>" +
"</div><div class='col-xs-6 col-sm-6 col-lg-6 col-md-6'><span id='emailValue'>" + email.value +
"</span></div></div><div class='row'><div class='col-xs-6 col-sm-6 col-lg-6 col-md-6'>"+
"<span id='Contact'> Contact number: </span></div><div class='col-xs-6 col-sm-6 col-lg-6 col-md-6'>"+
"<span id='contactValue'>"+ contact.value +" </span></div></div><div class='row'><div class='col-xs-6 col-sm-6 col-lg-6 col-md-6'>"+
"<span id='Address'> Address: </span> </div><div class='col-xs-6 col-sm-6 col-lg-6 col-md-6'><span id='AddressValue'>" + address.value +"</span></div></div>"
return template;
}
function onBeforeopen(): void {
document.getElementById('dlgContent').style.visibility = 'visible';
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 Dialog</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="TypeScript UI Components" />
<meta name="author" content="Syncfusion" />
<link href="styles.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-popups/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container'>
<div id="target">
<center><button id="openBtn" class="e-control e-btn">Open</button></center>
<div id="dialog"></div>
<div id="modalDialog"></div>
<form id="dlgContent" style="visibility: hidden">
<div class='form-group'>
<label for='name'>Name:</label>
<input type='name' value='' class='form-control' id='name'>
</div>
<div class='form-group'>
<label for='email'>Email Id:</label>
<input type='email' value='user@syncfusion.com' class='form-control' id='email'>
</div>
<div class='form-group'>
<label for='contact'>Contact Number:</label>
<input type='contact' class='form-control' id='contact'>
</div>
<div class='form-group'>
<label for='address'>Address:</label>
<textarea class='form-control' rows='5' id='address'></textarea>
</div>
</form>
</div>
</div>
</body>
</html>html,
body,
#container {
height: 100%;
overflow: hidden;
width: 100%;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.row {
padding: 10px 3px;
}