Sep
24
2011

Synchronous Input Population Using JavaScript

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" />

1 Comment + Add Comment

  • Thanks for the share! Very useful info, looking to communicate!

Leave a comment