Internet Explorer issue with HTML5 form attribute for button element

Question

in HTML5, there is the form attribute. Basically

Answer 1

<form id="form-any-name">
   <input type="button" value="Submit" class="myButton" />
</form>
<button type="submit">Submit</button>

<script type="text/javascript">
    $(document).ready(function() {
        $('button[type=\'submit\']').on('click', function() {
            $("form[id*='form-']").submit();
        });
    });
</script>

Since all projects has included jquery 100% :) you can define in external or any included js file the on document ready function to catch the submit button clicked outsiie form by catching all forms id starting with form- so it catch forms on different page with different names so you do not have to repeat the very same jquery code snipet

Answer 2

As far as I can tell, Internet Explorer does not (up to IE10, at least) support the form attribute.

You can either polyfill this in javascript, or move the input to sit inside the relevant form. This has already been answered elsewhere though: https://stackoverflow.com/a/16694990/13019

Answer 3

If you send form via ajax and use vanilla js, you can add inputs with "form" attribute like below:

function sendViaAjax(event, callback) {
    event.preventDefault();
    var form = event.target;
    var formId = form.id;
    var url = form.getAttribute('action');
    var method = form.getAttribute('method');
    var data = new FormData(form);
    if(isInternetExplorer() && formId) {
        var formInputs = document.querySelectorAll('input[form="'+formId+'"], textarea[form="'+formId+'"], select[form="'+formId+'"]');
        [].forEach.call(formInputs, function (el) {
            var inputName = el.getAttribute('name');
            data.append(inputName, el.value);
        });
    }
    var xhr = new XMLHttpRequest();
    xhr.open(method, url);
    xhr.onload = function () {
        // something
    };
    xhr.onerror = function () {
       // something
    };
    xhr.send(data);
}

function isInternetExplorer() {
    return (navigator.appName == 'Microsoft Internet Explorer' ||
        !!(navigator.userAgent.match(/Trident/) ||
            navigator.userAgent.match(/rv:11/)) ||
        (typeof $.browser !== "undefined" && $.browser.msie == 1));
}

Answer 4

IE does not support HTML5 form attribute for <input> or <button> element yet.

If you want to associate an outer input element with the form, you can duplicate a "shadow" as an invisible input field inside your form, and attach an event handler to the form's onsubmit event. When user submits the form, update the value inside.

The following polyfill (requires jQuery) emulates the feature. It makes the input elements with form attribute act like they are inside the form:

(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) {
    var $form = $(this);
    // serialize data
    var data = $('[form='+ $form.attr('id') + ']').serializeArray();
    // append data to form
    $form.appendField(data);
  }).each(function() {
    var form = this,
      $form = $(form),
      $fields = $('[form=' + $form.attr('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);

Live version: http://jsfiddle.net/hbxk4e61/

By the way, you can check this page to test how many HTML5 features your browser currently supports. For example, I'm using Chrome 31 and it does support this attribute.

Answer 5

Well, IE basically does not support form attribute in input, but you could use javascript to submit your form:

document.getElementById("myForm").submit();

or jQuery

$("#myForm").submit();

Answer 6

From @Voldemaras Birškys' answer, I've improved his script to work as a polyfill so you can still have the form attribute no your button and it will work as if EDGE/IE would respect the form attribute.

<form id="form-any-name">
   <input type="button" value="Submit" class="myButton" />
</form>
<button type="submit" form="form-any-name">Submit</button>

<script type="text/javascript">
$(document).ready(function() {
    $('button[type=\'submit\']').click(function (e) {
        var formId = $(e.target).attr("form");
        $("form[id*="+formId+"]").submit();
    });
});
</script>

The main difference is that now we include form on the external submit button. Also, inside the click handler I just use the event to get the target element and from id discover the id of the target form.

:)