CODEWITHSUNDEEP
javascriptphpjqueryhtml
Limon
Limon

Reputation: 1793

get textarea by class and set name dynamically

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?

Upvotes: 0

Views: 2100

Answers (4)

Austin Ezell
Austin Ezell

Reputation: 763

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

Upvotes: 0

Makaze
Makaze

Reputation: 1086

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>

Upvotes: 0

acupofjose
acupofjose

Reputation: 2159

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>

Upvotes: 0

www139
www139

Reputation: 5237

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>

Upvotes: 1

Related Questions