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

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:

the problem is I'm trying to retrieve that HTMLFormElement from the submit event of Jquery, but I don't know how.

without JS, this is how it's done:

<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?

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

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:

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.

without JS, this is how it's done:

<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?

• javascript
• jquery
• xmlhttprequest

• Just a hint, jQuery has built in support for getting form data from a form like so: $('#id_of_form').serialize() <-- text in querystring-format. This makes it so you can reduce your code a lot. – Alxandr Commented Aug 21, 2011 at 2:33

4 Answers 4

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_form on the page) will give you the form element you're looking for.

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:

$("#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_id is a potentially valid ID, it uses getElementById to find the node anyway.

I not sure to understand your problem.

To get the HTMLFormElement, simply use : document.getElementById("myform")

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

Or with jQuery :

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

In the event itself, the value of this should be the form element. Alternately, you can access the event's original element via $(e.target) or $(e.originalTarget)

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