在具有 blade 模板的表单中使用 laravelcollective/html 时防止转义单引号
Prevent escaping single quotes when using laravelcollective/html in forms with blade templating
问题描述:
我在使用 laravelcollective/html 组件时遇到 laravel 转义引号的问题。为了使 javascript 代码正常工作,我需要引号保持未转义。
代码的用途:
用户需要指明何时要将表单字段留空。如果他们不这样做,则需要一些输入。我不希望用户在指示字段为空的同时提交一些输入。此行为由 javascript 通过在点击单选按钮时删除复选框的选中状态来控制,反之亦然。
表单中有多个字段(如果字段应为空,则每个字段都有单选按钮和复选框)。在提交表格之前,所有内容都必须由 javascript 检查。每个字段都有自己的名称。
字段的blade代码:
<div>
{!! Form::checkbox('field_empty',1,null, ['id' => 'field_empty'] !!}
</div>
<div>
{!! Form::radio('field', 0, null, ['onClick' => 'unselectCheckbox(this,'field_empty')'] !!}
{!! Form::radio('field', 1, null, ['onClick' => 'unselectCheckbox(this,'field_empty')'] !!}
{!! Form::radio('field', 2, null, ['onClick' => 'unselectCheckbox(this,'field_empty')'] !!}
</div>
javascript代码:
function unselectCheckbox(box,field)
{
if (box.value >= 0)
{
document.getElementsById(field).checked = false;
}
}
(我还有一个 javascript 函数,用于在单击复选框时删除选中的单选按钮,但我没有将其包含在代码中。)
当使用上面的代码时,由于 'field_empty' 周围的单引号,我得到一个 laravel 错误。删除单引号不会导致 js 工作。在生成的 html.
中使用双引号导致 '"'
当然我可以使用纯 html 而不是 blade - 所以不要使用 {!! !!} 标签 - ,但我想知道是否可以在 blade 中执行此操作,或者可以在 javascript 中使用其他方法?
编辑:
我的表单包含多个必须检查的项目。每个项目都有自己的名称,并有相应的复选框用于确认空值:
<div>
{!! Form::checkbox('field1_empty', 1, null, ['id' => 'field_empty']) !!}
</div>
<div>
{!! Form::radio('field1', 0, null) !!}
{!! Form::radio('field1', 1, null) !!}
{!! Form::radio('field1', 2, null) !!}
</div>
<div>
{!! Form::checkbox('field2_empty', 1, null, ['id' => 'field_empty']) !!}
</div>
<div>
{!! Form::radio('field2', 0, null) !!}
{!! Form::radio('field2', 1, null) !!}
{!! Form::radio('field2', 2, null) !!}
</div>
<div>
{!! Form::checkbox('field3_empty', 1, null, ['id' => 'field_empty']) !!}
</div>
<div>
{!! Form::radio('field3', 0, null) !!}
{!! Form::radio('field3', 1, null) !!}
{!! Form::radio('field3', 2, null) !!}
</div>
属性值可以通过将其作为不会被转义的 HtmlString
实例传递来转义。
{!! Form::radio('field', 0, null, ['onClick' => new Illuminate\Support\HtmlString("unselectCheckbox(this,'field_empty')")]) !!}
也就是说,在元素上内联定义 onclick
个事件通常被认为是一个坏主意。您应该改为处理 JavaScript 端的事件,这样您就不必在元素定义中包含 onClick
属性。所以 HTML 应该是这样的:
<div>
{!! Form::checkbox('field_empty', 1, null, ['id' => 'field_empty']) !!}
</div>
<div>
{!! Form::radio('field', 0, null) !!}
{!! Form::radio('field', 1, null) !!}
{!! Form::radio('field', 2, null) !!}
</div>
处理它的 JavaScript 应该是这样的:
(function () {
var empty = document.getElementById('field_empty');
var radios = document.getElementsByName('field');
// When clicking on any of the radio buttons, uncheck the field_empty checkbox
for (var i = 0; i < radios.length; i++) {
radios[i].onclick = function () {
// The "if (box.value >= 0)" condition is useless here
// because it will always be true, so I removed it
empty.checked = false;
};
}
// When clicking on the empty checkbox, uncheck the radio buttons
empty.onclick = function () {
for (var i = 0; i < radios.length; i++) {
radios[i].checked = false;
}
};
})();
这是上述代码的 working example。如您所见,不需要像 unselectCheckbox
这样的外部函数,因为所有逻辑都在事件函数中处理。
还有 jQuery 版本,它比 vanilla JS 版本更短且更易读:
(function () {
var empty = $('#field_empty');
var radios = $('[name=field]');
radios.click(function () {
empty.prop('checked', false);
});
empty.click(function () {
radios.prop('checked', false);
});
})();
这里是 jQuery 版本的 working example。
问题描述: 我在使用 laravelcollective/html 组件时遇到 laravel 转义引号的问题。为了使 javascript 代码正常工作,我需要引号保持未转义。
代码的用途: 用户需要指明何时要将表单字段留空。如果他们不这样做,则需要一些输入。我不希望用户在指示字段为空的同时提交一些输入。此行为由 javascript 通过在点击单选按钮时删除复选框的选中状态来控制,反之亦然。
表单中有多个字段(如果字段应为空,则每个字段都有单选按钮和复选框)。在提交表格之前,所有内容都必须由 javascript 检查。每个字段都有自己的名称。
字段的blade代码:
<div>
{!! Form::checkbox('field_empty',1,null, ['id' => 'field_empty'] !!}
</div>
<div>
{!! Form::radio('field', 0, null, ['onClick' => 'unselectCheckbox(this,'field_empty')'] !!}
{!! Form::radio('field', 1, null, ['onClick' => 'unselectCheckbox(this,'field_empty')'] !!}
{!! Form::radio('field', 2, null, ['onClick' => 'unselectCheckbox(this,'field_empty')'] !!}
</div>
javascript代码:
function unselectCheckbox(box,field)
{
if (box.value >= 0)
{
document.getElementsById(field).checked = false;
}
}
(我还有一个 javascript 函数,用于在单击复选框时删除选中的单选按钮,但我没有将其包含在代码中。)
当使用上面的代码时,由于 'field_empty' 周围的单引号,我得到一个 laravel 错误。删除单引号不会导致 js 工作。在生成的 html.
中使用双引号导致 '"'当然我可以使用纯 html 而不是 blade - 所以不要使用 {!! !!} 标签 - ,但我想知道是否可以在 blade 中执行此操作,或者可以在 javascript 中使用其他方法?
编辑: 我的表单包含多个必须检查的项目。每个项目都有自己的名称,并有相应的复选框用于确认空值:
<div>
{!! Form::checkbox('field1_empty', 1, null, ['id' => 'field_empty']) !!}
</div>
<div>
{!! Form::radio('field1', 0, null) !!}
{!! Form::radio('field1', 1, null) !!}
{!! Form::radio('field1', 2, null) !!}
</div>
<div>
{!! Form::checkbox('field2_empty', 1, null, ['id' => 'field_empty']) !!}
</div>
<div>
{!! Form::radio('field2', 0, null) !!}
{!! Form::radio('field2', 1, null) !!}
{!! Form::radio('field2', 2, null) !!}
</div>
<div>
{!! Form::checkbox('field3_empty', 1, null, ['id' => 'field_empty']) !!}
</div>
<div>
{!! Form::radio('field3', 0, null) !!}
{!! Form::radio('field3', 1, null) !!}
{!! Form::radio('field3', 2, null) !!}
</div>
属性值可以通过将其作为不会被转义的 HtmlString
实例传递来转义。
{!! Form::radio('field', 0, null, ['onClick' => new Illuminate\Support\HtmlString("unselectCheckbox(this,'field_empty')")]) !!}
也就是说,在元素上内联定义 onclick
个事件通常被认为是一个坏主意。您应该改为处理 JavaScript 端的事件,这样您就不必在元素定义中包含 onClick
属性。所以 HTML 应该是这样的:
<div>
{!! Form::checkbox('field_empty', 1, null, ['id' => 'field_empty']) !!}
</div>
<div>
{!! Form::radio('field', 0, null) !!}
{!! Form::radio('field', 1, null) !!}
{!! Form::radio('field', 2, null) !!}
</div>
处理它的 JavaScript 应该是这样的:
(function () {
var empty = document.getElementById('field_empty');
var radios = document.getElementsByName('field');
// When clicking on any of the radio buttons, uncheck the field_empty checkbox
for (var i = 0; i < radios.length; i++) {
radios[i].onclick = function () {
// The "if (box.value >= 0)" condition is useless here
// because it will always be true, so I removed it
empty.checked = false;
};
}
// When clicking on the empty checkbox, uncheck the radio buttons
empty.onclick = function () {
for (var i = 0; i < radios.length; i++) {
radios[i].checked = false;
}
};
})();
这是上述代码的 working example。如您所见,不需要像 unselectCheckbox
这样的外部函数,因为所有逻辑都在事件函数中处理。
还有 jQuery 版本,它比 vanilla JS 版本更短且更易读:
(function () {
var empty = $('#field_empty');
var radios = $('[name=field]');
radios.click(function () {
empty.prop('checked', false);
});
empty.click(function () {
radios.prop('checked', false);
});
})();
这里是 jQuery 版本的 working example。