Synchronous Input Population Using JavaScript

An article by admin    1 Comment

Working with code can often be tedious, and frequently requires programmers to continually reference functions or other sets of code that exists on different pages.  For example:

As a relative newbie to wordpress, when creating or modifying files I spend ~70% of my development time looking through files for correct/applicable function usage.  If I wish to display an option to edit a post in a template, I must use “edit_post_link(‘edit’, ‘<p>’, ‘</p>’);”, however, the chance of me having used that frequently enough to just key it out is about 0%.

I say BOOOOOOOO!

I recently completed building a framework that allows me to create websites with just a few clicks, complete with administrator page creation and modification.  Accompanying this framework is an exhaustive set of functions that allow me to easily do everything from outputting a search form to creating enormous forms, validating the data, and inserting the data in a database.

Even though I coded these functions, there are A LOT of them, and recalling their usage is unlikely.

So I use synchronous input population using JavaScript (in the form of a select menu rather than text input) to simply select from a long list of functions, then click, copy, and paste the necessary code to call those functions.

When you type into the first box, the “onKeyUp” handler calls a delightfully simple function which places the value from the first text input into the second text input.

The Script:

<script type="text/javascript">
function insert_val(new_value)
{
document.getElementById('function_paste').value=new_value;
}
</script>

The first input box:

<input id="testtext" onkeyup="insert_val(this.value);" type="text" />

And the input box which receives the value:

<input id="function_paste" type="text" value="I am an input box" />