HTML5中的按钮元素

Question

的HTML5表单属性的Internet Explorer问题存在表单属性。基本上

<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不支持HTML5 form属性为<input>或<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

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

你可以用javascript填充它，或者将input移到相关表单中。这已经在别处回答，但：https://stackoverflow.com/a/16694990/13019

Answer 3

嗯，IE基本不支持输入表格属性，但你可以使用JavaScript来提交表单：

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

或jQuery的

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

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文件中定义文档就绪函数来捕获点击提交按钮siie form通过捕获所有形式的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。

:)