get textarea by class and set name dynamically

Question

I don't really know why I can't do this apparently silly thing.

I have a template that parses dynamically a js file with an html textarea only with the class attribute.

What I want to do is to add name attribute to it so I can get it with $_POST in php.

So far I have tried:

var txt = $('.note-codable');
txt.prop('name','description');

$('.note-codable').attr('name','description');

and other options that doesn't seem to work.

This is html that is added dinamycally:

<div class="note-editor">
  //other divs
  <textarea class="note-codable"></textarea>
</div>

when I do (in order to TRY the code):

var txt = $('.note-codable');
alert(txt);

the result is [object] [object]

what am I missing? why is attr name not writing?

Or better yet, `alert(txt.val());`. txt is the textarea element, which is an object. txt.val() gets the contents of the element as a text string. — Makaze, Nov 17 '15 at 03:01
@Tushar no, the question is..why is it not writing the name after I do it with jquery? the alert was just to see what is in there — Limon, Nov 17 '15 at 03:01
It is alerting `object` because that is exactly what your variable is. You need to reference something more. If you want to get the html inside the div then you use `.innerHTML`. If you want to get the nodeName of the element, you do `.nodeName` — www139, Nov 17 '15 at 03:02
Try doing; `alert(txt.name);` to get the current name attribute set. The code that sets the name attribute should be working. — www139, Nov 17 '15 at 03:03
Take a look at your web inspector too to see what is going on. — www139, Nov 17 '15 at 03:04
@www139 sorry, that was not the question. The inspector is not throwing any errors. The thing is that the name is not being write in — Limon, Nov 17 '15 at 03:05
Does this help? http://stackoverflow.com/questions/347798/changing-an-elements-id-with-jquery — John Doe, Nov 17 '15 at 03:06

score 1 · Answer 1 · answered Nov 17 '15 at 03:11

Try this, tell me if there is anything else I can do.

window.onload = function(){
  //get the element
  var txt = $('.note-codable');
  //set the name attribute
  txt.name = 'yourName';
  
  //get the name and console.log it
  console.log(txt.name);
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="note-editor">
  //other divs
  <textarea class="note-codable"></textarea>
</div>

score 0 · Answer 2 · answered Nov 17 '15 at 03:14

You seem to be doing it right... Here's an example for clarity.

$(function() {
  var $el = $("#example");
  var $out = $("#output");

  $out.append("<p>Name is: " + $el.attr('name') + "</p>");
  $el.attr('name', 'description');
  $out.append("<p>Name is: " + $el.attr('name') + "</p>");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<textarea id="example"></textarea>


<div id="output"></div>

score 0 · Answer 3 · answered Nov 17 '15 at 03:15

Your code is working on my end: the name is set dynamically. You are getting [object object] from the alert because you are returning the textbox itself, not its contents or the value of its name attribute.

Assuming you want the name put into the textbox instead of added as an attribute, you should set it with txt.val('your name here').

var txt = $('.note-codable');
txt.attr('name', 'description');
console.log(txt.get(0));
txt.val(
  'html: ' + txt.parent().html().trim() + '\n' +
  'name: ' + txt.attr('name')
);

textarea {
height: 100px;
width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="note-editor">
  <textarea class="note-codable"></textarea>
</div>

score 0 · Answer 4 · answered Nov 17 '15 at 03:18

If you alert an object(like what the jQuery selector will return) it will not give display the information. It will always read [object Object]. Using console.log would be a better way to read through it. Alternatively, if just want to test if the name attribute is in fact applied, this should the trick.

var txt = $('.note-codable').attr('name'); alert(txt);

Assuming the jQuery was successful, it should read description

get textarea by class and set name dynamically

4 Answers4