Develop Reference

In jQuery textarea result value showing like [object HTMLTextAreaElement]

In my program, I have written a script and form like this:
jQuery :
var message1 = $('#message').val();
Form :
<label>Message</label>
<textarea rows="4" name="message" id="message" class="required"></textarea>
I am getting the var message1 result is [object HTMLTextAreaElement]
Whats wrong in my code?

You are getting the textarea element itself. To get its value, add .value

You might try to use
var message1 = $('#message').html();
I'm pretty sure the .val() function gets the value attribute and the textarea doesn't use this attribute.

It may that you haven't used any jQuery library to use jQuery syntax? although this syntax
var message1 = $('#message').val();
is correct, I have checked this.

In jQuery when the content is enclosed within the tags like div, span or textarea then you have to find the value of content using .html() or .text()
Difference between these two is that .html() returns the full html content of that element whereas .text() returns the exact text value of the content excluding the html tags.

Using one onchange javascript function for all div

I have multiple <textarea>, sometime they are blank and sometime they are filled with text.
I want to insert a simple text code such as "<check>" which will automatically change to a check (\u2713).
Presently, my code is like this:
<textarea name="1-S" onchange="check(this.value)">
<check> //an input written by a user
</textarea>
<textarea name="1-NI" onchange="check(this.value)">
<check> //an input written by a user
</textarea>
<textarea name="1-C" onchange="check(this.value)">
<check> //an input written by a user
</textarea>
(This block of <textarea> gets repeated, but of course, with different name in each one.)
<script type="text/javascript">
function check(str){
var res = str.replace("<check>", "\u2713");
????
}
</script>
The output will then replace <check> into actual check symbol (\u2713)
The challenge is, I don't want to have to add ID to every <textarea> and then write a script for each one. So is there a way for me to use this one script to apply to all <textarea>???
Many thanks in advance!

You could use the getElementsByTagName method to create an array of your text area tags.

Since you're using jQuery:
$("textarea").each(function(index, textarea) {
// do replacement here
});
Note that you need to use HTML entities to put <check> into a textarea: <check>
Also, you can put a checkmark in without any Javascript like this: ✓

Yes. You can bind an event handler to all elements of a type using jquery.
$('textarea').on('change', function() {
var text = $(this).val();
if (text.match(/\<check\>/)) {
$(this).val(text.replace(/\<check\>/, "\u2713"));
}
});
The benefit of doing it this way is that you can remove your inline 'onchange' handlers from the html and consolidate your validation logic strictly to JavaScript.
To replace the actual textarea content you need to update the value of the textarea with the result of your String-replace regexp. var text = $(this).val() is just assigning the content of the textarea to the variable text, it's not a reference to the innerHTML portion of your textarea.
On a sidenote if you'd like to allow users to use shortcodes in a form, prefer square bracket syntax, e.g., [check].

Overwrite a class via JavaScript

I want to overwrite some text defined by class=cc-product-infolink and it is defined by the CMS, so i have to change the text in this class via JS. It is my first time to use it, so i have wrote a little script, but it doesn't work. Why?
I would like to change the text "inkl. MwSt, zzgl. Versandkosten " in "inkl. MwSt, Versandkosten gemäß Angaben". And the JS-Code must be work in the head, because there is no possibility to put it into the body.
Here is my HTML Code:
<div class="cc-product-infolink">
<a class="cc-no-clickable-arrow" href="/j/shop/info/m/me6f40c3b0bd58b35" rel="nofollow">inkl. MwSt, zzgl. Versandkosten</a>
</div>
My JS-Code
<script type="text/javascript">
//<![CDATA[
var versand = document.getElementsByClassName('cc-product-infolink')[0];
versand.getElementsByTagName('a')[0].textContent += ' gemäß Angaben';
//]]>
</script>
and it should work here: http://www.wonnemond.de/taschen/karl/#cc-m-product-8254989095
Maybe somebody can help me.

var versand = document.getElementsByClassName('cc-product-infolink')[0];
versand.getElementsByTagName('a')[0].textContent += ' gemäß Angaben';
Some notes:
id and class are not the same. As the name implies, getElementById retrieves elements by their id attribute. Your element only has class, so getElementsByClassName is what you need. I guess you cannot change the HTML.
textContent is used to set/get
the text content of a DOM element. Old IEs (IE8 and older) use
innerText instead.
firstChild does not work because the link is not the first child of that div. There is a text node containing a newline and some indentation before the link. Using getElementsByTagName you can solve this problem though.
And a jsFiddle Demo.

Can jQuery or Javascript change elements within textareas?

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.com</p>
HTML
<input type="radio" name="sitechoice" value="www.websiteone.com">www.websiteone.com<br />
<input type="radio" name="sitechoice" value="www.secondwebs.com">www.secondwebs.com
<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 comments)
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!

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.net/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.com">www.websiteone.com
<br />
<input type="radio" name="sitechoice" value="www.secondwebs.com">www.secondwebs.com
<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.net/nR94s/

Make a DIV act as an INPUT field

I am currently using a bunch of input textfields and I want to change it to a DIV, but most of my JS functions use document.getElementById("inputField1").value whenever the value of the input field is set like this:
<input contenteditable="false" id="inputField1" type="text" size="12" style="background:#09F;color:#FFF;text-align:center" value="Hello World!"/>
That would return just Hello World! if I were to display the value in an alert
How would I get the value of the text in between if I were to use DIVs?
For example <div id="inField001">Hello World</div>
Thanks!

In that case you can use:
document.getElementById('inField001').innerHTML
Or:
document.getElementById('inField001').innerText
Or:
document.getElementById('inField001').textContent
Also (if you want to use jQuery):
$('#inField001').text()

You would just do
var value = document.getElementById('inField001').innerHTML);
But if your DIV has some html this will grab that too.
.innerHTML
You can also use document.getElementById('inField001').textContent) to grab just the text nodes from the element ignoring any element wrappers.
But support for textContent is not as good as innerHTML.
See doc for info and support.
Another way is using innerText. alert(document.getElementById('inField001').innerText); but not supported in FF.
See Doc for support.
Fiddle

Use the innerHTML property.
document.getElementById("inField001").innerHTML
BTW this kind of thing is way better to do with jQuery.

For just text content:
var value = document.getElementById('inputField1').textContent;
For the more verbose version, see here.

or just do
x = document.getElementById("inField001");
alert(x);