Pre-Populate Forms that Are Hosted on Other Websites

Lately, I've been more involved with submitting content to other organizations' websites. Getting indexed on those websites helps make the content more widely available. Since the information being submitted is already in a database or doesn't change from submission to submission, it would be nice if I didn't need to re-type or copy/paste everything. Luckily, there is a quicker way.

Background

Populating someone else's form requires we know a little bit about how it's coded. Knowing what attributes are used in the open <form> tag helps us target the form, for example. We also need to determine what fields to populate and how those fields are named. This information improves the efficiency of the JavaScript snippet which does the legwork.

Example Snippet

I regularly submit content to a transportation-related database called TRID. Digging through the source code, we can see the following <form> tag:

<form method="post" action="/submit.aspx" id="ctl00" class="mailForm">

Since it uses an id attribute, the form can be selected with JavaScript's getElementByID() function.

javascript:
var submitForm = document.getElementById('ctl00');

The "submitForm" variable now references the form and provides access its fields. To populate the Full Name and Organization fields, which are named "inputName" and "inputOrganization" respectively, add the following code:

javascript:
var submitForm = document.getElementById('ctl00');
submitForm.inputName.value         = 'Your Name';
submitForm.inputOrganization.value = 'Your Organization';

From here you should be able to write the code to populate the other fields. For now let's see the code in action.

Executing the JavaScript

Now you may be asking how we're going to execute JavaScript on a page we don't own. Well, that's where Google Chrome comes in. We just need to

  • Copy the JavaScript snippet
  • Visit the form using Google Chrome
  • Right-click the page
  • Click Inspect element
  • In the Developer Tools window, click Console (see Figure 1)
  • Paste the JavaScript snippet in the console window and hit enter on the keyboard
  • Verify that the form is populated as expected
Chrome screenshot of the Console tab
Figure 1. Console Tab

Conclusion

If your content is stored in a database, the submission process could be streamlined even further. You could, for example, create a PHP script (or whatever language you use) that generates the JavaScript snippet for you based on the information stored in the database. The snippets would need to be displayed somewhere you can access them to copy and paste into Chrome.

One shortfall of this solution is that it doesn't work as well for a back-log of information. If you have hundreds of records to submit, they'll still need to be entered one record at a time. The JavaScript snippet will be faster than entering everything by hand, but it's going to be tedious. If you have any suggestions on a way around this limitation, please let me know in the comments section below.

0 Comments

There are currently no comments.

Leave a Comment