Skip to content

Instantly share code, notes, and snippets.

@iamvanja
Created February 1, 2017 02:16
Show Gist options
  • Save iamvanja/5ad3d4500b83502586c10b1ff4926ade to your computer and use it in GitHub Desktop.
Save iamvanja/5ad3d4500b83502586c10b1ff4926ade to your computer and use it in GitHub Desktop.
Bookmarklet for form pre-filling with customizable email address and ability to add random part
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
var genBtn = document.getElementsByName("gen")[0];
var emailLink = document.getElementById("email-link");
genBtn.addEventListener("click", function() {
var email = document.getElementsByName("email")[0].value;
var href = emailLink.getAttribute("href");
if(email.trim().length ===0 ) {
alert("Hold your horses! You need to fill email!");
}
else{
emailLink.setAttribute("href", href.replace("{email}", email));
emailLink.style.display="block";
}
}, false);
});
</script>
</head>
<body>
Enter your email, add - {random} placeholder to let script handle random part:
<br>
<input name="email" type="email" size="50" placeholder="myemail_{random}@domain.com" value="">
<button name="gen">Generate personal bookmarklet!</button>
<br>
<br>
<a id="email-link" style="display: none" href="javascript:
(function(d) {
var body = d.getElementsByTagName('body')[0],
script = d.createElement('script');
script.src = '//somerver.com/prefillFormPersonal.js';
script.setAttribute('data-email', '{email}');
body.appendChild(script);
}(window.document));
">Personal Prefill forms</a>
</body>
</html>
(function(win, doc, $) {
"use strict";
// Don't run script if jQuery isn't loaded
if (typeof win.jQuery === "undefined") {
console.log("no jQuery");
return;
}
var data, fillForm, FormData, len, _rand;
// I like Chris's (http://chriscoyier.net/) randomize function. Lets use it here.
_rand = function(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
};
var getScriptEmail = (function() {
var scripts = document.getElementsByTagName('script');
var index = scripts.length - 1;
var myScript = scripts[index];
return function() { return myScript.getAttribute("data-email"); };
})();
// Load FakerJS library
$.getScript("//cdnjs.cloudflare.com/ajax/libs/Faker/0.7.2/MinFaker.js")
.done(function() {
fillForm();
})
.fail(function() {
win.console.error("ERROR: FakerJS not loaded!");
});
/*========== CREATE DATA OBJECT ==========*/
FormData = function(faker) {
this.faker = faker;
this.randomWord = faker.Internet.domainWord();
this.firstname = faker.Name.firstName() + "_fake";
this.lastname = faker.Name.lastName() + "_fake";
this.address1 = faker.Address.streetAddress() + "_fake";
this.city = faker.Address.city() + "_fake";
this.zip = faker.Address.zipCode() + "_fake";
this.phone = _rand(1000, 120000);
this.cardNo = "4000000000000010";
this.cvv = _rand(100,999);
};
FormData.prototype.randomizeSelect = function(el) {
var $el = $(el);
len = $el.find("option").length - 1;
$el.children("option")
.prop("selected", false)
.eq( _rand( 1,len + 1 ) )
.prop("selected", true);
console.log("$el", $el);
$el.trigger("change");
};
FormData.prototype.randomizeParagraph = function(el) {
$(el).val(this.faker.Lorem.sentence(5));
};
FormData.prototype.randomizeEmail = function(el) {
var email = getScriptEmail();
var random = this.randomWord + _rand( 1, 10000 );
$(el).val(email.replace(/{RANDOM}/gi, random));
// $(el).val("joanne.choi_" + this.randomWord + _rand( 1, 10000 ) + "[email protected]");
};
/*========== FILL IN THE FORM ==========*/
fillForm = function() {
data = new FormData(win.Faker);
$("#firstname, .firstname").val(data.firstname);
$("#lastname, .lastname").val(data.lastname);
$("#address, .address").val(data.address1);
$("#city, .city").val(data.city);
$("#state, .state").val(data.state);
$("#zip, .zip").val(data.zip);
$("#phone, .phone").val(data.phone);
data.randomizeEmail($("#email, .email"));
data.randomizeSelect($("#statelist, .statelist"));
data.randomizeSelect($("#countrylist, .countrylist"));
$("#cardNo").val(data.cardNo);
data.randomizeSelect($("#cardExpiryMonth"));
data.randomizeSelect($("#cardExpiryYear"));
$("#cardSecurityCode").val(data.cvv);
$("#creditCardFullDate").val( $("#cardExpiryMonth").val() + "/" + $("#cardExpiryYear").val() );
// Randomize all textareas
// $("textarea").each(function() {
// data.randomizeParagraph(this);
// });
// Randomize all emails
// $("input[type=\"email\"").each(function() {
// data.randomizeEmail(this);
// });
};
}(window, window.document, window.jQuery));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment