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

The problem you face is that TextArea is a an element not an attribute.

You should look to remove the previous element and replace with a new text area of the same name:

 var myoldInput = $('#myInput');  
 var value = myoldInput.val();
 $("<textarea id='myInput'></textarea>").before(myoldInput).val(value);
 myoldInput.remove();

Answer 2

$("<textarea>value</textarea").insertAfter($(parent).find('#excerpt'));
$(parent).find('input#excerpt').remove()

Answer 3

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

Answer 4

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();