Question

所以我有这个片段来捕获提交：

$(function(){
    $('#xhr2_form').submit(function(e){
        e.preventDefault();
        sendForm();
    });
});

和此代码段应用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);
}

问题是FormData的api接受了HtmlFormElement，如下所示：

http://dev.w3.org/2006/webapi/XMLHttpRequest-2/#the-formdata-interface

问题是我正在尝试从Jquery的submit事件中检索HTMLFormElement，但我不知道如何。

没有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.
}

那么如何在Jquery中获取HTMLFormElement？

Answer 1

问题只是你提供的是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]);

  // ...
}

你也可以使用.get检索它（不要与$.get混淆），如下所示：

$("#xhr2_form").get(0);  // or myForm.get(0);

另外，作为旁注，当您使用jQuery搜索ID（例如$("#some_id")）后，确定some_id is a potentially valid ID后，uses getElementById to find the node anyway。

Answer 2

我不确定你的问题。

要获取HTMLFormElement，只需使用： document.getElementById("myform")

alert(document.getElementById("myform")) ; // Return HTMLFormElement

或者使用jQuery：

alert($("#myform")[0]);  // Return HTMLFormElement

Answer 3

在事件本身中，this的值应该是表单元素。或者，您可以通过$(e.target)或$(e.originalTarget)

访问活动的原始元素

Answer 4

$(function(){
    $('#xhr2_form').submit(function(e){
        e.preventDefault();
        sendForm($(this).parents('form'));
    });
});

从Jquery submit（）获取HTMLFormElement对象

4 个答案: