JSFiddle - React, Tailwind, and code Playground

by guest271314

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>

JavaScript

$(function() {
function checkFormAttr() {
  var form = document.createElement("form");
  form.id = "abc";
  var input = document.createElement("input");
  input.type = "text";
  input.form = "abc";
  form.appendChild(input);
  // console.log(form, input.form);
  // (form === input.form) => `true` if supported 
  // (form !== input.form) => cast as `false`
  return (form === input.form) // `false` if not supported
};

  document.body.appendChild(document.createTextNode(checkFormAttr() +","+  !checkFormAttr()));
  var form = document.getElementById("myform");
    
$(form).on("submit", function( event ) {
  event.preventDefault();
  var query = $(this).serialize();
    if (!checkFormAttr()) { 
        //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;
}).submit();
    

var ms = (("msFlex" || "msAnimation") in document.body.style );
var webkit = ("WebkitAnimation" in document.body.style );
var moz = ("MozAnimation" in document.body.style );
var opera = ("OTransition" in document.body.style );

console.log("form attribute:"+ checkFormAttr()
            +"\nform attribute , cast as `false`:"+ !checkFormAttr()
            +"\nms:" + ms + "\nwebkit:" + webkit
            +"\nmoz:" + moz + "\nopera:" + opera);
    })