JSFiddle - React, Tailwind, and code Playground

HTML

<form id="myform">
    <input type="text" name="mytext" />
    <input type="submit" value="test" />
</form>
<input form="myform" type="hidden" name="extra" id="extra" value="777" />
<select form="myform" name="filter" id="filter">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<div>Is the form attribute supported? <strong id="formSupported">Yes</strong></div>

JavaScript

//Create test elements and amend them to the DOM
var testForm = $('<form />', { 'id': "testForm" })[0];
var testInput = $('<input />', { 'form': "testForm" })[0];
$('body').append(testForm, testInput);
//Set a variable to store whether the form attribute is supported
var formSupported = (testInput.form !== null) ? true : false;
//Remove the test elements from the DOM
$(testForm).remove();
$(testInput).remove();

if (!formSupported) {
    $("#formSupported").html("No");
}

$('#myform').on('submit', function (e) {
    var query = $(this).serialize();
    if (!formSupported) { 
        //fixed form attribute not supported in IE
        var extra = $('[form=myform]').each(function () {
            if (/(=)\w*/gi.test(query)) query += '&';
            query += this.name + '=' + this.value;
        });
    }
    console.log(query);
    return false;
});