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?

Answer 1

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> 

Answer 2

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> 

Answer 3

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> 

Answer 4

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