form.submit is not a function - How to create and POST a form with (pure) Javascript in a Firefox extension

Question

I'm trying to create and send a form with pure Javascript in a Firefox extension. However, even with the most basic form, the browser console keeps saying:

TypeError: form.submit is not a function

I searched and read several posts on the subject but they didn't treat this particular issue. A common mistake is to have an input named "submit", but it is not the case here.

Here is my code, inspired from this great post JavaScript post request like a form submit :

// Create a form
var form = document.createElement("form");
form.action = "http://example.com";
form.method = "POST"

var hiddenField = document.createElement("input");
hiddenField.setAttribute("type", "submit");
hiddenField.setAttribute("name", "sub");
hiddenField.setAttribute("value", "send");
form.appendChild(hiddenField);

// Create a document
var doc = document.implementation.createDocument ('http://www.w3.org/1999/xhtml', 'html', null);
var body = document.createElementNS('http://www.w3.org/1999/xhtml', 'body');
body.appendChild(form);
doc.documentElement.appendChild(body);

// Call the form's submit method
form.submit();

I'm new to Javascript so it is likely that I'm doing a trivial mistake. Could anyone give me a clue on how to fix this ?

score 5 · Accepted Answer · answered Sep 30 '13 at 21:33

When you create a new element "form", you are creating it in the scope of the browser, hence you are creating a xul element. You would have to do it the way you create the "body" element:

var form = document.createElementNS('http://www.w3.org/1999/xhtml', 'form');

form.submit is not a function - How to create and POST a form with (pure) Javascript in a Firefox extension

1 Answers1