Search results

Submit name and value in form in JavaScript Switch control

16 Sep 2021 / 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
Copied to clipboard
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');
Copied to clipboard
<!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/ej2-base/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/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>
Copied to clipboard
#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;
}