Results 1 to 4 of 4

Thread: Checkboxes to add and remove value in Textarea

  1. #1
    Join Date
    Jan 2007
    Posts
    94
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Cool Checkboxes to add and remove value in Textarea

    Ok, so I have a textarea in which i'm displaying some very basic html code. I have it so that if the user clicks in the textarea it selects all the text and then the user can copy and paste it into wherever.

    I'm using the following code for that...

    Code:
    <script type="text/javascript">
    function select_all()
    {
    var text_val=eval("document.form1.type");
    text_val.focus();
    text_val.select();
    }
    </script>
    
    <form name="form1" method=post>
    <textarea name=type rows="5" cols="35" onClick="select_all();">
    
    <html><head><title>Help!</title></head><body>Please help!</body>
    
    </textarea>
    </form>
    ok, so that all works fine. I want to add three checkboxes now as "additional options" and when a user clicks any of the three (and they can select all three if they want) it should append the html code associated with that checkbox to the bottom of the code in the textarea. If the user unchecks it, I want that code to be removed from the textarea. I am pretty sure I need javascript for this but I can't seem to find examples with textareas or the code disables my select all function. Is there anyway to accomplish this and still keep the select all? Can anyone please help me? Thanks in advance!

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    You don't, in general, add HTML to a textarea. Usually a text area contains just text, even it it is HTML code, it looks like source code and isn't rendered by the browser as HTML. What are the typical sorts of string data that you want to add? Also, your question doesn't make it clear to me if you are actually wanting to be adding anything to the textarea or, perhaps you want to add some things (elements?) after the textarea, what is it you are adding where?

    But IDK, how about this, must be close:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script type="text/javascript">
    function add_sub(el){
    if (el.checked)
    el.form.elements['type'].value+=el.value;
    else{
    var re=new RegExp('(.*)'+el.value+'(.*)$');
    el.form.elements['type'].value=el.form.elements['type'].value.replace(re,'$1$2');
    }
    }
    </script>
    </head>
    <body>
    
    <form name="form1" method=post>
    <textarea name="type" rows="5" cols="35" onclick="this.focus();this.select();">
    <html><head><title>Help!</title></head><body>Please help!</body>
    </textarea><br>
    <input type="checkbox" name="bob" id="bob" value="<p>" onclick="add_sub(this);"><label for="bob">&lt;p&gt;</label><br>
    <input type="checkbox" name="bob1" id="bob1" value="<span>" onclick="add_sub(this);"><label for="bob1">&lt;span&gt;</label><br>
    <input type="checkbox" name="bob2" id="bob2" value="<div>" onclick="add_sub(this);"><label for="bob2">&lt;div&gt;</label>
    </form>
    </body>
    </html>
    But, the more I played with this, the more I began to think that you wanted a script like:

    http://www.dynamicdrive.com/dynamici...itor/index.htm
    Last edited by jscheuer1; 01-27-2008 at 04:52 AM. Reason: Make RegExp more precise
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    jnscollier (03-11-2008)

  4. #3
    Join Date
    Jan 2007
    Posts
    94
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    thanks a million, that was exactly what i needed.

  5. #4
    Join Date
    Jun 2015
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hello @jscheuer1,

    I am a JavaScript newbie and wanted to know how would you comma & space the content entered into the textarea, specifically the 2nd+ selections (resulting in: value a, value b, value c)

    Thanks,

    Joe

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •