How to make HTML "data-" attributes show up in form POST?

Question

I'm writing a work scheduling app that assigns workers to shifts. One thing the user can do is trade two workers between two shifts. This is done with a "select" control. So far I have been identifying the shifts and workers by packing their ids to the "value" field of each "option", like this:

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

This works OK, but my PHP and JS code both have to spend a lot of time extracting those data out of the "value" string.

I recently discovered the HTML5 feature that enables adding custom data attributes to HTML input fields by prefixing each custom attribute name with "data-". So now I'm trying to represent the various identifiers with explicit custom attributes in the "option" definition, like this:

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

This works fine for picking up the data with Javascript. But when the form is submitted, the "data-" attributes don't show up as elements in the POST request. Is there anyway to get the "data-" attributes into the POST?

Answer 1

I'm afraid, you have to write some kind of a script to manually gather those custom data and create hidden form fields from them which then get sent. You could do that on submit by a onsubmit handler for example.

Answer 2

Assuming you are using a default form submit you could get the dataset from the selected option and create a hidden input for each attribute to append to the form

 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

Why you u are creating a dynamic input element if not required. just create a hidden input field and on form Submission pass value form Jquery. just simple. no need of write more lines for code that makes you code poor...

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