Submit name and value in form in JavaScript Switch control

17 Mar 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

app.ts

index.html

styles.css

import { Switch, Button } from '@syncfusion/ej2-buttons';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

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

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

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

let button: Button = new 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/20.4.48/ej2-base/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="styles.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'>
        <form>
            <table class='size'>
                <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>
            </table>
        </form>
    </div>
</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;
}