Submit name and value in form in EJ2 JavaScript Switch control

10 May 20236 minutes to read

The name attribute of the Switch is used to group Switches. When the Switches are grouped in form, the checked items value attribute will post to the server on form submit. The disabled and unchecked Switch values will not be sent to the server on form submit.

In the following code snippet, USB and Wi-Fi in the checked state, and Bluetooth is in disabled state. Values that are in checked state only be sent on form submit.


//Name and Value attribute in form submit.
var switchObj = new ej.buttons.Switch({ name: 'Tethering',  value: 'USB', checked: true });

switchObj = new ej.buttons.Switch({ name: 'Hotspot',  value: 'Wi-Fi', checked: true });

switchObj = new ej.buttons.Switch({ name: 'Tethering',  value: 'Bluetooth', disabled: true });

var button = new ej.buttons.Button({ isPrimary: true });
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Switch</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="" rel="stylesheet">
    <link href="" rel="stylesheet">
    <link href="styles.css" rel="stylesheet">
<script src="" type="text/javascript"></script>
<script src="" type ="text/javascript"></script>

    <div id="container">
            <table class="size">
                    <td class="lSize">USB</td>
                        <input type="checkbox" id="switch1">
                    <td class="lSize">Wi-Fi</td>
                        <input type="checkbox" id="switch2">
                    <td class="lSize">Bluetooth</td>
                        <input type="checkbox" id="switch3">
                        <button id="btnElement">Submit</button>

var ele = document.getElementById('container');
if(ele) { = "visible";
<script src="index.js" type="text/javascript"></script>
#container {
    visibility: hidden;

#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  top: 45%;
  left: 45%;

button {
  margin: 20px 0 0 5px;

.size tr td {
  padding: 10px;

.size .lSize {
  font-family: "Roboto", "Segoe UI", "GeezaPro", "DejaVu Serif", "sans-serif";
  font-size: 13px;

.size .lSize label {
  user-select: none;