Submit name and value in form in JavaScript (ES5) Switch control

08 May 2023 / 1 minute 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.

Source

Preview

index.js

index.html

styles.css

ej.base.enableRipple(true);

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

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

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

var button = new ej.buttons.Button({ isPrimary: true });
button.appendTo('#btnElement');

<!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="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/fabric.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="styles.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <form>
            <table class="size">
                <tbody><tr>
                    <td class="lSize">USB</td>
                    <td>
                        <input type="checkbox" id="switch1">
                    </td>
                </tr>
                <tr>
                    <td class="lSize">Wi-Fi</td>
                    <td>
                        <input type="checkbox" id="switch2">
                    </td>
                </tr>
                <tr>
                    <td class="lSize">Bluetooth</td>
                    <td>
                        <input type="checkbox" id="switch3">
                    </td>
                </tr>
                <tr>
                    <td>
                        <button id="btnElement">Submit</button>
                    </td>
                </tr>
            </tbody></table>
        </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>

#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;
}