用于按钮元素的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不支持form或<input>元素的HTML5 <button>属性。

如果要将外部输入元素与表单相关联，可以将“阴影”复制为表单内的不可见输入字段，并将事件处理程序附加到表单的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

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

你可以在javascript中填充这个，或者移动input以便在相关表单中。这已经在其他地方得到了回答：https://stackoverflow.com/a/16694990/13019

Answer 4

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

由于所有项目都包含了jquery 100％:)你可以在外部或任何包含的js文件中定义文档就绪函数来捕获提交按钮点击外包形式通过捕获所有表单id从表单开始 - 所以它捕获不同页面上的表单不同的名称，所以你不必重复相同的jquery代码snipet

Answer 5

从@VoldemarasBirš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));
}