autoPopulate 0.1 - Automatically populate form fields using a bookmarklet


/ Published in: JavaScript
Save to your folder(s)

I\'m constantly testing forms over and over for one reason or another, and am fed up with making a typo and autocomplete not populating all the data, so I made this little snippet. It searches for form elements on the page (input, textarea and select) and using regular expressions, tries to match the field name and populate the data as best it can. There\'s also a generator so instead of the random test data I\'ve provided you can generate your own.\r\n\r\nDemo:\r\n[http://www.dom111.co.uk/files/autoPopulate/](http://www.dom111.co.uk/files/autoPopulate/)\r\n\r\nGenerator:\r\n[http://www.dom111.co.uk/files/autoPopulate/generate.html](http://www.dom111.co.uk/files/autoPopulate/generate.html)


Copy this code and paste it in your HTML
  1. (function() {
  2. var data = {
  3. // personal details
  4. 'forename': {
  5. 'expression': /^(delivery|billing|card)?_?(fore|first)_?name$/i,
  6. 'value': [
  7. 'Bob',
  8. 'Alice'
  9. ]
  10. },
  11. 'surname': {
  12. 'expression': /^(delivery|billing|card)?_?(sur|family|last)_?name$/i,
  13. 'value': [
  14. 'Tester',
  15. 'O\'Test' // test for quote acceptance
  16. ]
  17. },
  18. 'company': {
  19. 'expression': /^(delivery|billing|card)?_?(company|business|organisation)_?(name)?$/i,
  20. 'value': [
  21. 'Test Ltd.',
  22. 'Test O\'Sites Ltd.',
  23. 'Test "Testing" Ltd.'
  24. ]
  25. },
  26. 'email': {
  27. 'expression': /^(confirm)?_?email_?(address|confirm)?$/i,
  28. 'value': '[email protected]'
  29. },
  30.  
  31. // address details
  32. 'house_number': {
  33. 'expression': /^(delivery|billing|card)?_?(house|street|building)_?(num(ber)?|no)?$/i,
  34. 'value': '45'
  35. },
  36. 'address1': {
  37. 'expression': /^(delivery|billing|card)?_?address_?1$/i,
  38. 'value': [
  39. '45 Test Road',
  40. '"Test House", 45 Test Road',
  41. '\'Test House\', 45 Test Road'
  42. ]
  43. },
  44. 'address2': {
  45. 'expression': /^(delivery|billing|card)?_?address_?2$/i,
  46. 'value': 'Teston'
  47. },
  48. 'town': {
  49. 'expression': /^(delivery|billing|card)?_?(town|city|address_?3)$/i,
  50. 'value': 'Testville'
  51. },
  52. 'county': {
  53. 'expression': /^(delivery|billing|card)?_?(county|state|address_?4)$/i,
  54. 'value': 'Testshire'
  55. },
  56. 'postcode': {
  57. 'expression': /^(delivery|billing|card)?_?(post(al)?|zip)_?code$/i,
  58. 'value': [
  59. 'WR2 6NJ' // postcode anywhere test postcode - no charge for testing!
  60. ]
  61. },
  62. 'country': {
  63. 'expression': /^(delivery|billing|card)?_?country$/i,
  64. 'value': [
  65. 'United Kingdom',
  66. 'Great Britain',
  67. 'England',
  68. 'UK'
  69. ]
  70. },
  71.  
  72. // contact details
  73. 'phone': {
  74. 'expression': /^(delivery|billing|card)?_?((tele?)?phone|tel)_?(num(ber)?|no)?$/i,
  75. 'value': '01234 567 890'
  76. },
  77. 'mobile': {
  78. 'expression': /^mob(ile)?_?(num(ber)?|no)?$/i,
  79. 'value': '07777 123 456'
  80. },
  81. 'fax': {
  82. 'expression': /^(fax|facsimile)_?(num(ber)?|no)?$/i,
  83. 'value': '01234 567 891'
  84. },
  85.  
  86. // date of birth
  87. 'dob_day': {
  88. 'expression': /^d(a?te)?_?of?_?b(irth)?_?d(a?y)?$/i,
  89. 'value': 1
  90. },
  91. 'dob_month': {
  92. 'expression': /^d(a?te)?_?of?_?b(irth)?_?m((on)?th)?$/i,
  93. 'value': 1
  94. },
  95. 'dob_year': {
  96. 'expression': /^d(a?te)?_?of?_?b(irth)?_?y(ear|r)?$/i,
  97. 'value': 1980
  98. },
  99.  
  100. // card details
  101. 'card_number': {
  102. 'expression': /^(credit|debit)?_?card_?(num(ber)?|no)?$/i,
  103. 'value': '4929 0000 0000 6'
  104. },
  105. 'card_valid_month': {
  106. 'expression': /^(credit|debit)?_?(card)?_?(start|valid_?(from)?)_?month$/i,
  107. 'value': '01'
  108. },
  109. 'card_valid_year': {
  110. 'expression': /^(credit|debit)?_?(card)?_?(start|valid_?(from)?)_?year$/i,
  111. 'value': '2010'
  112. },
  113. 'card_expiry_month': {
  114. 'expression': /^(credit|debit)?_?(card)?_?expiry_?month$/i,
  115. 'value': '12'
  116. },
  117. 'card_expiry_year': {
  118. 'expression': /^(credit|debit)?_?(card)?_?expiry_?year$/i,
  119. 'value': '2015'
  120. },
  121. 'security_code': {
  122. 'expression': /^(credit|debit)?_?(card)?_?(verification|cv2|security)?_?code$/i,
  123. 'value': '123'
  124. },
  125.  
  126. // message/notes
  127. 'message': {
  128. 'expression': /^(message|(delivery|billing|card)?_?notes?|info(rmation)?|comments?)$/i,
  129. 'value': 'This is a test.'
  130. },
  131.  
  132. // concatenation
  133. 'name': {
  134. 'expression': /^(full|delivery|billing|card)?_?(name(_?on_?card)?|cardholder)$/i,
  135. 'combine': [
  136. 'forename',
  137. 'surname'
  138. ],
  139. 'separator': ' '
  140. },
  141. 'address': {
  142. 'expression': /^(delivery|billing|card)?_?address$/i,
  143. 'combine': [
  144. 'address1',
  145. 'address2',
  146. 'town'
  147. ],
  148. 'separator': ', '
  149. },
  150. 'dob': {
  151. 'expression': /^d(ate)?_?of?_?b(irth)?$/i,
  152. 'combine': [
  153. 'dob_day',
  154. 'dob_month',
  155. 'dob_year'
  156. ],
  157. 'separator': '/'
  158. },
  159. 'card_valid': {
  160. 'expression': /^(credit|debit)?_?(card)?_?(start|valid_?(from)?)y_?(da?te)?$/i,
  161. 'combine': [
  162. 'card_valid_month',
  163. 'card_valid_year'
  164. ],
  165. 'separator': ''
  166. },
  167. 'card_expiry': {
  168. 'expression': /^(credit|debit)?_?(card)?_?expiry_?(da?te)?$/i,
  169. 'combine': [
  170. 'card_expiry_month',
  171. 'card_expiry_year'
  172. ],
  173. 'separator': ''
  174. }
  175. };
  176.  
  177. var concatFields = function(values, separator, data) {
  178. var r = [];
  179.  
  180. for (var i = 0; i < values.length; i++) {
  181. if (values[i] in data) {
  182. var field = data[values[i]];
  183.  
  184. if ('value' in field) {
  185. var value = field.value;
  186.  
  187. if (typeof(value) == 'string') {
  188. if (value.length > 0) {
  189. r.push(value);
  190. }
  191.  
  192. } else if (value.length) {
  193. var key = Math.floor(Math.random() * value.length);
  194.  
  195. if (value[key].length > 0) {
  196. r.push(value[key]);
  197. }
  198. }
  199.  
  200. } else if ('combine' in field && 'separator' in field) {
  201. r.push(concatFields(field.combine, field.separator, data));
  202. }
  203. }
  204. }
  205.  
  206. return r.join(separator);
  207. }
  208.  
  209. if (document.querySelectorAll) {
  210. var elements = document.querySelectorAll('input, textarea, select');
  211.  
  212. } else {
  213. var elements = [];
  214.  
  215. elements = elements.concat(document.getElementsByTagName('input'), document.getElementsByTagName('textarea'), document.getElementsByTagName('select'));
  216. }
  217.  
  218. for (var i = 0; i < elements.length; i++) {
  219. var name = (elements[i].name ? elements[i].name : elements[i].id);
  220.  
  221. for (var key in data) {
  222. var field = data[key];
  223.  
  224. if (name.match(field.expression)) {
  225. var value = (('combine' in field && 'separator' in field) ? concatFields(field.combine, field.separator, data) : (('value' in field) ? field.value : false));
  226.  
  227. if (value !== false) {
  228. if (elements[i].tagName.toLowerCase() == 'select') {
  229. for (var j = 0; j < elements[i].options.length; j++) {
  230. if (typeof(value) == 'string' || typeof(value) == 'number') {
  231. if (elements[i].options[j].value == value || elements[i].options[j].text == value) {
  232. elements[i].selectedIndex = j;
  233.  
  234. break;
  235. }
  236.  
  237. } else if (value.length) {
  238. if (value.indexOf(elements[i].options[j].value) > -1 || value.indexOf(elements[i].options[j].text) > -1) {
  239. elements[i].selectedIndex = j;
  240.  
  241. break;
  242. }
  243. }
  244. }
  245.  
  246. } else if (elements[i].tagName.toLowerCase() == 'input' && (elements[i].type == 'checkbox' || elements[i].type == 'radio')) {
  247. if (elements[i].value == value) {
  248. elements[i].checked = true;
  249.  
  250. } else {
  251. elements[i].checked = false;
  252. }
  253.  
  254. } else {
  255. if (typeof(value) == 'string' || typeof(value) == 'number') {
  256. elements[i].value = value;
  257.  
  258. } else if (value.length) {
  259. elements[i].value = value[Math.floor(Math.random() * value.length)];
  260. }
  261. }
  262.  
  263. elements[i].blur();
  264. }
  265.  
  266. continue;
  267. }
  268. }
  269. }
  270. })();

URL: http://www.dom111.co.uk/blog/coding/autopopulate-0-1/249

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.