Form submit in Button Group Control

19 Dec 20221 minute to read

The name attribute of the input element is used to group the radio or checkbox type ButtonGroup. When the radio or checkbox type are grouped in the form, the checked items value attribute will be posted to the server on form submit that can be retrieved through the name. The disabled radio or checkbox type value will not be sent to the server on form submit.

In the following code snippet, the radio type ButtonGroup is explained with male value as checked. Now, the value that is in checked state will be sent on form submit.

@{ IDictionary<string, object> submit = new Dictionary<string, object>();
    submit.Add("type", "submit");
}
<form>
    <div class='e-btn-group'>
        <input type="radio" id="male" name="gender" value="male" />
        <label class="e-btn" for="male">Male</label>
        <input type="radio" id="female" name="gender" value="female" />
        <label class="e-btn" for="female">Female</label>
        <input type="radio" id="transgender" name="gender" value="transgender" />
        <label class="e-btn" for="transgender">Transgender</label>
    </div>
    <ejs-button id="btn" class='e-btn e-primary' htmlAttributes="submit" content="Submit"></ejs-button>
</form>
<script>
    document.getElementById('male').checked = true;
</script>
<style>
    .e-btn-group, button {
        margin: 20px 5px 20px 20px;
    }
</style>

NOTE

View Sample in GitHub.