Как сохранить в БД доступные параметры для типов ввода: выбрать меню, радиокнопку и флажок?

Question

У меня есть форма для создания пользовательских вопросов.Пользователь должен ввести вопрос, а также тип поля (текст, длинный текст, флажок, выбрать меню, переключатель).Если пользователь выбирает один из следующих типов: флажок, выбор меню или переключателя, появляется сообщение div "#availableOptions", чтобы пользователь мог написать параметры для вопросов этого типа.

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

Например, если пользователь создает пользовательский вопрос «Получать уведомления?»и выберите тип вопроса как флажок, появится раздел #availableOptions.И пользователь может написать в первом варианте «Да» и во втором варианте «Нет».

Я сомневаюсь, как хранить в базе данных, что «Да» и «Нет» варианты.Знаете ли вы, как этого можно достичь?И то же самое, когда есть select_menu или radio_btn.

В базе данных в таблице вопросов это выглядит так:

id       question                    conference_id        type
1        Whats your phone?               1                 text
2        Receive notifications?          1                 radio_btn
3       ..............                    1                 checkbox
4       ..............                    1                 long_txt
5       ..............                    1                 select_menu
...

Форма для пользователя создает пользовательский вопрос:

<form method="post" class="clearfix" action="{{route('questions.store', ['conference_id' => $conference->id])}}" enctype="multipart/form-data">
    {{csrf_field()}}
    <div class="form-group">
        <label for="question">Question</label>
        <input type="text" class="form-control" name="question" id="question">
    </div>
    <div class="form-group">
        <label for="type">Type of field</label>
        <select class="form-control" name="type" id="customQuestionType">
            <option value="text">Text</option>
            <option value="long_text">Long Text</option>
            <option value="checkbox">Checkbox</option>
            <option  value="radio_btn">Radio Button</option>
            <option  value="select_menu">Select menu</option>
        </select>
    </div>

    <div>
        <input type="submit" class="btn btn-primary" value="Store"/>
    </div>
</form>

<div class="form-group" id="availableOptions">
    <label for="inputName" class="text-heading h6 font-weight-semi-bold">Available options</label>
    <div class="option  d-flex justify-content-between">
        <input type="text" class="form-control col-md-8">
        <input type="button" class="removeOption btn btn-outline-primary col-md-3" value="Remove option"/>
    </div>
    <div class="option mt-3 d-flex justify-content-between">
        <input type="text" class="form-control col-md-8">
        <input type="button" class="removeOption btn btn-outline-primary col-md-3" value="Remove option"/>
    </div>
</div>




<div class="form-group">
<input type="button" class="btn btn-outline-primary mt-3" id="addNewOption" value="Adicionar nova opção"/>
</div>
<div class="float-right">
<a href="{{route('questions.edit', ['id' => $conference->id])}}" class="btn btn-outline-primary mt-3">Voltar à pàgina anterior</a>
<input type="submit" class="btn btn-primary mt-3" value="Guardar"/>
</div>

Тогда у меня есть некоторый jQuery, когда опция выбрана, если это «select_menu», «radio_btn», «checkbox», то для пользователя появляется div для

$('#addNewOption').hide();
    $('#availableOptions').hide();

    $('#customQuestionType').change(function(){
        var selected_option = $('option:selected', this).val();
        alert(selected_option);
        if (selected_option == "select_menu" || selected_option == "radio_btn" || selected_option == "checkbox") {
            $('#addNewOption').show();
            $('#availableOptions').show();
            $('#addNewOption').click(function() {
                $('#availableOptions').append(
                    '<div class="option form-row mt-3 d-flex justify-content-between">' +
                    '<input type="text" class="form-control col-md-8">' +
                    '<button class="removeOption btn btn-outline-primary col-md-3">Remove Option</button>' +
                '</div>');
            });
        }else{
            $('#availableOptions').hide();
        }
    });

QuestionController store (() метод:

public function store(Request $request, $id){

        $this->validate($request, [
            'question' => 'required|max:255|string',
            'type' => 'required|max:255|string',
        ]);

        $conference = Conference::find($id);

        Question::create([
            'conference_id' => $conference->id,
            'question' => $request->question,
            'type' => $request->type,
        ]);

        Session::flash('success', 'Question created with success.');
        return redirect()->back();
    }

Модель вопроса:

class Question extends Model
{
       public function registration_type(){
            return $this->belongsToMany('App\TicketType', 'ticket_type_questions')->withPivot('required');
    }
}

Answer 1

сохраните в БД с логическим значением для вашего значения по умолчанию 0 => НЕТ и получите значение вашего флажка с помощью

$(".yourcheckbox").change(function() {
    if(this.checked) {
        //Do the stuff 
    }
});

, и только для вашего совета, вы можете изменить это

$('#addNewOption').click(function() {
            $('#availableOptions').append(
                '<div class="option form-row mt-3 d-flex justify-content-between">' +
                '<input type="text" class="form-control col-md-8">' +
                '<button class="removeOption btn btn-outline-primary col-md-3">Remove Option</button>' +
            '</div>');
        });

с событием .trigger из jquery здесь

или делайте так

 var newString = [
   '<div id="newDiv">',
   'This is a new div',
   '</div>'
].join('');

//New div created

$(newString).appendTo('.someClass');

//Append your new div to some class

Answer 2

hi @johnW. Можете ли вы попробовать этот подход

Дизайн таблицы Здесь есть 4 таблицы

1. Таблица вопросов: она будет хранить три вопроса вопроса (идентификатор, вопрос, идентификатор конференции и т. Д.), Не сохраняя информацию о поле (текст, radio_tbn и т. Д.)

2. Таблица вопросов-полей: будет хранитьтип ввода, связанный с вопросом (id, question_id (fk), field_type_id (fk), value, text) здесь значение и текст необязательно, это будет полезно для переключателя и флажка

3. Таблица field_type: в ней будут храниться фактические имена типов ввода html (id, name), такие как textbox, radio_btn, select и т. Д.

4. Select_options: эта таблица используется для хранения параметров поля выбора (есливы добавляете зелье выбора в формате json с таблицей question_fields, вы можете удалить эту таблицу)

Пример данных

Answer 3

Вы можете создать таблицу question_options, которая выглядит следующим образом:

id  |  question_id  |  value

Создайте отношение на модели Question следующим образом:

public function options() {
    return $this->hasMany(QuestionOption::class);
}

И обратное наQuestionOption модель

public function question() {
    return $this->belongsTo(Question::class);
}

В имени вашей формы поля input для опций questionOptions[]

Это позволит вам отправлять опции в массиве

Затем в вашем методе магазина вы должны будете сделать следующее:

$question = Question::create([
    'conference_id' => $conference->id,
    'question' => $request->question,
    'type' => $request->type,
]);

if($request->type == 'radio_btn') {
    foreach($request->input('questionOptions') as $questionOption) {
        QuestionOption::create([
            'question_id' => $question->id,
            'value' => $questionOption
        ]);
    }
}

Теперь, когда вам нужно получить параметры, вы можете просто проверить, является ли тип Question типом radio_btn, и получить параметрычерез отношения

Может быть полезно добавить это к вашей Question модели:

public function hasOptions() {
    return $this->type == 'radio_btn';
}

И тогда вы можете легко проверить, есть ли у Question опции и показать их (дляпример):

if($question->hasOptions()) {
    foreach($question->options as $option) {
        <p>{{ $option->value }}</p>
    }
}

- edit -

Чтобы было проще увидеть, какой тип Question имеет опции, вы можете добавить его в Question модель:

public static $typeHasOptions = [
    'radio_btn',
    'select_menu'
];

Это позволит вам добавить больше типов, которые могут иметь опции в будущем.

Затем в вашем контроллереметод замены:

if($request->type == 'radio_btn') {

на:

if(in_array($request->type, Question::$typeHasOptions))

Вы также можете обновить метод hasOptions следующим образом:

public function hasOptions() {
    return in_array($this->type, self::$typeHasOptions);
}