Использование кнопок для установки значений формы (Bootstrap / Bootstrap Studio) - PullRequest
Новая
       44

Использование кнопок для установки значений формы (Bootstrap / Bootstrap Studio)

0 голосов
/ 21 сентября 2018

Вот так выглядит моя форма. По сути, я хочу, чтобы пользователь нажимал «опасный» или «неопасный» и устанавливал для него значение (тип элемента) в Haz или NonHaz. Вот мои проблемы:

  1. Я не уверен, как и где хранить переменную itemtype

  2. Я не уверен, как разрешить выбор только одной кнопки (и я не хочуиспользуйте переключатели) HazNonHaz

1 Ответ

0 голосов
/ 21 сентября 2018

Почему вы не хотите использовать радио-кнопки?потому что радио кнопки являются лучшими для вашего сценария.Если это из-за его внешнего вида, bootstrap имеет плагин для кнопок, который вы можете использовать: https://getbootstrap.com/docs/4.1/components/buttons/#button-plugin

HTML 

<div class="jumbotron jumbotron-fluid">
    <div class="container text-center">
        <h1>
            Is your item considered Hazardous?
        </h1>
        <p class="lead">
            This includes all liquids, batteries and lighters.
        </p>
        <div class="btn-group btn-group-toggle" data-toggle="buttons">
            <label class="btn btn-primary active">
                <input type="radio" name="hazardous-item" value="true" checked />
                Hazardous
            </label>
            <label class="btn btn-primary">
                <input type="radio" name="hazardous-item" value="false" />
                Non Hazardous
            </label>
        </div>
    </div>
</div>

См. Название для переключателя кнопки управления «опасных предметов»,Я не знаю, какой серверный язык вы используете, но это имя может быть легко взято из логической переменной.Вот как и где вы храните переменную.

С помощью плагина кнопки bootstrap, когда вы нажимаете любую из кнопок, он обновляет нижние переключатели, как если бы вы нажимали переключатели.

Для проверки вы можете поместить javascript на своей странице: 

$(function(){
    $('input:radio[name="hazardous-item"]').change(function(){
        console.info($(this).val());
    });
});

Вы можете F12 перейти в инструмент разработчика вашего браузера, чтобы увидеть выбранное значение.

В формеpost-back

Когда вы отправляете форму обратно на сервер, выбранное значение, которое является логическим, будет привязано к переменной, т.е. hazardous-item=true или hazardous-item=false.

Снимок экрана

enter image description here

jsfiddle: http://jsfiddle.net/aq9Laaew/230903/

...