Drag and Drop Form Elements

I’ve got a page which has a form on it. Inside the form tags I have a DIV for a drop zone.

I’m dragging DIV’s from outside of the form tags into this drop zone. Inside these draggable DIV’s are input elements containing values.

My console log shows the ID’s of these draggable DIV’s after they’ve been dropped into the drop zone.

When I inspect my code, the input element shows inside the the form before being posted but when I post the form I don’t get these input values.

`var_dump($_POST);`

I’m using this code
https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop

This is my testing mods.

I assume it’s something to do with the inputs not being in the form when it’s loaded but is there anything I can do or do I need to loop through and add ID’s to a textbox already in the form??

“`
function drag(ev) {
ev.dataTransfer.setData(“text”, ev.target.id);
}

function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData(“text”);
ev.target.appendChild(document.getElementById(data));
var n = ev.target.childNodes;
n.forEach(function(item){
if (item.id != undefined){
console.log(item.id)
}
});
}
“`

Also in #JavaScript _↴