How to target a textarea(child) inside a div(parent)

Question

So I wanted to add a name attribute on a textarea inside the div.

So my div has an id of textAreaEmail.

Here's the syntax I've tried:

$(textAreaEmail).removeAttr('hidden');
$(textAreaEmail).children('textarea').attr('name', 'body');

Here's my HTML, I used Form Helpers.

<div id="textAreaEmail">
    <div class="form-group <?php echo ($form->error('body') ? 'has-error' : ''); ?>">
        <?php echo label_tag('Body', 'body', true, array('class' => 'control-label'), ''); ?>
        <?php echo textarea_field('body', $form->getField('body'), array(
            'class' => 'form-control' . ($form->error('body') ? ' is-invalid' : ''),
            'required' => true,
            'id' => 'tinymce'
        )); ?>
        <p class="help-block invalid-feedback"><?php echo ($form->error('body') ? $form->error('body') : ''); ?></p>
    </div>
</div>

`children()` looks only for child elements. If the `textarea` is a grandchild of the `div` (or lower) then you'll need to use `find()` instead — Rory McCrossan, Feb 08 '18 at 12:45
This is wrong `$(textAreaEmail)` You forgot to identify what is, and in this case you have an id which means that the right thing is: `$("#textAreaEmail").removeAttr('hidden'); $("#textAreaEmail").find('textarea').attr('name', 'body');` — AlexCode, Feb 08 '18 at 12:48
@JanArielSanJose Without jQuery it won't be much more complicated: document.querySelector("#textAreaEmail textarea").setAttribute('name', 'body'); — soeik, Feb 08 '18 at 12:51
@paokg4 Actually you can do this, but it's a very bad practice https://stackoverflow.com/questions/3434278/do-dom-tree-elements-with-ids-become-global-variables — Admit, Feb 08 '18 at 12:59
@Admit I agree because it needs to traverse the whole DOM (best practice is to give an `ID` attr to the `textarea` and do directly on this element anything) but the OP has specific structure and he asked a specific thing. I just commented on what he had wrong :) — AlexCode, Feb 08 '18 at 13:05

score 2 · Accepted Answer · answered Feb 08 '18 at 12:45

2

If you want to set attribute name to the value body then do:

$("#textAreaEmail").find('textarea').attr('name', 'body');

You need to use # to use id as a selector.

answered Feb 08 '18 at 12:45

void

36,090
8
62
107

I don't know why but it doesn't work when I add # on it. – Jan Ariel San Jose Feb 08 '18 at 12:48
But anyways, `find` worked pretty well! Without adding the # tho. – Jan Ariel San Jose Feb 08 '18 at 12:49
I am assuming that multiple HTML elements does not share the same id. IS it correct? – void Feb 08 '18 at 12:49
@JanArielSanJose then maybe you are storing the id in some variable. Anyways if it solves your problem then do mark this answer correct... – void Feb 08 '18 at 12:49
That was so dumb of me, I actually forgot to enclose it on ` ' ' `. – Jan Ariel San Jose Feb 08 '18 at 12:53
I'll mark this answer correct in 4 minutes, Stackoverflow won't let me accept it instantly. – Jan Ariel San Jose Feb 08 '18 at 12:53

score 0 · Answer 2 · answered Feb 08 '18 at 12:51

Try following way but I'm not sure where you have hidden attribute but I followed your question:

$("#textAreaEmail").removeAttr('hidden').find('textarea').attr('name', 'body'); // If hidden attribute under parent div
$("#textAreaEmail").find('textarea').removeAttr('hidden').attr('name', 'body'); // If hidden attribute under textarea

score 0 · Answer 3 · answered Feb 08 '18 at 12:52

0

You forgot the "#" symbol for the ID and the quotes in your two selectors, so...

$(textAreaEmail).removeAttr('hidden');

...should be

$('#textAreaEmail').removeAttr('hidden');

answered Feb 08 '18 at 12:52

Johannes

64,305
18
73
130

How to target a textarea(child) inside a div(parent)

3 Answers3