Posted By

dom111 on 09/15/10

Tagged

Versions (?)

Last Edited at 09/15/10 07:42pm

Statistics

Viewed 906 times

Favorited by 1 user(s)

Related snippets

autoPopulate 0.1 - Automatically populate form fields using a bookmarklet

/ Published in: JavaScript

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)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML

(function() {
  var data = {
    // personal details
  	'forename': {
  		'expression': /^(delivery|billing|card)?_?(fore|first)_?name$/i,
  		'value': [
  		  'Bob',
  		  'Alice'
  		]
  	},
  	'surname': {
  		'expression': /^(delivery|billing|card)?_?(sur|family|last)_?name$/i,
  		'value': [
  		  'Tester',
  		  'O\'Test' // test for quote acceptance
  		]
  	},
  	'company': {
  	  'expression': /^(delivery|billing|card)?_?(company|business|organisation)_?(name)?$/i,
  	  'value': [
  	    'Test Ltd.',
  	    'Test O\'Sites Ltd.',
  	    'Test "Testing" Ltd.'
  	  ]
  	},
  	'email': {
  		'expression': /^(confirm)?_?email_?(address|confirm)?$/i,
  		'value': '[email protected]'
  	},
 
  	// address details
  	'house_number': {
			'expression': /^(delivery|billing|card)?_?(house|street|building)_?(num(ber)?|no)?$/i,
  		'value': '45'
  	},
  	'address1': {
  		'expression': /^(delivery|billing|card)?_?address_?1$/i,
  		'value': [
  		  '45 Test Road',
  		  '"Test House", 45 Test Road',
  		  '\'Test House\', 45 Test Road'
  		]
  	},
  	'address2': {
  		'expression': /^(delivery|billing|card)?_?address_?2$/i,
  		'value': 'Teston'
  	},
  	'town': {
  		'expression': /^(delivery|billing|card)?_?(town|city|address_?3)$/i,
  		'value': 'Testville'
  	},
  	'county': {
  		'expression': /^(delivery|billing|card)?_?(county|state|address_?4)$/i,
  		'value': 'Testshire'
  	},
  	'postcode': {
  		'expression': /^(delivery|billing|card)?_?(post(al)?|zip)_?code$/i,
  		'value': [
  		  'WR2 6NJ' // postcode anywhere test postcode - no charge for testing!
  		]
  	},
    'country': {
      'expression': /^(delivery|billing|card)?_?country$/i,
      'value': [
        'United Kingdom',
        'Great Britain',
        'England',
        'UK'
      ]
    },
 
    // contact details
		'phone': {
			'expression': /^(delivery|billing|card)?_?((tele?)?phone|tel)_?(num(ber)?|no)?$/i,
			'value': '01234 567 890'
		},
		'mobile': {
			'expression': /^mob(ile)?_?(num(ber)?|no)?$/i,
			'value': '07777 123 456'
		},
		'fax': {
			'expression': /^(fax|facsimile)_?(num(ber)?|no)?$/i,
			'value': '01234 567 891'
		},
 
    // date of birth
    'dob_day': {
      'expression': /^d(a?te)?_?of?_?b(irth)?_?d(a?y)?$/i,
      'value': 1
    },
    'dob_month': {
      'expression': /^d(a?te)?_?of?_?b(irth)?_?m((on)?th)?$/i,
      'value': 1
    },
    'dob_year': {
      'expression': /^d(a?te)?_?of?_?b(irth)?_?y(ear|r)?$/i,
      'value': 1980
    },
 
    // card details
    'card_number': {
      'expression': /^(credit|debit)?_?card_?(num(ber)?|no)?$/i,
      'value': '4929 0000 0000 6'
    },
    'card_valid_month': {
      'expression': /^(credit|debit)?_?(card)?_?(start|valid_?(from)?)_?month$/i,
      'value': '01'
    },
    'card_valid_year': {
      'expression': /^(credit|debit)?_?(card)?_?(start|valid_?(from)?)_?year$/i,
      'value': '2010'
    },
    'card_expiry_month': {
      'expression': /^(credit|debit)?_?(card)?_?expiry_?month$/i,
      'value': '12'
    },
    'card_expiry_year': {
      'expression': /^(credit|debit)?_?(card)?_?expiry_?year$/i,
      'value': '2015'
    },
    'security_code': {
      'expression': /^(credit|debit)?_?(card)?_?(verification|cv2|security)?_?code$/i,
      'value': '123'
    },
 
    // message/notes
    'message': {
      'expression': /^(message|(delivery|billing|card)?_?notes?|info(rmation)?|comments?)$/i,
      'value': 'This is a test.'
    },
 
    // concatenation
    'name': {
      'expression': /^(full|delivery|billing|card)?_?(name(_?on_?card)?|cardholder)$/i,
      'combine': [
        'forename',
        'surname'
      ],
      'separator': ' '
    },
    'address': {
      'expression': /^(delivery|billing|card)?_?address$/i,
      'combine': [
        'address1',
        'address2',
        'town'
      ],
      'separator': ', '
    },
    'dob': {
      'expression': /^d(ate)?_?of?_?b(irth)?$/i,
      'combine': [
        'dob_day',
        'dob_month',
        'dob_year'
      ],
      'separator': '/'
    },
    'card_valid': {
      'expression': /^(credit|debit)?_?(card)?_?(start|valid_?(from)?)y_?(da?te)?$/i,
      'combine': [
        'card_valid_month',
        'card_valid_year'
      ],
      'separator': ''
    },
    'card_expiry': {
      'expression': /^(credit|debit)?_?(card)?_?expiry_?(da?te)?$/i,
      'combine': [
        'card_expiry_month',
        'card_expiry_year'
      ],
      'separator': ''
    }
  };
 
  var concatFields = function(values, separator, data) {
    var r = [];
 
    for (var i = 0; i < values.length; i++) {
      if (values[i] in data) {
        var field = data[values[i]];
 
        if ('value' in field) {
          var value = field.value;
 
          if (typeof(value) == 'string') {
            if (value.length > 0) {
              r.push(value);
            }
 
          } else if (value.length) {
            var key = Math.floor(Math.random() * value.length);
 
            if (value[key].length > 0) {
              r.push(value[key]);
            }
          }
 
        } else if ('combine' in field && 'separator' in field) {
          r.push(concatFields(field.combine, field.separator, data));
        }
      }
    }
 
    return r.join(separator);
  }
 
  if (document.querySelectorAll) {
    var elements = document.querySelectorAll('input, textarea, select');
 
  } else {
    var elements = [];
 
    elements = elements.concat(document.getElementsByTagName('input'), document.getElementsByTagName('textarea'), document.getElementsByTagName('select'));
  }
 
  for (var i = 0; i < elements.length; i++) {
    var name = (elements[i].name ? elements[i].name : elements[i].id);
 
    for (var key in data) {
      var field = data[key];
 
      if (name.match(field.expression)) {
        var value = (('combine' in field && 'separator' in field) ? concatFields(field.combine, field.separator, data) : (('value' in field) ? field.value : false));
 
        if (value !== false) {
          if (elements[i].tagName.toLowerCase() == 'select') {
            for (var j = 0; j < elements[i].options.length; j++) {
              if (typeof(value) == 'string' || typeof(value) == 'number') {
                if (elements[i].options[j].value == value || elements[i].options[j].text == value) {
                  elements[i].selectedIndex = j;
 
                  break;
                }
 
              } else if (value.length) {
                if (value.indexOf(elements[i].options[j].value) > -1 || value.indexOf(elements[i].options[j].text) > -1) {
                  elements[i].selectedIndex = j;
 
                  break;
                }
              }
            }
 
          } else if (elements[i].tagName.toLowerCase() == 'input' && (elements[i].type == 'checkbox' || elements[i].type == 'radio')) {
            if (elements[i].value == value) {
              elements[i].checked = true;
 
            } else {
              elements[i].checked = false;
            }
 
          } else {
            if (typeof(value) == 'string' || typeof(value) == 'number') {
              elements[i].value = value;
 
            } else if (value.length) {
              elements[i].value = value[Math.floor(Math.random() * value.length)];
            }
          }
 
          elements[i].blur();
        }
 
        continue;
      }
    }
  }
})();