View Full Version : Creating a code Generator in Javascript - is it possible?

02-21-2007, 07:42 PM
I am fairly new to javascript coding, but have managed to do a few fairly neat things with it.

I have seen quite a few code generators over time where you are presented with a form, you fill in the various fields in the forum, and then click a Generate Code button, and the results show up in a textarea.

The code is then copied from the textarea and pasted into notepad or directly into an HTML document.

So, you may have some code that you want to generate that looks like this:

In this particular case there is 1 .js files that go to the root of the site that requires no editing.

Then there is 1 .css file that may require changes depending on user preferences. Things like margin, width, height, border and so on.

Then there is a section that goes into the Head of the document that requires no changes.

Then there is something like this would go inside a division"

<a href="address to a page" target="an iframe name"><img src="path to thumbnails/thumbnail name" border="1"></a>
Note that the above code has variable that would change based on user preferences. The way the code is presently structured it is not done as an array, however, this would substantially shorten the code depending on how many thumbnails are in it.

And finally there is another iframe section that would go inside a couple of a division. It relates to a second iframe.

Before I go any further with this, I just wanted to know if it's possible to do with javascript or is it best to do in another language.

The variables don't have to be kept in a database. What I am thinking is that the user would simply open up the HTML page, enter the data, generate the code, copy/paste and test, without closing the page. If there is a problem, he/she would simply go back in and change a variable or 2 and re-generate the code.

Thanks, Loren

02-21-2007, 09:56 PM
Yes javvascript can generate code. Simplest solution is to include a textarea below the submit button and write the generated code there to make it easy to copy and paste. Where the generated code is producing a visual effect you might also consider adding an empty div and write the generated code to the innerHTML of that div as well as to the textarea so that the person filling out the form can both get the generated code easily and see what the generated code looks like.

As an example I have such a code generator at http://javascript.about.com/library/blcalgen.htm that generates the HTML for a calendar for a specified month and year where you can also choose which day the week starts on.

02-21-2007, 10:54 PM
Thank's, Stephen

That is exactly what I am wanting to achieve.

BTW, I have seen many of your posts in the past while (google) searching javascript solutions. Quite impressive, I must say!

I see your call to the javascript "setCal(this.form)", but I guess you have the function in a .js file in a folder somewhere.

That is similar to how I had laid out a basic form for the purpose, but I can't seem to get it to write to the textarea.

If I wanted to write the following on one line in the textarea:
<a href="variable1" target="variable2">
and this on the second line in the textarea:
<img src="variable3" border="1"></a>

How would I do it? So far all of my attempts have failed.

If I can accomplish that, I feel that I can complete the rest of the coding just fine. At least I hope I can. :)


02-22-2007, 12:50 AM
Ok, I am doing something wrong here.

I can get the info from the form without a problem.

I can write a line of code with the variable/s included.

If I use form.textareaname.value= , I get a flash of the value on the screen.

Using .value would also assume that the value was one huge long text string.

It seems to me that I am not using the right "write" statement.


02-22-2007, 01:48 AM
I got it!


And I had a few other things messed up. I should be ok now. As I said, I am fairly new to javascript.

Thanks for the start on this, Stephen

02-22-2007, 07:18 AM
If you view the source of any web page that uses javascript you will either find the javascript that it uses actually embedded into the page or a src= reference that tells you where the file that contains the javascript is. If you replace the current filename in your browser address bar with that address then you can view the javascript file contents to see how it works.

Just remember not to copy anyone's actual code that you view like that for use on your site without first getting their permission.

02-22-2007, 03:56 PM
Thanks, Stephen

I would never think of using someones code without first asking permission except where it is expressly stated that "this code is open source and free to use.... sometimes with qualifications", or something along that line.

Looking at code does help though, such as in yours. Although I found the \r \n newline characters elsewhere, it's interesting to see it in practical use, such as in your js fle.

The first time I looked at your source, I simply missed the path to your .js file. There is a lot of code on that page. :)