php - 生成 HTML 以显示具有正确类型(文本、复选框等)的自定义问题并正确添加所需的属性

标签 php html laravel

我有一个表格供用户创建自定义问题。为此,用户需要介绍问题(例如:您的手机是什么?)以及字段类型(文本、长文本、复选框、选择菜单、单选按钮)。如果用户选择复选框、选择菜单或单选按钮的字段,他还需要介绍问题的可用选项。

在数据库中,问题被插入到 questions 和 question_options 表中,例如:

问题表:

id       question         type        conference_id
1          Text            text             1 
2        Checkbox         checkbox          1 
3          Radio           radio_btn        1 
4          select         select_menu       1 
5         textarea         long_text        1 
6           file             file           1 

Registration_type_questions 数据透视表:

id registration_type_id   question_id  required
1         1                     1          1   
2         1                     2          1   
3         1                     3          0   
4         1                     4          0   
5         1                     5          0   
6         1                     6          1   

选项存储在 questions_options 表中:

   id   question_id   value

    1          2        check1  
    2          2        check2  
    3          3        rad1    
    4          3        rad2    
    5          4        select1
    6          4        select2 

然后在 View 中,我想在 View registration.blade.php 中正确显示基于存储在“类型”列中的类型的输入(文本、单选按钮、复选框、选择、文本区域和输入文件)问题表。如果数据透视表中的必填列为“1”,则还要添加必填属性。

当问题的类型为文本、单选按钮、选择、文本区域或文件时,它工作正常,必填属性将添加到表单字段中。

但它不适用于复选框,因为在复选框的情况下,如果问题是复选框类型并且问题是必需的,这应该意味着用户需要回答该问题,但不应该意味着用户需要检查所有复选框。

问题在于,使用函数 getHTMLInput() 生成的复选框 html 在每个复选框输入中都需要,因此用户需要检查所有复选框:

 <div class="form-group">
    <label for="participant_question">Checkbox</label>
    <div class="form-check">
      <input type="checkbox" name="participant_question[]" value="check1" class="form-check-input" required="">  
      <label class="form-check-label" for="exampleCheck1">check1</label>
    </div> 
    <div class="form-check">
      <input type="checkbox" name="participant_question[]" value="check2" class="form-check-input" required="">    
      <label class="form-check-label" for="exampleCheck1">check2</label>
    </div>

    <input type="hidden" name="participant_question_required[]" value="1">
    <input type="hidden" value="2" name="participant_question_id[]">
  </div>

你知道如何解决这个问题吗?当需要自定义问题时,这意味着该问题是必需的,因此用户应至少选择 1 个复选框,但不应意味着用户需要选中所有复选框。

如果需要自定义问题,您知道如何在每个问题标签内添加“<span class="text-primary">*</span>”吗?

问题模型中的GetHtmlInput():

class Question extends Model
{
    protected $fillable = [
        'question', 'type', 'conference_id',
    ];

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

    public function registration_type()
    {
        return $this->belongsToMany('App\RegistrationType', 'registration_type_questions')
            ->withPivot('required');
    }

    public function options()
    {
        return $this->hasMany('App\QuestionOption');
    }

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

    public function getHtmlInput($name = "", $options = "", $required = false, $class = "", $customtype = false) {

        $html = '';
        $html .= $customtype == 'select_menu' ? "<select name='participant_question' class='form-control' " . ($required ? " required" : "")
            . ">" : '';

        if (empty($options)) {
            switch ($customtype) {
                case "text":
                    $html .= " 
                    <input type='text' name='participant_question' class='form-control'" . ($required ? " required" : "")
                        . ">";
                    break;

                case "file":

                    $html .= " 
                    <input type='file' name='participant_question' class='form-control'" . ($required ? " required" : "") . ">";
                    break;

                case "long_text":
                    $html .= "
                <textarea name='participant_question' class='form-control' rows='3'" . ($required ? " required" : "") . ">"
                        . $name .
                        "</textarea>";

                    break;
            }
        } else {
            foreach ($options as $option) {
                switch ($customtype) {
                    case "checkbox":
                        $html .= " 
                <div class='form-check'>
                    <input type='checkbox' name='participant_question[]' value='" . $option->value . "' class='form-check-input'" . ($required ? " required" : "") . ">" .
                            '    <label class="form-check-label" for="exampleCheck1">' . $option->value . '</label>' .
                            "</div>";
                        break;
                    case "radio_btn":
                        $html .= " 
                <div class='form-check'>
                    <input type='radio' name='participant_question[]' value='" . $option->value . "' class='form-check-input'" . ($required ? " required" : "") . ">" .
                            '    <label class="form-check-label" for="exampleCheck1">' . $option->value . '</label>' .
                            "</div>";
                        break;
                    case "select_menu":
                        $html .= "<option value='" . $option->value . "'>" . $option->value . "</option>";
                        break;
                }
            }
        }
        $html .= $customtype == 'select_menu' ? "</select>" : '';

        return $html;
    }
}

然后 getHtmlInput() 的用法如下:

@if ($allParticipants == 0)
    @foreach($selectedRtype['questions'] as $customQuestion)
        <div class="form-group">
            <label for="participant_question">{{$customQuestion->question}}</label>
            @if($customQuestion->hasOptions() && in_array($customQuestion->type, ['checkbox', 'radio_btn', 'select_menu']))
                {!! $customQuestion->getHtmlInput(
                    $customQuestion->name,
                    $customQuestion->options,
                    ($customQuestion->pivot->required == '1'),
                    'form-control',
                    $customQuestion->type)
                !!}

            @else
                {!! $customQuestion->getHtmlInput(
                    $customQuestion->name,
                    [],
                    ($customQuestion->pivot->required == '1'),
                    'form-control',
                    $customQuestion->type)
                !!}
            @endif
            <input type="hidden"
                   name="participant_question_required[]"
                   value="{{ $customQuestion->pivot->required }}">
            <input type="hidden"
                   value="{{ $customQuestion->id }}"
                   name="participant_question_id[]"/>
        </div>
    @endforeach
@endif

使用 getHTMLInput() 生成的 HTML:

<form method="post" action="">


  <div class="form-group">
    <label for="participant_question">Text</label>
    <input type="text" name="participant_question" class="form-control" required="">
    <input type="hidden" name="participant_question_required[]" value="1">
    <input type="hidden" value="1" name="participant_question_id[]">
  </div>

  <div class="form-group">
    <label for="participant_question">Checkbox</label>
    <div class="form-check">
      <input type="checkbox" name="participant_question[]" value="check1" class="form-check-input" required="">  
      <label class="form-check-label" for="exampleCheck1">check1</label>
    </div> 
    <div class="form-check">
      <input type="checkbox" name="participant_question[]" value="check2" class="form-check-input" required="">    
      <label class="form-check-label" for="exampleCheck1">check2</label>
    </div>

    <input type="hidden" name="participant_question_required[]" value="1">
    <input type="hidden" value="2" name="participant_question_id[]">
  </div>

  <div class="form-group">
    <label for="participant_question">Radio</label>
    <div class="form-check">
      <input type="radio" name="participant_question[]" value="rad1" class="form-check-input">  
      <label class="form-check-label" for="exampleCheck1">rad1</label>
    </div> 
    <div class="form-check">
      <input type="radio" name="participant_question[]" value="rad2" class="form-check-input">   
      <label class="form-check-label" for="exampleCheck1">rad2</label>
    </div>
    <input type="hidden" name="participant_question_required[]" value="0">
    <input type="hidden" value="3" name="participant_question_id[]">
  </div>

  <div class="form-group">
    <label for="participant_question">select</label>
    <select name="participant_question" class="form-control">
      <option value="select1">select1</option>
      <option value="select2">select2</option>
    </select>

    <input type="hidden" name="participant_question_required[]" value="0">
    <input type="hidden" value="4" name="participant_question_id[]">
  </div>

  <div class="form-group">
    <label for="participant_question">textarea</label>
    <textarea name="participant_question" class="form-control" rows="3"></textarea>
    <input type="hidden" name="participant_question_required[]" value="0">
    <input type="hidden" value="5" name="participant_question_id[]">
  </div>

  <div class="form-group">
    <label for="participant_question">file</label>
    <input type="file" name="participant_question" class="form-control" required="">
    <input type="hidden" name="participant_question_required[]" value="1">
    <input type="hidden" value="6" name="participant_question_id[]">
  </div>

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

此外,在 HTML 验证器(如 w3c 验证器)中检查此表单会出现一些错误:

  • 标签元素的for属性必须引用非隐藏的表单控件。在“文
  • label元素的for属性必须引用一个非隐藏的表单控件。在“检查b”中
  • 标签元素的for属性必须引用非隐藏的表单控件。在“检查1”中
  • 标签元素的for属性必须引用非隐藏的表单控件。在“check2”中
  • 标签元素的for属性必须引用非隐藏的表单控件。在“rad1
  • label元素的for属性必须引用一个非隐藏的表单控件。在“rad2
  • label元素的for属性必须引用一个非隐藏的表单控件。在“选择”中
  • 标签元素的for属性必须引用非隐藏的表单控件。在“文本”中
  • 标签元素的for属性必须引用非隐藏的表单控件。在“文件

最佳答案

这是因为在此处的 foreach 循环中有复选框组 html:

 foreach ($options as $option) {
                switch ($customtype) {
                    case "checkbox":
                        $html .= " 
                <div class='checkbox-group' " . ($required ? " required" : "") . ">

您需要考虑如何解决这个问题,也许可以使用 $checkboxesFound 之类的变量,并在函数开始时将其设置为 0,当 case 为复选框时,增加变量,然后如果 $checkboxesFound == 0 然后回显组 div。

关于php - 生成 HTML 以显示具有正确类型(文本、复选框等)的自定义问题并正确添加所需的属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50724984/

相关文章:

php - 自动在浏览器中裁剪图像

Laravel 7 无法解析的依赖解析 - Blade 组件

php - 在 Ubuntu 服务器上部署 Laravel Vue 后 POST 路由不起作用

javascript - 在 Laravel、vuejs 中通过搜索从两个具有 where 条件的表中获取数据

java - 如何使用Codeigniter 3从java网站获取Json数据?

php - str_replace 工作不正确 ("str_replace"对 $replace 参数进行了更改)

php - 在不破坏单页 ssl 的情况下重写子域

html - 为什么我的 bootstrap navbar css 不工作?

ios - href=电话 :555 link not working in mobile safari

html - 隐藏文本直到 HTML 元素展开以显示它?