jQuery to change input to text area with attribute and atrribute values intact

Question

I have the following:

<input type="text" id="tag_856_subfield_u_270150_676903" name="tag_856_subfield_u_270150_676903" value="http://www.test.com/2073-4441/8/1/23/pdf" class="input_marceditor noEnterSubmit" tabindex="1" size="67" maxlength="9999">

And I wanted to change the text input type into textarea by using the following jquery:

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

With the jquery above, I get to have a textarea but the data that is already in the text box is/are removed and inspecting the elements in Google Chrome, I only get the following:

<textarea></textarea>

Is there a way in jquery to do what I wanted to do as what can be seen below, such that I get the following below in my particular use case? The input id and input name is dynamic, hence I used input[name^="tag_245_subfield_b"]. I actually followed this stackoverflow question to achieve my use case: how to change an input element to textarea using jquery.

<textarea cols="70" rows="4" id="tag_856_subfield_u_270150_676903" name="tag_856_subfield_u_270150_676903" class="input_marceditor" tabindex="1">http://www.mdpi.com/2073-4441/8/1/23/pdf</textarea>

Thanks in advance and cheers!

What you can do is, before replacing input with textarea, store input field value in a var and set that to textarea value - http://stackoverflow.com/questions/415602/set-value-of-textarea-in-jquery. Also, you can add attributes to textarea if you want — khushboo29, Feb 18 '16 at 06:23
cols="70", rows="4", class="input_marceditor" and tabindex="1" is static while the id and name is dynamic and dependent on what is inputted there. I will try to look over the link you sent. Thanks! — schnydszch, Feb 18 '16 at 06:27

rrk · Accepted Answer · 2016-02-18T06:57:04.863

Set the value using val(this.value). If you want to copy the other attributes as well, then use the following.

console.log($('input[name^="tag_245_subfield_"]'))
$('input[name^="tag_245_subfield_"]').each(function() {
  var textbox = $(document.createElement('textarea')).val(this.value);
  console.log(this.attributes);
  $.each(this.attributes, function() {
    if (this.specified) {
      textbox.prop(this.name, this.value)
    }
  });
  $(this).replaceWith(textbox);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="tag_245_subfield_u_270150_676903" name="tag_245_subfield_u_270150_676903" value="http://www.test.com/2073-4441/8/1/23/pdf" class="input_marceditor noEnterSubmit" tabindex="1" size="67" maxlength="9999" style="color:red;">

PS : Even though this works there is a chance that all the attributes are not compatible with destination tag type. You'll need to make some conditions and adjustments accordingly.

Wow, that was fast, it seems your answer Rejith worked. I'll try it again and accept your answer. Thank you very much! — schnydszch, Feb 18 '16 at 06:31

Macainian · Answer 2 · 2016-02-18T06:30:27.020

0

At no point in time did you transfer everything from the first to the second except style, but you aren't using style. You are only using "cols", "row" "id", "name", "class", "tabindex", "size", and "maxlength". I do not know of a way to do them all at once, but you can certainly copy them one by one in the same way you are doing the "style". For the value, use .val() to get and set:

textbox.val($(this).val());

Had to make a correction. I didn't notice what you were calling textbox.

Just wanted to tack on one more thing. Everything within <> is an attribute and can be obtained using attr(), but that doesn't make them part of the style attribute even if they are for styling. Also note that some attributes are special and can be obtained through prop(), data(), and css(). Class has one too, but I forget what it is at the moment.

edited Feb 18 '16 at 06:30

answered Feb 18 '16 at 06:24

Macainian

362
2
10

Thanks Macainian! Rejith's answer seems resolved my issue. Oh well, need to read more on jquery/javascript! – schnydszch Feb 18 '16 at 06:38
Apparently I do too, lol. Until Rejith's post, I didn't realize you could get value with prop() and apparently everything. Now I question what the point of attr() is. – Macainian Feb 18 '16 at 06:40
See this [glorious thread](http://stackoverflow.com/questions/5874652/prop-vs-attr). `prop()` was on versions from `jQuery 1.6`. – rrk Feb 18 '16 at 07:00

jQuery to change input to text area with attribute and atrribute values intact

2 Answers2