Form submit in EJ2 JavaScript List box control
2 May 20233 minutes to read
In the following code snippet, the value that is in selected state will be sent on form submit.
// define the array of object
var data = [
{ text: 'Hennessey Venom' },
{ text: 'Bugatti Chiron' },
{ text: 'Koenigsegg CCR' },
{ text: 'McLaren F1' },
{ text: 'Aston Martin One- 77' },
{ text: 'Jaguar XJ220' },
{ text: 'McLaren P1' },
{ text: 'Ferrari LaFerrari' }
];
// initialize ListBox component
var listObj = new ej.dropdowns.ListBox({
//set the data to dataSource property
dataSource: data
});
listObj.appendTo('#listbox');
var buttonObj = new ej.buttons.Button({
isPrimary: true,
content: 'Submit'
});
buttonObj.appendTo('#btnElement');
<!DOCTYPE html><html lang="en"><head>
<title>Essential JS 2 ListBox</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="styles.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-base/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-dropdowns/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-buttons/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/23.1.36/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" style="margin:0 auto; width:250px;">
<form>
<!--element which is going to render the ListBox-->
<input id="listbox">
<button id="btnElement"></button>
</form>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>