how to change an input element to textarea using jquery [duplicate]

Question

I have the following html:

<div>
    <input type="text" style="xxxx" size="40"/>
    <input type="text" style="xxxx" size="100"/>
    <input type="text" style="xxxx" size="100"/>
    <input type="text" style="xxxx" size="40"/>
</div>

Now I want to change each input whose size is '100' to a textarea which has the same style as the input.

I have tried this:

$("input[size=100]").each(function(){
  //how to replace it?
});

Any ideas?

I used this solution found in the answers here:

$("input[size=100]").each(function() {
    var style = $(this).attr('style'), textbox = $(document.createElement('textarea')).attr({
        id : $(this).id,
        name : $(this).name,
        value : $(this).val(),
        style : $(this).attr("style"),
        "class" : $(this).attr("class"),
        rows : 6
    }).width($(this).width());
    $(this).replaceWith(textbox);
});

I tried, it does not work. BTW, I do not think my post deserved a down-vote. — hguser
– hguser, Commented Jun 13, 2013 at 9:10
Google does not work? It does for me. The first hit I get is e.g. jQuery change hidden input type to textarea - if you have specific problems with that, you should add them to the question — Pekka
– Pekka, Commented Jun 13, 2013 at 9:10
@Pekka Now, this is the first google result, funny how that works. — FreeSoftwareServers
– FreeSoftwareServers, Commented Feb 22, 2022 at 22:48

Derek Henderson · Accepted Answer · 2013-06-13 09:28:27Z

13

jQuery has a .replaceWith() method you can use to replace one element with another. So, copy your styles from the input and use this method, as follows:

$('input[size="100"]').each(function () {
    var style = $(this).attr('style'),
        textbox = $(document.createElement('textarea')).attr('style', style);
    $(this).replaceWith(textbox);
});

Demo

edited Jun 13, 2013 at 9:28

answered Jun 13, 2013 at 9:14

Derek Henderson

9,7364 gold badges46 silver badges72 bronze badges

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

Comments

MisterBla · Accepted Answer · 2013-06-13 09:18:48Z

3

Try something along the lines of

$('input[size="100"]').each(function()
{
    var textarea = $(document.createElement('textarea'));
    textarea.text($(this).val());

    $(this).after(textarea).remove();
});

Here's an example: http://jsfiddle.net/SSwhK/

answered Jun 13, 2013 at 9:18

MisterBla

2,3951 gold badge20 silver badges29 bronze badges

Comments

GautamD31 · Accepted Answer · 2013-06-13 09:10:20Z

1

Try like this

$("input").each(function(){
      if($(this).attr('size') == "100") {
             my_style = $(this).attr('style');
             $(this).replaceWith("<textarea style='"+my_style+"'></textarea>");
      }
});

answered Jun 13, 2013 at 9:10

GautamD31

28.8k10 gold badges66 silver badges86 bronze badges

4 Comments

hguser Over a year ago

You misunderstand me, I just do not know how to replace it.

GautamD31 Over a year ago

See my edit....my ans also not worth of downvote as like your question

Pekka Over a year ago

I agree this didn't deserve a downvote... but why answer such a lazy question in the first place, enabling the user to ask more and more of them? Just sayin'.

GautamD31 Over a year ago

Yes @Pekka웃 ,but I thought that it is simple that makes him clarify

som · Accepted Answer · 2013-06-13 09:14:11Z

0

$(document).ready(function(){
    $("input[size=100]").each(function(){
      //how to replace it?
        $(this).after('<textarea style="xxxx"></textarea>').remove();
    });
});

Check http://jsfiddle.net/6JH6B/

answered Jun 13, 2013 at 9:14

som

4,6542 gold badges23 silver badges36 bronze badges

Collectives™ on Stack Overflow

how to change an input element to textarea using jquery [duplicate]

4 Answers 4

Comments

Comments

4 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

4 Comments

Comments

Linked

Related