JSFiddle - React, Tailwind, and code Playground

by texinwien

HTML

<body>
    <form id="theForm" action="http://example.com" method="GET" target="_blank">
        <input type="submit" value="Submit"/>
    </form>
</body>

JavaScript

var formNew = document.getElementById('theForm');

var hiddenArcher = document.createElement('input');
hiddenArcher.setAttribute("type","hidden");
hiddenArcher.name = "hiddenArcher";
hiddenArcher.id = "hiddenArcherid";
hiddenArcher.setAttribute("value", 1);
formNew.appendChild(hiddenArcher);

//Here's where we create and init our change event:
var changeEvent = document.createEvent("UIEvents");
changeEvent.initUIEvent("change", true, true);

var maxLvl = 6;
var select = document.createElement( 'select' );
var trooplist = [1];
select.id = "select1 1";
select.onchange = function() {
    var hiddenInput = document.getElementById("hiddenArcherid");
    hiddenInput.value = this.value; 
    //Here's where we dispatch our change event to our hidden input:
    hiddenInput.dispatchEvent(changeEvent);  
    console.log(hiddenInput.name + ": " + hiddenInput.value);                    
};
var IDarray = [];
for(var l=0; l <= maxLvl; l++){
    var option = document.createElement( 'option' );
    option.setAttribute("value", l);
    option.innerHTML = "Level " + l;
    select.appendChild(option);
}
select.selectedIndex = trooplist[0];
IDarray.push(select.id);
formNew.appendChild(select);