Name and value in form submit in EJ2 JavaScript Radio button control

10 May 20234 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.

index.js
index.html
styles.css
ej.base.enableRipple(true);

//Name and Value attribute in form submit.
var radiobutton = new ej.buttons.RadioButton({label: 'Credit/Debit Card', name: 'payment', value: 'credit/debit', checked: true});
radiobutton.appendTo('#radiobutton1');

radiobutton = new ej.buttons.RadioButton({label: 'Net Banking', name: 'payment', value: 'netbanking'});
radiobutton.appendTo('#radiobutton2');

radiobutton = new ej.buttons.RadioButton({label: 'Cash on Delivery', name: 'payment', value: 'cashondelivery'});
radiobutton.appendTo('#radiobutton3');

radiobutton = new ej.buttons.RadioButton({label: 'Others', name: 'payment', value: 'others'});
radiobutton.appendTo('#radiobutton4');

var button = new ej.buttons.Button({ isPrimary: true });
button.appendTo('#btnElement');
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 RadioButton</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="https://cdn.syncfusion.com/ej2/25.1.35/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="styles.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <form>
            <ul>
                <li><input type="radio" id="radiobutton1"></li>
                <li><input type="radio" id="radiobutton2"></li>
                <li><input type="radio" id="radiobutton3"></li>
                <li><input type="radio" id="radiobutton4"></li>
                <li><button id="btnElement">Submit</button></li>
            </ul>
        </form>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  top: 45%;
  left: 45%;
}

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

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

li {
  list-style: none;
}