HTML5 form attribute support for IE

fixed form attribute not supported in IE

by Pasit R

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>
<div id="result"></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;
//Remove the test elements from the DOM
$(testForm).remove();
$(testInput).remove();

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

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