不允许发布表单的按钮组

Question

I have a choice of radio buttons in a form however I am using them as button group. However I want to pass the value selected back to the controller. But its not posting back at all it just sits there any reason why a btn group would make a form behave in this way.

@using (Html.BeginForm("Create", "Relationships", FormMethod.Post, null)) { 

    <div class="btn-group" data-toggle="buttons">

        <div class="btn-group type-select pull-left top-buffer add-on btn-group-lg" data-toggle="buttons">
            <label class="btn btn-primary">
                <input type="radio" name="RealtionShipType" data-relationshiptype="1" style="display:none" value="1">
                <i class="fa fa-person-booth fa-4x"></i>
            </label>

            <label class="btn btn-primary">
                <input type="radio" name="RealtionShipType" data-relationshiptype="1" value="2">
                <i class="fa fa-ship fa-4x"></i>
            </label>
            <label class="btn btn-primary">
                <input type="radio" name="RealtionShipType" Value="3">
                <i class="fa fa-location-arrow fa-4x"></i>
            </label>
            <label class="btn btn-primary">
                <input type="radio" name="RealtionShipType" data-relationshiptype="1" value="4">
                <i class="fa fa-brain fa-4x"></i>
            </label>
            <label class="btn btn-primary">
                <input type="radio" name="RealtionShipType" data-relationshiptype="1" value="5">
                <i class="fa fa-car fa-4x"></i>
            </label>

            <label class="btn btn-primary">
                <input type="radio" name="RealtionShipType" style="display:none" value="5">
                <i class="fa fa-mobile fa-4x"></i>
            </label>

        </div>
        <input type="submit" class="btn-success" value="Save And Edit">


    </div>
    }

I have included a .net fiddle for it as expierence the same situation there the form simply wont post.

https://dotnetfiddle.net/FMiprT

Answer 1

The outer button-group div:

<div class="btn-group" data-toggle="buttons">
...
</div>

seems to be redundant, but it is also preventing your "submit" button's click event from firing (see https://getbootstrap.com/docs/4.0/components/buttons/#toggle-states for details). You don't need to put your submit button in toggle mode, only the radio buttons need this - and you already have another div around those to do that.

Just remove that div and the button works again.

Demo: https://dotnetfiddle.net/qeRX9I

Answer 2

Agree with ADyson, it seems that the issue is related to the outer button-group div. After removing it, we could submit the form.

If you don't want to remove the outer button-group div, as a workaround,you could consider use the JQuery method to submit the form.

code like this:

@using (Html.BeginForm("Create", "Home", FormMethod.Post, new { @class="mainform" }))
{

    <div class="btn-group" data-toggle="buttons">

        <div class="btn-group type-select pull-left top-buffer add-on btn-group-lg" data-toggle="buttons">
            ...
        </div>
        <input type="submit" class="btn-success" value="Save And Edit"> 
    </div>
}

JavaScript code:

<script type="text/javascript">
    jQuery(document).ready(function () {
        $(".btn-success").click(function () {
            //find the form and submit
            $(".mainform").submit();
        });
    });
</script>