生成HTML以显示具有正确类型的自定义问题(文本、复选框等)并正确添加所需的属性
生成HTML以显示具有正确类型的自定义问题(文本、复选框等)并正确添加所需的属性
提问于 2018-06-07 00:11:20
我有一个用户创建自定义问题的表单。为此，用户需要介绍问题(例如:您的手机是什么？)以及字段的类型(文本、长文本、复选框、选择菜单、单选按钮)。如果用户选择一个复选框字段，选择菜单或单选按钮，他还需要介绍问题的可用选项。
在数据库中，问题被插入到问题和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 然后在视图中，我想要正确地显示在视图registration.blade.php的输入(文本，单选按钮，复选框，选择，文本区和输入文件)基于类型存储在列“类型”的问题表。并且如果数据透视表中所需的列是"1“，则也添加所需的属性。
当问题的类型为文本、单选按钮、选择、文本区或文件时，会将所需属性添加到表单域中。
但是复选框不能正常工作，因为在复选框的情况下，如果问题是checkbox类型，并且问题是必需的，这应该意味着用户需要回答该问题，但不应该意味着用户需要选中所有复选框。
问题是，使用函数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>你知道如何解决这个问题吗？当需要自定义问题时，这应该意味着该问题是必需的，因此用户应该至少选择一个复选框，但不应该意味着用户需要选中所有复选框。
另外，如果需要自定义问题，您知道如何在每个问题中添加此"<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()生成的超文本标记语言：
<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>此外，在w3c验证器之类的超文本标记语言验证器中检查此表单时，会出现一些错误：
label元素的
- 属性必须引用非隐藏窗体控件。在"Text
- “中，label元素的for属性必须引用非隐藏表单控件。在”Checkb“
- 中，label元素的for属性必须引用非隐藏表单控件。在”check1“
- 中，label元素的for属性必须引用非隐藏表单控件。在”check2“
- 中，label元素的for属性必须引用非隐藏表单控件。在"rad1
”
- 中，label元素的for属性必须引用非隐藏表单控件。在"rad2
- “中，label元素的for属性必须引用非隐藏表单控件。在”
“
- 中，label元素的for属性必须引用非隐藏表单控件。在”textar“
- 中，label元素的for属性必须引用非隐藏表单控件。在”
回答 3
Stack Overflow用户
发布于 2018-06-07 00:49:07
这是因为您的foreach循环中包含复选框组html：
foreach ($options as $option) {
switch ($customtype) {
case "checkbox":
$html .= "
<div class='checkbox-group' " . ($required ? " required" : "") . ">你需要考虑如何解决这个问题，比如使用像$checkboxesFound这样的变量，并在函数开始时将其设置为0，当case为复选框时，递增该变量，如果为$checkboxesFound == 0，则回显group div。
Stack Overflow用户
发布于 2018-06-10 13:47:26
将您的getHtmlInput()替换为以下内容
public function getHtmlInput($question_id, $index_position, $name = "", $options = "", $required = false, $class = "", $customtype = false) {
//dd($name);
$html = '';
$html .= $customtype == 'select_menu' ? "<select name='participant_question[".$question_id."][".$index_position."]' class='form-control' " . ($required ? " required" : "")
. ">" : '';
if (empty($options)) {
switch ($customtype) {
case "text":
$html .= "
<input type='text' name='participant_question[".$question_id."][".$index_position."]' class='form-control'" . ($required ? " required" : "")
. ">";
break;
case "file":
$html .= "
<input type='file' name='participant_question[".$question_id."][".$index_position."]' class='form-control'" . ($required ? " required" : "") . ">";
break;
case "long_text":
$html .= "
<textarea name='participant_question[".$question_id."][".$index_position."]' 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[".$question_id."][".$index_position."][]' 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[".$question_id."][".$index_position."][]' 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;
}和
刀片式服务器代码
@if ($allParticipants == 0)
{{ $index_position = 0 }}
@foreach($selectedRtype['questions'] as $customQuestion)
{{ $question_id = [[QUESTION_ID]] }}
<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(
$question_id,
$index_position,
$customQuestion->name,
$customQuestion->options,
($customQuestion->pivot->required == '1'),
'form-control',
$customQuestion->type)
!!}
@else
{!! $customQuestion->getHtmlInput(
$question_id,
$index_position,
$customQuestion->name,
[],
($customQuestion->pivot->required == '1'),
'form-control',
$customQuestion->type)
!!}
@endif
</div>
{{ $index_position = $index_position+1 }}
@endforeach
@endif您需要将名称属性设置为与相同组选项相同，才能正确使用所需选项。
但是在您的代码中，包括不同选项组的所有选项都共享相同的名称属性。
上面的代码没有经过测试。但我希望它能为你工作
Stack Overflow用户
发布于 2018-06-09 12:06:08
HTML5没有实现需要一组复选框的解决方案，所以您可以通过一些更改来实现它。首先，在您的控制器上，您需要更改它，以实现与您对选择菜单所做的相同操作。
// on top of your method:
$html .= $customtype == 'checkbox' ? "<div class='checkbox-group ".($required ? " required" : "")."'>" : '';
// at the bottom
$html .= $customtype == 'checkbox' ? "</div>" : '';然后，在您的“复选框”中，您只需打印位于“所需的复选框组”中的选项：
case "checkbox":
$html .= "
<div class='form-check'>
<input type='checkbox' name='participant_question[]' value='" . $option->value . "' class='form-check-input' ><label class='form-check-label' for='exampleCheck1'>" . $option->value . "</label>
</div>";这将输出以下html：
<div class="checkbox-group required">
<div class="form-check">
<input type="checkbox" name="participant_question[]" value="whatever" class="form-check-input"><label class="form-check-label" for="exampleCheck1">whatever</label>
</div>
<div class="form-check">
<input type="checkbox" name="participant_question[]" value="whatever2" class="form-check-input"><label class="form-check-label" for="exampleCheck1">whatever2</label>
</div>
</div>然后在提交时，我不知道您是否使用ajax完成此操作，但我假设您不是这样做的，所以如果您在表单-> id="questionForm"中添加id
$('#questionForm').submit(function() {
if($('div.checkbox-group.required div :checkbox:checked').length > 0) {
return true;//submit the form
} else {
return false; // do not submit the form
}
});不幸的是，只有使用 html5才能实现你想要的东西，无论你选择什么解决方案，都可能要用js来完成。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50724984
复制相关文章
相似问题
腾讯云开发者
