javascript 从 Jquery submit() 获取 HTMLFormElement 对象
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6577224/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get HTMLFormElement object from Jquery submit()
提问by yretuta
So I have this snippet which captures the submit:
所以我有这个捕获提交的片段：
$(function(){
$('#xhr2_form').submit(function(e){
e.preventDefault();
sendForm();
});
});
and this snippet to apply the XHR 2 form submission
和这个片段来应用 XHR 2 表单提交
var xhr = new XMLHttpRequest();
function sendForm() {
var myForm = $('#xhr2_form');
// get fields
var values = {};
$.each($('#xhr2_form').serializeArray(), function(i, field){
values[field.name] = $(this).val();
});
// append data
var formData = new FormData(myForm);
formData.append('type',values['type']);
xhr.open('POST', '/test/xhr2', true);
xhr.onload = function(e){};
xhr.send(formData);
}
the problem is the api for FormData accepts an HtmlFormElement as documented here:
问题是 FormData 的 api 接受了一个 HtmlFormElement，如此处所述：
http://dev.w3.org/2006/webapi/XMLHttpRequest-2/#the-formdata-interface
http://dev.w3.org/2006/webapi/XMLHttpRequest-2/#the-formdata-interface
the problem is I'm trying to retrieve that HTMLFormElement from the submit event of Jquery, but I don't know how.
问题是我试图从 Jquery 的提交事件中检索该 HTMLFormElement，但我不知道如何。
without JS, this is how it's done:
没有 JS，它是这样完成的：
<form id="myform" name="myform" action="/server">
<input type="text" name="username" value="johndoe">
<input type="number" name="id" value="123456">
<input type="submit" onclick="return sendForm(this.form);">
</form>
function sendForm(form) {
var formData = new FormData(form);
formData.append('secret_token', '1234567890'); // Append extra data before send.
var xhr = new XMLHttpRequest();
xhr.open('POST', form.action, true);
xhr.onload = function(e) { ... };
xhr.send(formData);
return false; // Prevent page from submitting.
}
so how do I get the HTMLFormElement in Jquery?
那么如何在 Jquery 中获取 HTMLFormElement 呢？
回答by brymck
Is the issue just that you're providing a jQuery object instead of a DOM node? If that's the case, you should be fine just retrieving the first element from the object, which (unless you have something invalid like another xhr2_formon the page) will give you the form element you're looking for.
问题只是您提供的是 jQuery 对象而不是 DOM 节点吗？如果是这种情况，您只需从对象中检索第一个元素就可以了，这（除非您xhr2_form在页面上有类似另一个无效的内容）将为您提供您正在寻找的表单元素。
function sendForm() {
var myForm = $('#xhr2_form'); // this is a jQuery object
// ...
/*
* myForm is a jQuery object
* myForm[0] is the first element of the object, in this case whichever
* node has the ID "xhr2_form"
*/
var formData = new FormData(myForm[0]);
// ...
}
You could also retrieve it using .get(not to be confused with $.get) like so:
您也可以使用.get（不要与 混淆$.get）来检索它，如下所示：
$("#xhr2_form").get(0); // or myForm.get(0);
Also, as a side note, when you use jQuery to search for an ID, like $("#some_id"), after it's determined that some_idis a potentially valid ID, it uses getElementByIdto find the node anyway.
此外，作为旁注，当您使用 jQuery 搜索 ID 时，例如$("#some_id")，在确定该some_idID 是潜在有效 ID 之后，它仍然会使用getElementById它来查找节点。
回答by Julien Lafont
I not sure to understand your problem.
我不确定理解你的问题。
To get the HTMLFormElement, simply use :
document.getElementById("myform")
要获取 HTMLFormElement，只需使用：
document.getElementById("myform")
alert(document.getElementById("myform")) ; // Return HTMLFormElement
Or with jQuery :
或者使用 jQuery ：
alert($("#myform")[0]); // Return HTMLFormElement
回答by Stephen
In the event itself, the value of thisshould be the form element. Alternately, you can access the event's original element via $(e.target)or $(e.originalTarget)
在事件本身中， 的值this应该是表单元素。或者，您可以通过$(e.target)或访问事件的原始元素$(e.originalTarget)
回答by Bene
$(function(){
$('#xhr2_form').submit(function(e){
e.preventDefault();
sendForm($(this).parents('form'));
});
});
