在带有刀片模板的表单中使用 laravelcollective/html 时防止转义单引号

Posted 2023-03-14

【中文标题】在带有刀片模板的表单中使用 laravelcollective/html 时防止转义单引号

【英文标题】：Prevent escaping single quotes when using laravelcollective/html in forms with blade templating

【发布时间】：2016-02-27 09:41:01

【问题描述】：

问题描述： 在使用 laravelcollective/html 组件时，我遇到了一些 laravel 转义引号的问题。我需要引号保持未转义，以保持 javascript 代码正常工作。

代码的目的： 用户需要指明何时要将表单域保持为空。如果他们不这样做，则需要一些输入。我不希望用户指出一个字段是空的，并且他同时提交了一些输入。此行为由 javascript 通过在单击单选按钮时删除复选框的选中状态来控制，反之亦然。

表单中有多个字段（如果字段应为空，则每个字段都带有单选按钮和一个复选框）。在提交表单之前，所有内容都必须通过 javascript 检查。每个字段都有自己的名称。

字段的刀片代码：

<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 代替刀片 - 因此请避免使用 !! !! 标签 - ，但我想知道是否可以在刀片中做到这一点，或者在 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>

【参考方案1】：

可以通过将属性值作为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 这样的外部函数，因为所有逻辑都在事件函数中处理。

---

还有比普通 JS 版本更短、更易读的 jQuery 版本：

(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。

【讨论】：

感谢您的回答。但是，因为我有大约 15 个不同的输入字段，我应该为两个变量（空和字段）创建一个数组并循环遍历这些数组，对吗？例如。 empty[1], empty[2], ... 和相应的 field[1], field[2],.... 其次，我还在寻找是否可以防止刀片代码中的单引号转义.

我已经用在属性值中使用引号的解决方案更新了我的答案。如果您希望我帮助您解决有关输入字段的其他问题，则必须包含整个表单。

嗨，我尝试使用 javascript 数组并循环遍历它们以适应您的脚本，但这可能因为 javascript 处理数组的方式而不起作用。所以我编辑了我的帖子以包含我的表单的更多字段。在使用 onClick 事件回到我原来的方法之前，我将继续寻找如何调整您的脚本。

我通过使用函数并在脚本开头使用正确的变量调用这些函数来使其工作。