My first SO question! Here's what I am trying to do:

I'm rewriting a tool that generates some code a user can paste directly into Craigslist and other classified ad posting websites. I have created a list of websites (they populate from a database with PHP) the user can choose from with a radio button, and I want their choice to populate as bare text (not a link) between some <p></p> elements in a textarea. I'm using jQuery for this.

Textarea before the user chooses:

    <p id="thing"></p>

Textarea after the user chooses:

    <p id="thing">www.somewebsite</p>

HTML

<input type="radio" name="sitechoice" value="www.websiteone">www.websiteone<br />
<input type="radio" name="sitechoice" value="www.secondwebs">www.secondwebs

<textarea>
 Some stuff already in here
 Here is the website you chose:
 <p id="thing"></p>
 More stuff already here.
</textarea>

JS

$(document).ready(function () {
    $("input").change(function () {
        var website = $(this).val();
        alert(website);
        $("#thing2").html(website);
    });
});

JS Fiddle (With ments)

If you see the JS Fiddle, you can see that I put another p element on the page outside the textarea, and it updates just fine, but the one inside the textarea does not. I have read many other like questions on SO and I'm starting to think that I can't change an element that's between textarea tags, I can only change the entire textarea itself. Please, lead me to enlightenment!

My first SO question! Here's what I am trying to do:

I'm rewriting a tool that generates some code a user can paste directly into Craigslist and other classified ad posting websites. I have created a list of websites (they populate from a database with PHP) the user can choose from with a radio button, and I want their choice to populate as bare text (not a link) between some <p></p> elements in a textarea. I'm using jQuery for this.

Textarea before the user chooses:

    <p id="thing"></p>

Textarea after the user chooses:

    <p id="thing">www.somewebsite.</p>

HTML

<input type="radio" name="sitechoice" value="www.websiteone.">www.websiteone.<br />
<input type="radio" name="sitechoice" value="www.secondwebs.">www.secondwebs.

<textarea>
 Some stuff already in here
 Here is the website you chose:
 <p id="thing"></p>
 More stuff already here.
</textarea>

JS

$(document).ready(function () {
    $("input").change(function () {
        var website = $(this).val();
        alert(website);
        $("#thing2").html(website);
    });
});

JS Fiddle (With ments)

If you see the JS Fiddle, you can see that I put another p element on the page outside the textarea, and it updates just fine, but the one inside the textarea does not. I have read many other like questions on SO and I'm starting to think that I can't change an element that's between textarea tags, I can only change the entire textarea itself. Please, lead me to enlightenment!

• javascript
• jquery
• html
• css
• textarea

Share Improve this question Follow asked Dec 6, 2013 at 17:38 flanger001flanger001 77766 silver badges1616 bronze badges 8

• 9 Your "p element" inside the textarea is not an element, it's just plain text. Textarea can't have HTML. – Teemu Commented Dec 6, 2013 at 17:44
• i guess that the ment above it's the answer :) – kawashita86 Commented Dec 6, 2013 at 17:44
• Refer to this question: stackoverflow./questions/10585029/… – Prashant Borde Commented Dec 6, 2013 at 17:51
• @Teemu - that doesn't mean that he can't alter the value, though . . . just that he can't do it using only DOM manipulation. – talemyn Commented Dec 6, 2013 at 17:57
• @Teemu You can treat it as an HTML element though, if you pull it out and wrap it in jQuery's $(), or use plain JS like in the link @PrashantBorde provided. – justisb Commented Dec 6, 2013 at 18:04

 |  Show 3 more ments

4 Answers 4

Sorted by: Reset to default 4

You actually can fairly easily manipulate the text contents of the textarea like it is part of the DOM, by transforming its contents into a jQuery object.

Here is a jsFiddle demonstrating this solution: http://jsfiddle/YxtH4/2/

The relevant code, inside the input change event:

// Your normal code
var website = $(this).val();
$("#thing2").html(website);

// This turns the textarea's val into a jQuery object ...
// And inserts it into an empty div that is created
var textareaHtml = $('<div>' + $("#textarea").val() + '</div>');
// Here you can do your normal selectors
textareaHtml.find("#thing").html(website);
// And this sets the textarea's content to the empty div's content
$("#textarea").val(textareaHtml.html());

The empty div wrapping your HTML is so that you can easily retrieve it as a string later using jQuery's .html() method, and so the parse does not fail if additional text is entered around the p element inside the textarea.

The real magic is $($("#textarea").val()), which takes your textarea's text and parses it into an HTML node contained in a jQuery object.

It can't do it the way that you are thinking (i.e., manipulate it as if it were a DOM element), but it is still accessible as the value of the textarea, so you can retrieve it like that, use basic string manipulation to alter it, and then set the updated string as the new value of the textarea again.

Something like this . . . first give the <textarea> an id value:

<textarea id="taTarget">
    Some stuff already in here
    Here is the website you chose:
    <p id="thing"></p>
    More stuff already here.
</textarea>

Then alter your script like this:

$(document).ready(function () {
    $("input").change(function () {
        var website = $(this).val();

        var currentTAVal = $("#taTarget").val();
        $("#taTarget").val(currentTAVal.replace(/(<p id="thing">)([^<]*)(<\/p>)/, "$1" + website  + "$3"));
    });
});

Unless you need the <p> element in there, you might consider using a more simple placeholder, since it won't actually act as an HTML element within the textarea. :)

EDIT : Fixed a typo in the .replace() regex.

I know that this answer is a little bit late, but here it goes =)

You can do exactly the way you want to do. But for that, you need to implement a small trick.

by having this HTML

<input type="radio" name="sitechoice" value="www.websiteone.">www.websiteone.
<br />
<input type="radio" name="sitechoice" value="www.secondwebs.">www.secondwebs.
<p id="thing2"></p>
<textarea id="textarea">
<p id="thing"></p>
</textarea>

you can edit textarea content, as a DOM by implementing something like the function changeInnerText

$(document).ready(function () {
    $("input").change(function () {
        var website = $(this).val(); // Gets value of input
        changeInnerText(website);
        //$("#thing").html(website); // Changes
        //$("#thing2").html(website); // Does not change
    });

    var changeInnerText = function(text) {
        var v = $("#textarea").val();
        var span = $("<span>");
        span.html(v);
        var obj = span.find("#thing")[0];
        $(obj).html(text);

        console.log(obj);        
        console.log(span.html());

        $("#textarea").val(span.html());
    }
});

As you can see, I just get the information from the textarea, I create a temporary variable span to place textarea's content. and then manipulate it as DOM.

Instead of attempting to insert the text into the <p> element, insert the text into <textarea> element and include the <p> tag. Something like this should do the trick:

Change:

$("#thing").html(website);

to:

$("textarea").html('<p id="thing">'+website+'</p>');

And here is a fiddle: http://jsfiddle/nR94s/