jquery – 用于按钮元素的HTML5表单属性的Internet Explorer问题

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

解决方法

IE不支持< input>的HTML5表单属性或者< button>元素呢.

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

以下polyfill(需要jQuery)模拟该功能.它使具有表单属性的输入元素表现得像它们在表单中：

(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,它确实支持此属性.

jquery – 用于按钮元素的HTML5表单属性的Internet Explorer问题

解决方法

猜你在找的jQuery相关文章