Получить объект HTMLFormElement из Jquery submit ()

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);
}

проблема в том, что API для FormData принимаетHtmlFormElement, как описано здесь:

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

проблема в том, что я пытаюсь извлечь этот HTMLFormElement из события submit Jquery, но я не знаю как.

без 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.
}

так как мне получить HTMLFormElement в Jquery?

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 для поиска идентификатора, например $("#some_id"), после того как определено, что some_id является потенциально действительным идентификатором , он использует getElementById чтобы найти узел в любом случае .

Answer 2

Я не уверен, что понимаю вашу проблему.

Чтобы получить HTMLFormElement, просто используйте: document.getElementById("myform")

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

Или с помощью jQuery:

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

Answer 3

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

Answer 4

В самом событии значение this должно быть элементом формы. Кроме того, вы можете получить доступ к исходному элементу события через $(e.target) или $(e.originalTarget)