在HTML5中,有form属性.基本上
<form id="myform" method="get" action="something.jsp">
<input type="text" name="name" />
</form>
<input type="submit" form="myform" />
我使用了以下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,它确实支持此属性.
