JQuery changing hidden input type in textarea

Question

I have a hidden field. After the drop event, it should be converted to "textarea".

It:

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

Produces

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

Nothing uses "textarea", but only works for "text". Addendum:

 .val('HERE') 

TO:

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

the string changes the value of the text field, so the selector works, and the <span> element is inserted and deleted correctly.

Is this an insurmountable security issue? Or is there a way to do this?

Answer 1

Since textarea is a completely different input element, it is easier to just create a new textarea and delete the input . Try the following:

 $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 delete the item you want to change and add a new one ...

Answer 3

The problem you are facing is that TextArea is an element, not an attribute.

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

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

Answer 4

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