Submit name and value in form in React Switch component

2 Mar 20266 minutes to read

Use the name attribute to group Switches for form submission. When a form containing grouped Switches is submitted, only checked and enabled Switch values are sent to the server. Disabled and unchecked Switches are excluded from form data, allowing conditional data submission based on user selections.

In the following example, USB and Wi-Fi Switches are in the checked state, while Bluetooth is disabled. Only the values of checked Switches will be submitted with the form.

app.jsx

import { enableRipple } from '@syncfusion/ej2-base';
import { ButtonComponent, SwitchComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);

function App() {
    return (<form>
        <div className="switch-control">
            <div>
                <h3>Form Submit</h3>
            </div>
            <div>
                <label htmlFor="switch1" style=> USB </label>
                <SwitchComponent id="switch1" name='Tethering' value='USB' checked={true} />
            </div>
            <div>
                <label htmlFor='switch2' style=> Wi-Fi </label>
                <SwitchComponent id="switch2" name='Hotspot' value='Wi-Fi' checked={true} />
            </div>
            <div>
                <label htmlFor='switch3' style=> Bluetooth </label>
                <SwitchComponent id="switch3" name='Tethering' value='Bluetooth' disabled={true} />
            </div>
            <div>
                <ButtonComponent isPrimary={true}>Submit</ButtonComponent>
            </div>
        </div>
    </form>);
}
export default App;
ReactDom.render(<App />, document.getElementById('switch'));

app.tsx

import { enableRipple } from '@syncfusion/ej2-base';
import { ButtonComponent, SwitchComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);

function App() {
    return (
        <form>
            <div className="switch-control">
                <div>
                    <h3>Form Submit</h3>
                </div>
                <div>
                    <label htmlFor="switch1" style=> USB </label>
                    <SwitchComponent id="switch1" name='Tethering' value='USB' checked={true} />
                </div>
                <div>
                    <label htmlFor='switch2' style=> Wi-Fi </label>
                    <SwitchComponent id="switch2" name='Hotspot' value='Wi-Fi' checked={true} />
                </div>
                <div>
                    <label htmlFor='switch3' style=> Bluetooth </label>
                    <SwitchComponent id="switch3" name='Tethering' value='Bluetooth' disabled={true} />
                </div>
                <div>
                    <ButtonComponent isPrimary={true}>Submit</ButtonComponent>
                </div>
            </div>
        </form>
    );
}
export default App;
ReactDom.render(<App />, document.getElementById('switch'));