Question

我有一个表单供用户创建自定义问题。用户需要介绍问题以及字段类型（文本，长文本，复选框，选择菜单，单选按钮）。如果用户选择以下类型之一：复选框，选择菜单或单选按钮，则会显示div“#availableOptions”，以便用户为该类型的问题编写选项。

我怀疑的是如何在数据库中存储这个选项。目前，数据库的问题表如下所示，但没有考虑可用的选项。

例如，如果用户正在创建自定义问题“接收通知？”并选择问题的类型作为复选框，它将出现#availableOptions div。并且用户可以在第一个选项“是”和第二个选项“否”中写入。

我怀疑如何在数据库中存储“是”和“否”选项。你知道怎么做到这一点吗？对于何时是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”，“复选框”它会显示为用户的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

您可以创建一个如下所示的if self.array[position][0]==key: TypeError: 'NoneType' object is not subscriptable表：

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> } }类型有选项，您可以将其添加到Question模型中：

Question

这样您就可以轻松添加更多可能具有选项的类型。

然后在您的Controller方法中替换：

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

使用：

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

您还可以将if(in_array($request->type, Question::$typeHasOptions))方法更新为：

hasOptions

Answer 2

使用布尔值存储在DB中，默认值为0 =＆gt;不，并使用

获取复选框的值

$(".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 here

或者这样做

 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 3

你好@johnW可以尝试这种方法

表格设计 这里有4个表

问题表：它将存储问题（id，question，conference_id等）的不存储字段信息（text，radio_tbn等）
Question_fields表：这将存储与问题相关的输入类型（id，question_id（fk），field_type_id（fk），值，文本）这里的值和文本可选它对单选按钮和复选框有用
Field_type表：这将存储实际的html输入类型名称（id，name），如textbox，radio_btn，select等
Select_options：此表用于存储选择框选项（如果您使用带有question_fields表的json格式添加选择部分，则可以删除此表）

示例数据

如何在db中存储输入类型的可用选项：select menu，radiobutton和checkbox？

3 个答案: