jQuery change input type=text to textarea

Question

I have a hidden field . After a drop event it needs to be transformed to a 'textarea'.

This:

      excerpt = $(parent).find('#excerpt').attr('type', 'textarea');
      excerpt.val('textarea');

Produces the

property cannot be changed

error

This method : Change element type from hidden to input

marker = $('<span />').insertBefore('#myInput');
$('#myInput').detach().attr('type', 'textarea').insertAfter(marker);
marker.remove();

Does nothing using 'textarea' , but works for just 'text'.Adding:

.val('HERE')

To the :

$('#myInput').detach().attr('type', 'textarea').val('HERE').insertAfter(marker);

line does result in the value of the the text box changing , so the selector is working and the <span> element is being inserted and removed correctly.

Is this an insurmountable security issue? Or is there a way of doing it?

Answer 1

Because a textarea is a completely different element to input it's easier to simply create a new textarea and remove the input. Try this:

$input = $("#myHiddenInput")
$textarea = $("<textarea></textarea>").attr({
    id: $input.prop('id'),
    name: $input.prop('name'),
    value: $input.val()
});
$input.after($textarea).remove();

Answer 2

You can always remove the element you want to change and add a new one...