时间戳

首页 > 解决方案 > 如何使 HTML“数据-”属性显示在表单 POST 中？

javascript - 如何使 HTML“数据-”属性显示在表单 POST 中？

问题描述

我正在编写一个工作调度应用程序，将工人分配到轮班。用户可以做的一件事是在两班倒之间交换两名工人。这是通过“选择”控件完成的。到目前为止，我一直在通过将他们的 id 打包到每个“选项”的“值”字段来识别轮班和工人，如下所示：

<option 
    value="
        action:trade 
        this_shift:439 
        this_worker:32 
        that_shift:436 
        that_worker:10"
>
    Thu 2019-07-04 for Carl Ross
</option>

这工作正常，但我的 PHP 和 JS 代码都必须花费大量时间从“值”字符串中提取这些数据。

我最近发现了 HTML5 功能，它可以通过在每个自定义属性名称前加上“data-”来将自定义数据属性添加到 HTML 输入字段。因此，现在我尝试在“选项”定义中使用显式自定义属性来表示各种标识符，如下所示：

<option 
    data-action="trade" 
    data-thisShift="439" 
    data-thisWorker="32" 
    data-thatShift="436" 
    data-thatWorker="10"
>
    Thu 2019-07-04 for Carl Ross
</option>

这适用于使用 Javascript 获取数据。但是当提交表单时，“data-”属性不会显示为 POST 请求中的元素。无论如何要将“数据”属性放入POST？

标签： javascripthtml

解决方案

恐怕，您必须编写某种脚本来手动收集这些自定义数据并从中创建隐藏的表单字段，然后将其发送。例如，您可以通过 onsubmit 处理程序在提交时执行此操作。

推荐阅读