按钮元素的 HTML5 表单属性的 Internet Explorer 问题

Question

在 HTML5 中，有 form 属性。基本上

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

以上代码在 IE 中不起作用。 谁能帮我解决这个要求。

我使用以下 javascript 和 jQuery 提交表单，但我遇到了 Ajax 问题。 我的页面正在重新加载。

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

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

如何在我的页面不应该加载的地方提交我的表单。 我正在使用Anguler JS Ajax。

Answer 1

IE 尚不支持<input> 或<button> 元素的HTML5 form 属性。

如果要将外部输入元素与表单相关联，可以将“阴影”复制为表单内的不可见输入字段，并将事件处理程序附加到表单的 onsubmit 事件。当用户提交表单时，更新里面的值。

以下 polyfill（需要 jQuery）模拟该功能。它使带有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);

直播版：http://jsfiddle.net/hbxk4e61/

顺便说一句，您可以查看this page 来测试您的浏览器当前支持多少 HTML5 功能。例如，我使用的是 Chrome 31，它确实支持此属性。

Answer 2

嗯，IE基本上不支持输入表单属性，但是你可以使用javascript提交表单：

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

或 jQuery

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

Answer 3

<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>

由于所有项目都包含 100% 的 jquery :) 您可以在外部或任何包含的 js 文件中定义 on document ready 函数，通过捕获所有以 form 开头的表单 id 来捕获提交按钮单击的 outsiie 表单，因此它可以捕获表单具有不同名称的不同页面，因此您不必重复相同的 jquery 代码片段

Answer 4

据我所知，Internet Explorer 不（至少在 IE10 之前）不支持form 属性。

您可以在 javascript 中对此进行 polyfill，或者将 input 移动到相关表单中。不过，这已经在其他地方得到了回答：https://stackoverflow.com/a/16694990/13019

Answer 5

从@Voldemaras Birškys 的回答中，我改进了他的脚本以用作 polyfill，因此您仍然可以在没有按钮的情况下使用 form 属性，并且它会像 EDGE/IE 尊重 form 属性一样工作.

<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>

主要区别在于现在我们将form 包含在外部submit 按钮上。 此外，在click 处理程序中，我只是使用事件来获取target 元素并从id 发现目标表单的id。

:)

Answer 6

如果您通过 ajax 发送表单并使用 vanilla js，您可以添加带有“form”属性的输入，如下所示：

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));
}