HTML5 form attribuition polyfill

example.html

<h3>Inside the form:</h3>

<form id="contact_form" method="post">
    <label>Name:</label>
    <input type="text" id="name" name="name" value="John" />
    <br>
    <label>Email:</label>
    <input type="email" id="email" name="email" value="[email protected]" />
    <br>
    <input type="submit" id="submit1" value="SEND" />
</form>

<h3>Elements outside the form:</h3>


<h4>Text field</h4>

<input name="user" id="user" form="contact_form" value="Admin">
<br>
<textarea name="comment" id="comments" form="contact_form">Here is the comment</textarea>

<h4>Radio buttons</h4>

<input type="radio" name="radio" value="radio1" checked="checked" id="r1" form="contact_form">
<label for="r1">radio1</label>
<input type="radio" name="radio" value="radio2" id="r2" form="contact_form">
<label for="r2">radio2</label>

<h4>List</h4>

<select name="single" form="contact_form">
    <option>Single</option>
    <option>Single2</option>
    <option selected="selected">Default</option>
</select>
<br>
<select name="multiple" multiple="multiple" form="contact_form">
    <option selected="selected">Multiple</option>
    <option>Multiple2</option>
    <option selected="selected">Multiple3</option>
</select>
<br>

<h3>Check boxes</h3>


<h4>Checkbox</h4>

<input type="checkbox" name="check" value="check1" id="ch1" form="contact_form">
<label for="ch1">check1</label>
<input type="checkbox" name="check" value="check2" checked="checked" id="ch2" form="contact_form">
<label for="ch2">check2</label>

<h4>Form action</h4>

<input type="submit" id="submit2" name="test1" value="SEND2" form="contact_form" />
<input type="reset" value="RESET" form="contact_form" />

jquery-html5-form-attr-polyfill.js

(function($) {
  /**
   * polyfill for html5 form attr
   */

  // detect if browser supports this
  var sampleElement = $('[form]').get(0);
  var isIE11 = !(window.ActiveXObject) && "ActiveXObject" in window;
  if (sampleElement && window.HTMLFormElement && sampleElement.form instanceof HTMLFormElement && !isIE11) {
    // browser supports it, no need to fix
    return;
  }

  /**
   * Append a field to a form
   *
   */
  $.fn.appendField = function(data) {
    // for form only
    if (!this.is('form')) return;

    // wrap data
    if (!$.isArray(data) && data.name && data.value) {
      data = [data];
    }

    var $form = this;

    // attach new params
    $.each(data, function(i, item) {
      $('<input/>')
        .attr('type', 'hidden')
        .attr('name', item.name)
        .val(item.value).appendTo($form);
    });

    return $form;
  };

  /**
   * Find all input fields with form attribute point to jQuery object
   * 
   */
  $('form[id]').submit(function(e) {
    // serialize data
    var data = $('[form='+ this.id + ']').serializeArray();
    // append data to form
    $(this).appendField(data);
  }).each(function() {
    var form = this,
      $fields = $('[form=' + this.id + ']');

    $fields.filter('button, input').filter('[type=reset],[type=submit]').click(function() {
      var type = this.type.toLowerCase();
      if (type === 'reset') {
        // reset form
        form.reset();
        // for elements outside form
        $fields.each(function() {
          this.value = this.defaultValue;
          this.checked = this.defaultChecked;
        }).filter('select').each(function() {
          $(this).find('option').each(function() {
            this.selected = this.defaultSelected;
          });
        });
      } else if (type.match(/^submit|image$/i)) {
        $(form).appendField({name: this.name, value: this.value}).submit();
      }
    });
  });


})(jQuery);