Name and value in form submit in React Radio button component

7 Aug 20233 minutes to read

The name attribute of the RadioButton is used to group RadioButton. When the RadioButton are grouped in form, the checked items value attribute will be post to server on form submit that can be retrieved through the name. The disabled and unchecked RadioButton value will not be sent to the server on form submit.

In the following code snippet, Credit / Debit card is in checked state.Now, the value that is in checked state will be sent on form submit.

app.jsx

import { enableRipple } from '@syncfusion/ej2-base';
import { RadioButtonComponent, ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);
// Name and Value attribute in form submit.
function App() {
    return (<form>
      <ul>
          <li><RadioButtonComponent name="payment" value="credit/debit" label="Credit /Debit card" checked={true}/></li>

          <li><RadioButtonComponent name="payment" value="netbanking" label="Net Banking"/></li>

          <li><RadioButtonComponent name="payment" value="cashondelivery" label="Cash On Delivery"/></li>

          <li><RadioButtonComponent name="payment" value="others" label="Others"/></li>

          <li><ButtonComponent isPrimary={true}>Submit</ButtonComponent></li>
      </ul>
    </form>);
}
export default App;
ReactDom.render(<App />, document.getElementById('radio-button'));

app.tsx

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

enableRipple(true);

// Name and Value attribute in form submit.
function App() {
  return (
    <form>
      <ul>
          <li><RadioButtonComponent name="payment" value="credit/debit" label="Credit /Debit card" checked={true} /></li>

          <li><RadioButtonComponent name="payment" value="netbanking" label="Net Banking" /></li>

          <li><RadioButtonComponent name="payment" value="cashondelivery" label="Cash On Delivery" /></li>

          <li><RadioButtonComponent name="payment" value="others" label="Others" /></li>

          <li><ButtonComponent isPrimary={true}>Submit</ButtonComponent></li>
      </ul>
    </form>
  );
}
export default App;
ReactDom.render(<App />, document.getElementById('radio-button'));