Append an input after a textarea with Javascript or jQuery

Question

I have a textarea in a DIV that I can not modify.

I need to add an element, an input checkbox, just after the text area with javascript.

This is the code :

<div id="msgrapidosinick"><p class="msguser">My Wall</p>
   <form method="post" id="messaggioajaxd" name="frm2">
   <textarea class="areamsgnoava" name="messaggio"></textarea>
   <input type="hidden" value="1" name="invia" id="invia">
   <input type="hidden" value="1" name="riceve" id="riceve">
   <input type="hidden" value="/assyrian" name="pagina" id="pagina">
   <input type="submit" value="Share" class="submsg" name="senda2" style="display: none;">
   </form>
   </div>

So just after the textarea I need to add an element, that is a input checkbox, when the textarea is clicked.

How do I do that?

Please help me.

Just to let you know my site loads also jQuery 1.3.2

Thank you

Isn't this the same as your previous question (albeit with more information)? stackoverflow.com/questions/6173941/… — Felix Kling
– Felix Kling, Commented May 30, 2011 at 11:39

Frédéric Hamidi · Accepted Answer · 2011-05-30 10:41:36Z

4

You can use the aptly-named after() method:

$("textarea[name=messaggio]").click(function() {
    $(this).after("<input type='checkbox' name='yourCheckBoxName' />");
});

If you want to avoid creating the check box if it already exists, you can do something like:

$("textarea[name=messaggio]").click(function() {
    var $this = $(this);
    if (!$this.next(":checkbox").length) {
        $this.after("<input type='checkbox' name='yourCheckBoxName' />");
    }
});

edited May 30, 2011 at 10:41

answered May 30, 2011 at 10:35

Frédéric Hamidi

264k42 gold badges497 silver badges486 bronze badges

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

Comments

Niklas · Accepted Answer · 2011-05-30 10:37:11Z

1

Presuming you only want the checkbox created on the first click to the textarea, you could do something like this:

 $("#messaggioajaxd textarea").click(function(){
        if ($('#createdCheckbox').length==0){
        $('<input />').attr('type','checkbox').attr('id','createdCheckbox').insertAfter($(this));
        }
    });

Example on jsfiddle

answered May 30, 2011 at 10:37

Niklas

30k5 gold badges54 silver badges74 bronze badges

Comments

wdm · Accepted Answer · 2011-05-30 10:48:46Z

0

Niklas beat me to it but here is what I was going to suggest...

Demo: http://jsfiddle.net/wdm954/ppnzf/1/

$('textarea.areamsgnoava').click(function() {
    if ($('input.new').length == 0) {
       $(this).after('<input type="checkbox" class="new" />');
    }
});

edited May 30, 2011 at 10:48

answered May 30, 2011 at 10:43

wdm

7,1891 gold badge31 silver badges31 bronze badges

Comments

Mic · Accepted Answer · 2011-05-30 10:56:37Z

0

I think that some IE version will not like that you add a field dynamically. If you can add an element to the form, may be you could change the form totally, and inject it as a new form instead, using div.innerHTML or using the DOM.

And add the checkbox in the original HTML as hidden, and show it if the textarea is clicked.

eg:

<div id="msgrapidosinick"><p class="msguser">My Wall</p>
  <form method="post" id="messaggioajaxd" name="frm2">
    <textarea class="areamsgnoava" name="messaggio"></textarea>
    <input type="checkbox" name="checkBox" id="checkBox" style="display:none">
    <input type="hidden" value="1" name="invia" id="invia">
    <input type="hidden" value="1" name="riceve" id="riceve">
    <input type="hidden" value="/assyrian" name="pagina" id="pagina">
    <input type="submit" value="Share" class="submsg" name="senda2" style="display: none;">
  </form>
</div>

Then if you have the reference of the textarea DOM node:

textarea.onfocus = function(ev){
  var ta = ev.target || ev.srcElement;
  ta.form.checkBox.removeAttribute('style');
}

Or using jQuery and focus.

edited May 30, 2011 at 10:56

answered May 30, 2011 at 10:45

Mic

25.2k9 gold badges61 silver badges71 bronze badges

2 Comments

Niklas Over a year ago

Not really an option, if the div element cannot be modified.

Mic Over a year ago

Misread the can/cannot... then I guess he'll have some trouble when submitting the form in IE. I've edited the answer accordingly

Collectives™ on Stack Overflow

Append an input after a textarea with Javascript or jQuery

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related