How to make getElementById work in Jquery?

Question

Here is the HTML and the script

 <script> $(document).ready(function(){ $(".update_button").click(function(){ var update_post = $("#post").val(); alert('Post is '+ update_post +'.'); return false; }); }); </script> <body> <fieldset style="width:600px; height:550px"> <textarea id="post" class="uiwysiwyg nothing"><?php echo $prvpost; ?></textarea> <input type="submit" value="Post" id="updt_button" class="update_button"/> </fieldset> </body>

Note: class="uiwysiwyg nothing" is a script the contains the WYSIWYG commands

But code works:

 <body onsubmit="alert('Update: ' + document.getElementById('post').value); return false;"> <fieldset style="width:600px; height:550px"> <textarea id="post" class="uiwysiwyg nothing"><?php echo $prvpost; ?></textarea> <input type="submit" value="Post" id="updt_button" class="update_button"/> </fieldset> </body>

@simon says that a textarea has no value. it should be on html() or text() — user1497888
– user1497888, Commented Jul 13, 2012 at 7:48
did you have a look at the jsfiddle link i posted in my post . val() does work for textarea jquery — Rasmus
– Rasmus, Commented Jul 13, 2012 at 7:50
i have tried it and applied but the problem is that tags are not captured like <b> </b> <i> </i> and i also found out that when applying <?php ?> in textarea it would just give me [object][Object] — user1497888
– user1497888, Commented Jul 13, 2012 at 8:01
@Alice: It's pretty strange, my first guess (comment I already deleted), was that the content of textarea is HTML and that it gets converted to a jQuery object through .val(), but nonetheless it puts out the text for me, no matter if .val() .html() .text() is used... — Seimen
– Seimen, Commented Jul 13, 2012 at 8:01

Johnson · Accepted Answer · 2012-07-13 06:51:04Z

2

try

var update_post = $("#post").val(); alert(update_post);

answered Jul 13, 2012 at 6:51

Johnson

1,5512 gold badges17 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1497888 Over a year ago

yes it was ID not a class sorry. I have changed it from . to # but it still doesn't work. this is the original where all the WYSIWYG feature is working. It captures all the html formats > onsubmit="alert('You said:\n\n' + > document.getElementById('post').value); return false; but when i try it using > var update_post = $("#post").val(); it doesn't work anymore.

Rasmus · Accepted Answer · 2012-07-13 07:41:48Z

1

By using $(.post) you are using something like document.getElementByClass... If you want document.getElementById please use $("#post)...and yes please check jquery Selectors

Edit:- Your code is fine.. just checked it at jsfiddle

edited Jul 13, 2012 at 7:41

answered Jul 13, 2012 at 7:03

Rasmus

8,50613 gold badges52 silver badges72 bronze badges

8 Comments

user1497888 Over a year ago

i also have same idea with as yours. i have tried this. but it's not functioning $(document).ready(function(){ $(".update_button").click(function(){ var update_post = $("#post").val(); alert(update_post); } it just gives me a result of: "[object Object]"

Rasmus Over a year ago

Can i please look at what is the element with the post id. I mean can you post the html too

Seimen Over a year ago

Just to note: there is document.getElementsByClassName in JS

user1497888 Over a year ago

@alice here is the HTML and the script <script> $(document).ready(function(){ $(".update_button").click(function(){ var update_post = $("#post").val(); alert('Post is '+ update_post +'.'); return false; }); }); </script> <body> <fieldset style="width:600px; height:550px"> <textarea id="post" class="uiwysiwyg nothing"><?php echo $prvpost; ?></textarea> <input type="submit" value="Post" id="updt_button" class="update_button"/> </fieldset> </body>

Seimen Over a year ago

@user1497888: update your question with corrected/new code snippets instead of posting them in the comments.

|

Ronald Wildenberg · Accepted Answer · 2012-07-13 06:51:22Z

It's because in the first example you're using post as an id. In the second example you're using it as a css class (.post). The second example should be #post.

Check out jQuery selectors for more info.

Ricky · Accepted Answer · 2012-07-13 06:51:24Z

0

i assume "post" is ID not CSS class, so you have to use "#"

var update_post = $("#post").val(); alert(update_post);

answered Jul 13, 2012 at 6:51

Ricky

3731 silver badge8 bronze badges

2 Comments

user1497888 Over a year ago

yes it was ID not a class sorry. I have changed it from . to # but it still doesn't work. this is the original where all the WYSIWYG feature is working. It captures all the html formats onsubmit="alert('You said:\n\n' + document.getElementById('post').value); return false; but when i try it using var update_post = $("#post").val(); it doesn't work anymore.

Ricky Over a year ago

can you specify "it doesn't work anymore"? are there any errors, or it's alert with empty string?

Bas Wildeboer · Accepted Answer · 2012-07-13 06:51:33Z

0

Instead of using ".post", use "#post". A "." specifies a classname and a "#" specifies an element ID.

Your code would then look like this:

var update_post = $("#post").val(); alert(update_post);

answered Jul 13, 2012 at 6:51

Bas Wildeboer

5806 silver badges13 bronze badges

3 Comments

user1497888 Over a year ago

yes it was ID not a class sorry. I have changed it from . to # but it still doesn't work. this is the original where all the WYSIWYG feature is working. It captures all the html formats onsubmit="alert('You said:\n\n' + document.getElementById('post').value); return false; but when i try it using var update_post = $("#post").val(); it doesn't work anymore.

user1497888 Over a year ago

it is a textarea where the class property of the textarea is javascript. I only need to get the value of the textarea which contains html format.

Seimen Over a year ago

Textareas have no values, they just have .text() or .html(). Since the content is HTML you'd use .html().

Seimen · Accepted Answer · 2012-07-13 07:47:41Z

0

As I already wrote in the comments:

Textarea form elements do not have a value, you can get their contents through .text() (pure readable text as it is) or .html() (HTML tag and entity conversion for adding to the DOM). Though newer versions of jQuery already do this for you and get the contents of textarea via .val().

So you can either update your version of jQuery (mostly a good idea) or try this code:

$(document).ready(function(){ $(".update_button").click(function(){ var update_post = $("#post").html(); alert('Post is '+ update_post +'.'); return false; }); });

edited Jul 13, 2012 at 7:47

answered Jul 13, 2012 at 7:31

Seimen

7,2942 gold badges30 silver badges42 bronze badges

21 Comments

Bas Wildeboer Over a year ago

In jQuery .val() CAN be used to get the text/html from a textarea. Check the api.

user1497888 Over a year ago

so you are saying that i should change it from .val to .text() or .html() ? like this one var update_post = $("#post").text(); or var update_post = $("#post").html();

Seimen Over a year ago

@Bas Wildeboer: depends on the jQuery version, and as it seems, the version he has does not yet support that (since the code is correct)...

Seimen Over a year ago

@user1497888: Yes exactly, if you want to use the input to add new DOM elements you can use .html(), if it's just text like a comment or something, you'd best use .text()

Bas Wildeboer Over a year ago

@Simon True. Indeed the code is correct. Why not use a newer version of jquery?

|

Collectives™ on Stack Overflow

How to make getElementById work in Jquery?

6 Answers 6

1 Comment

8 Comments

Comments

2 Comments

3 Comments

21 Comments

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

8 Comments

Comments

2 Comments

3 Comments

21 Comments

Related