Skip to content

Instantly share code, notes, and snippets.

@prettycode
Last active December 16, 2015 07:49
Show Gist options
  • Save prettycode/5401705 to your computer and use it in GitHub Desktop.
Save prettycode/5401705 to your computer and use it in GitHub Desktop.
Use this function to submit an HTML form without actually having a form on the page. Instead of an existing form, pass the function a *flat* JavaScript object with the form values to submit. This is a synchronous operation; the browser loads the response as its new window location. Requests with "Content-Type: application/x-www-form-urlencoded".
var submitForm = function(config) {
if (!config) {
throw new Error();
}
else {
config.method = config.method || 'post';
config.data = config.data || {};
config.url = config.url || (function() {
throw new Error('Missing required `url` argument');
})();
}
this.createElement = function(tag, attrs) {
var el = document.createElement(tag);
Object.keys(attrs).forEach(function(key) {
el.setAttribute(key, attrs[key]);
});
return el;
};
var form = this.createElement('form', {
method: config.method,
action: config.url
});
function add(name, value) {
if (typeof value === 'undefined') {
return;
}
else if (value === null) {
value = 'null';
}
form.appendChild(this.createElement('input', {
type: 'hidden',
value: value,
name: name
}));
}
Object.keys(config.data).forEach(function (key) {
var value = config.data[key];
if (Array.isArray(value)) {
value.forEach(function (v) {
add(key, v);
});
}
else if (Object.prototype.toString.call(value) === '[object Object]') {
throw new TypeError('`data` members cannot be objects.');
}
else {
add(key, value);
}
});
form.submit();
};
var url = 'http://www.google.com';
// Request body: datetime=1365811679443&guids=C20H32O2&guids=C43H66N1
submitForm({
url: url,
data: {
datetime: Date.now(),
guids: [
'C20H32O2',
'C43H66N1'
]
}
});
// Request body: 0=C20H32O2&1=false&3=null&4=Fri+Apr+12+2013+17%3A21%3A33+GMT-0700+%28Pacific+Daylight+Time%29&5=1
submitForm({
url: url,
data: [
'C20H32O2',
false,
undefined,
null,
new Date(),
1
]
});
// Empty request body
submitForm({
url: url,
data: {}
});
// Empty request body
submitForm({
url: url
});
// intentionally throws TypeError
submitForm({
url: url,
data: {
winner: {
id: 0
}
}
});
// intentionally throws Error
submitForm({
url: undefined,
data: {
custId: 0
}
});
// intentionally throws Error
submitForm(undefined);
// GET http://www.google.com/?datetime=1366211074394&guids=C20H32O2&guids=C43H66N1 with no request body
submitForm({
url: url,
method: 'get',
data: {
datetime: Date.now(),
guids: [
'C20H32O2',
'C43H66N1'
]
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment