Premraj Premraj - 3 months ago 48
jQuery Question

Internet Explorer issue with HTML5 form attribute for button element

in HTML5, there is the form attribute. Basically

<form id="myform" method="get" action="something.jsp">
<input type="text" name="name" />
</form>
<input type="submit" form="myform" />


the above code is not working in IE.
Can any one help me how to solve this requirement.

I've used the following javascript and jQuery to submit the form, but I facing the Ajax issue.
where my page is reloading.

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

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


How can I submit my form where my page should not load.
I am using Anguler JS Ajax.

Answer

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.

Chrome currently supports the feature