Generate Code in Textarea

**Ajay** · 09-16-2006, 06:00 AM

Hi,

I want to create a form which has some checkboxes and text field. Using these checkboxes I want to generate some code that would display in the Textarea.

Something similar to how Google Adsense generates the code.

I know how to do it via PHP. But, looking to do the same via JS. Any ideas?

**djr33** · 09-16-2006, 06:39 AM

This won't be too helpful as I'm not expert with javascript, but basically.... here's an example:

Code:

<input type="checkbox" onClick="if (this.value != checked) {textarea.value = 'this is some code'} else {textarea.value = ''}">
<textarea id="textarea"></textarea>
<br><br><br>
<input type="checkbox" onClick="if (this.value != checked) {textbox.value = 'this is some code'} else {textbox.value = ''}">
<input type="text" id="textbox">

Now, it obviously gets more complex if you want it to do something like add code to the middle of what's already there, or change what's already there in some other way, etc. It's possible, just more work. If you get more complex than what's above, I'd recommend making a function and referring to it from the input checkbox...
<input type="checkbox" onClick="dostuff()">
(and define dostuff() as a function in the head section, between <script> tags)

Also, I'll note that I was a bit confused when writing this because I needed to use the id attribute on the fields, rather than name. Not sure why this is. (I'm using safari, so maybe that's part of it).

Note: It's "!= checked" because when you're clicking, it's the opposite of what it changes to, so the text should match the opposite of what you clicked.

**shachi** · 09-16-2006, 06:56 AM

minor fix to drj33's code:

Code:

<input type="checkbox" onClick="if (this.checked != true) {textarea.value = 'this is some code'} else {textarea.value = ''}">
<textarea id="textarea"></textarea>
<br><br><br>
<input type="checkbox" onClick="if (this.checked != true) {textbox.value = 'this is some code'} else {textbox.value = ''}">
<input type="text" id="textbox">

**djr33** · 09-16-2006, 07:42 AM

Is that just the "proper" way, or does it make it more compatible?
I just guessed and got it to work... I'm sure that's better... just wondering...

**shachi** · 09-16-2006, 08:39 AM

drj33: I know that your version works but the difference between your version and my version is that in your version if the user checks the checkbox, it inserts the data into the textarea/textbox but when the user unchecks it, the data inserted will still be there. So, it depends on the OP how he wants it to be.

**djr33** · 09-16-2006, 09:53 AM

Oh, well all you need to do is remove the else statement from mine.
I wasn't sure either.

**Ajay** · 09-16-2006, 10:31 AM

Thanks djr33 and shachi.

I'm looking more in the likes of adding stuff inbetween.

Do you have Google Adsense? I want it similar to how they generate the code.

The text area will be a result of combinations of textboxes and checkboxes.

**djr33** · 09-16-2006, 11:12 AM

It would be easy enough to do this:

textarea.value = "<html>"+textarea.value+"</html>"
However, to take those back out or to specify a particular location for somethign would involve analyzing the exact characters and would get compelx quickly.

**Twey** · 09-16-2006, 12:39 PM

In both the examples above, the variables "textbox" and "textarea" are undefined.

Code:

<input type="checkbox" onclick="
  var textarea = document.getElementById("textarea");
  if (!this.checked)
    textarea.value = 'this is some code';
  else
    textarea.value = '';
">
<textarea id="textarea"></textarea>
<input type="checkbox" onclick="
  var textbox = document.getElementById("textbox");
  if (!this.checked)
    textbox.value = 'this is some code';
  else 
    textbox.value = '';
">
<input type="text" id="textbox">

**shachi** · 09-16-2006, 01:46 PM

Twey: I know that but it doesn't really matter does it?? I was too lazy to standardize it(and make it unobtrusive).

Thread: Generate Code in Textarea

Thread Tools

Search Thread

Generate Code in Textarea

Bookmarks

Bookmarks

Posting Permissions