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

Question

我正在编写一个工作调度应用程序，用于分配工人轮班。 用户可以做的一件事是在两个班次之间交换两名工人。 这是通过“选择”控件完成的。 到目前为止，我一直在通过将他们的 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？

Answer 1

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

Answer 2

假设您使用的是默认表单提交，您可以从所选选项中获取dataset并为每个属性创建一个隐藏输入以附加到表单

 document.querySelector('#myForm').addEventListener('submit', function(evt) { // remove from production -- demo only evt.preventDefault(); const form = this, sel = form.mySelect, optData = sel.options[sel.selectedIndex].dataset; //TODO: validate optData before proceeding // iterate optData and create hidden input for each key/value pair Object.entries(optData).forEach(function(entry) { const input = document.createElement('input'); input.type = 'hidden'; input.name = entry[0]; input.value = entry[1]; form.appendChild(input); }) // see the new elements in demo console.log(form.innerHTML) })

 <form id="myForm"> <select id="mySelect"> <option data-action="trade" data-thisShift="439" data-thisWorker="32" data-thatShift="436" data-thatWorker="10" selected> Thu 2019-07-04 for Carl Ross </option> </select> <button>Submit</button> </form>

Answer 3

如果不需要，为什么要创建动态输入元素。 只需创建一个隐藏的输入字段和表单提交传递值表单 Jquery。 只是简单。 无需为代码编写更多行，从而使您的代码变得很差...

$("#MyForm").on("submit",function(e){
e.preventDefault();  
$("#hiddenField").val($("#YourSource").val()) 
});