Internet Explorer问题与按钮元素的HTML5表单属性 [英] Internet Explorer issue with HTML5 form attribute for button element

问题描述

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

 < form id =myformmethod =getaction =something.jsp> 
< input type =textname =name/> 
< / form> 
< input type =submitform =myform/> 
  

以上代码在IE中不起作用。
任何人都可以帮助我解决这个问题。

我用下面的javascript和jQuery来提交表单，但是我面对Ajax问题。
我的页面正在重新加载。

  document.getElementById（myForm）。submit（）; 
 
 $（＃myForm）。submit（）; 
  

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

解决方案

IE不支持HTML5 < input> 或<按钮> 元素的code>属性。

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

以下polyfill（需要jQuery）模拟该功能。它使 form 属性的输入元素像表单内一样行事：



 <$ c如果浏览器支持这个$ b $（$）函数（$）{
 / ** 
 * polyfill for html5 form attr 
 * / 
 
 b var sampleElement = $（'[form]'）。get（0）; 
 var isIE11 =！（window.ActiveXObject）&&&"ActiveXObject在窗口中; 
 if（sampleElement& & window.HTMLFormElement&&& sampleElement.form instanceof HTMLFormElement&&！isIE11）{
 //浏览器支持它，无需修复
返回; 
} 
 
 / ** 
 *在表格中追加一个字段
 * 
 * / 
 $ .fn.appendField = function（data）{
 / / for form仅
 if（！this.is（'form'））return; 
 
 //包装数据
 if（！$。isArray（data）&& amp ; data.name&& data.value）{
 data = [data]; 
} 
 
 var $ form = this; 
 
 //附加新的参数
 $ .ea ch（数据，函数（i，item）{
 $（'< input />'）
 .attr（'type'，'hidden'）
 .attr（'name '，item.name）
 .val（item.value）.appendTo（$ form）; 
}）; 
 
 return $ form; 
}; 
 $ b $ ** 
 *找到所有带有form属性的输入字段指向jQuery对象
 * 
 * / 
 $（'form [id]' ）.submit（function（e）{
 var $ form = $（this）; 
 //序列化数据
 var data = $（'[form ='+ $ form.attr（ '）+']'）。serializeArray（）; 
 //追加数据以形成
 $ form.appendField（data）; 
}）。each（function（）{
 var form = this，
 $ form = $（form），
 $ fields = $（'[form ='+ $ form.attr（'id'）+']'）; 
 $ b $ fields.filter（'button，input'）。filter（'[type = reset]，[type = submit]'）。click（function（）{
 var type = this.type.toLowerCase（）; 
 if（type ==='reset'）{
 // reset form 
 form.reset（）; 
 //对于外部元素形式
 $ fields.each（function（）{
 this.value = this.defaultValue; 
 this.checked = this.defaultChecked; 
}）。filter（'select' ）。每个（functi on（）{
 $（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/

顺便说一句，您可以检查此页面来测试您的浏览器当前支持的HTML5功能的数量。例如，我使用的是Chrome 31，它确实支持此属性。

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.

解决方案

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.

这篇关于Internet Explorer问题与按钮元素的HTML5表单属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！