4

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?

Alex R
  • 10,320
  • 12
  • 76
  • 145
BobFlemming
  • 1,980
  • 11
  • 42
  • 58

4 Answers4

5

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();
Rory McCrossan
  • 306,214
  • 37
  • 269
  • 303
  • For the record, the way you've passed id and name to the new textarea won't work. It should be `id: input.attr("id")` and `name: input.attr("name")`. – Heraldmonkey Jul 23 '14 at 09:26
1

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

ikromm
  • 505
  • 6
  • 13
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();
Richard
  • 20,650
  • 13
  • 59
  • 97
1
$("<textarea>value</textarea").insertAfter($(parent).find('#excerpt'));
$(parent).find('input#excerpt').remove()
Yorgo
  • 2,628
  • 1
  • 14
  • 24