Printable View
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?
This won't be too helpful as I'm not expert with javascript, but basically.... here's an example:
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...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">
<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.
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">
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...
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. :)
Oh, well all you need to do is remove the else statement from mine.
I wasn't sure either.
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.
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.
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">
Twey: I know that but it doesn't really matter does it?? I was too lazy to standardize it(and make it unobtrusive).;)
Of course it does, you're using undefined variables :)
But ... in one of the post you told me it didn't. :confused:
Thus making the code unusable.Quote:
Of course it does, you're using undefined variables
Where? :-\Quote:
But ... in one of the post you told me it didn't. :confused:
It will probably work in most browsers due to the way they make elements accessible by name or ID under the global object, but there's nothing that says it ought to.
Never mind, I searched the post but couldn't find it.
This is probably some solution I am looking for. Will have to research much deeper into how exactly I plan on working on this.Quote:
Originally Posted by djr33
I'm thinking possibly an onblur will call a function that will reupdate the text field.