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?

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?

• javascript
• html

• How are you submitting this...default form process or ajax? – charlietfl Commented Jul 28, 2019 at 19:14
• Default form submit process. – Ken Commented Jul 28, 2019 at 23:29
• Can you please mark my answer as the right answer? Or what else do you want to see? I could add some more things about the data-* attributes. – Janos Vinceller Commented Nov 13, 2019 at 20:03

3 Answers 3

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.

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>

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