Name and value in form submit in Vue Radio button component

11 Jun 20243 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 RadioButton value will not be sent to the server on form submit.

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

<template>
<form>
<ul>
<li> <ejs-radiobutton label="Credit/Debit Card" name="payment" value="credit/debit" checked="true"></ejs-radiobutton></li>
<li> <ejs-radiobutton label="Net Banking" name="payment" value="netbanking"></ejs-radiobutton></li>
<li> <ejs-radiobutton label="Cash on Delivery" name="payment" value="cashondelivery"></ejs-radiobutton></li>
<li> <ejs-radiobutton label="Others" name="payment" value="payment"></ejs-radiobutton></li>
<li> <ejs-button isPrimary="true" >Submit</ejs-button></li>
</ul>
</form>
</template>

<script setup>

import { RadioButtonComponent as EjsRadiobutton, ButtonComponent as EjsButton } from '@syncfusion/ej2-vue-buttons';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
</script>

<style>
  @import '../node_modules/@syncfusion/ej2-base/styles/material.css';
  @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';

.e-radio-wrapper {
  margin-top: 18px;
}

button {
  margin: 20px 0 0 5px;
}

li {
  list-style: none;
}
</style>
<template>
<form>
<ul>
<li> <ejs-radiobutton label="Credit/Debit Card" name="payment" value="credit/debit" checked="true"></ejs-radiobutton></li>
<li> <ejs-radiobutton label="Net Banking" name="payment" value="netbanking"></ejs-radiobutton></li>
<li> <ejs-radiobutton label="Cash on Delivery" name="payment" value="cashondelivery"></ejs-radiobutton></li>
<li> <ejs-radiobutton label="Others" name="payment" value="payment"></ejs-radiobutton></li>
<li> <ejs-button isPrimary="true" >Submit</ejs-button></li>
</ul>
</form>
</template>

<script>

import { RadioButtonComponent, ButtonComponent } from '@syncfusion/ej2-vue-buttons';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);
export default {
name: "App",
components: {
"ejs-radiobutton":RadioButtonComponent,
"ejs-button":ButtonComponent
}
}
</script>

<style>
  @import '../node_modules/@syncfusion/ej2-base/styles/material.css';
  @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';

.e-radio-wrapper {
  margin-top: 18px;
}

button {
  margin: 20px 0 0 5px;
}

li {
  list-style: none;
}
</style>