Группа кнопок, не разрешающая публикацию формы - PullRequest
Новая
       92

Группа кнопок, не разрешающая публикацию формы

0 голосов
/ 10 июля 2020

У меня есть выбор переключателей в форме, однако я использую их как группу кнопок. Однако я хочу передать выбранное значение обратно в контроллер. Но он вообще не отправляет обратно, он просто сидит там по какой-либо причине, по которой группа btn заставит форму вести себя таким образом. 

@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>
    }

Я включил скрипку. net для нее в качестве срока действия того же ситуация там форма просто не будет публиковаться.

https://dotnetfiddle.net/FMiprT

Ответы [ 2 ]

2 голосов
/ 10 июля 2020

Внешний div группы кнопок: 

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

кажется избыточным, но он также предотвращает срабатывание события нажатия кнопки «отправить» (см. https://getbootstrap.com/docs/4.0/components/buttons/#toggle -состояния подробнее). Вам не нужно переводить кнопку отправки в режим переключения, это нужно только переключателям - и у вас уже есть еще один div для этого.

Просто удалите этот div, и кнопка снова заработает.

Демо: https://dotnetfiddle.net/qeRX9I

0 голосов
/ 13 июля 2020

Согласитесь с ADyson, похоже, проблема связана с div внешней группы кнопок. После его удаления мы могли бы отправить форму.

Если вы не хотите удалять внешнюю группу кнопок div, в качестве временного решения, вы можете использовать метод JQuery для отправки формы.

код вроде этого: 

@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 код: 

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