如何使 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()) 
});