Replace an input with another dynamically created input

Question

I want to replace an existing file input field entirely with a text input field, with all properties intact like id, name, etc. How do I do that using jQuery?

Prelude:

I have an <input type="file" name=".." id=".." /> that I am using for AJAX based uploads. (yes, For IE, I am submitting the form using IFRAMEs.)

When the upload is done, I go into my success callback function, where I am trying to change the original <input type="file" to <input type="text".

In other browsers, this is working fine when I simply run the following code:

$originalInput[0].type = 'text';
$originalInput[0].value = 'response code';

But this is not working in IE, where I came to know from SO that it is a security concern and hence not allowed. I want to write minimum code for this.

How to do that with minimum code? Do I need to create an `input` in `jQuery` dynamically and iterate all properties of original input pushing them to new? — KingJulian, Sep 04 '13 at 14:53

score 1 · Answer 1 · answered Sep 05 '13 at 17:54

1

From user2259571's answer, I did this following in a shorter one-line way:

$originalInput
    .replaceWith( $originalInput[0].outerHTML.replace(/type="file"/, 'type="input"') );

answered Sep 05 '13 at 17:54

KingJulian

893
8
16

Moazzam Khan · Answer 2 · 2013-09-04T15:24:03.097

0

Long live jQuery

    var fileInput = $('input[type="file"]');
    var textInput = $('<input type="text"/>');

    //can copy properties here 
    textInput.value = 'response code';
    textInput.className = fileInput.className;

textInput.insertBefore(fileInput);
textInput.remove();

edited Sep 04 '13 at 15:24

answered Sep 04 '13 at 14:59

Moazzam Khan

2,888
2
17
32

How do I copy all the properties of previous file input into new text input? – KingJulian Sep 04 '13 at 15:10
you can use `attr` method or just by simple JavaScript – Moazzam Khan Sep 04 '13 at 15:21

score 0 · Answer 3 · edited May 23 '17 at 12:28

0

IE does not allow this, but a workaround can be:

$('body').find('input:file').each(function() {
  $("<input type='text' />").attr({value: 'response code' }).insertBefore(this);
}).remove();

possible duplicate of jQuery change input type

edited May 23 '17 at 12:28

Community

1
1

answered Sep 04 '13 at 15:00

lomas09

1,104
4
12
27

score 0 · Answer 4 · answered Sep 04 '13 at 15:04

I think you can reach this very simple by placing two inputs,

<input type="file" name="somename1" id="someid1"/>
<input type="text" name="somename1-after" id="someid1-after" style="display:none"/>

In you request callback you can remove the type="file" input field, strip the "-after" suffix and show the type="text" input field.

score 0 · Answer 5 · edited Sep 05 '13 at 18:07

0

var input = $("input[type=file]");
var inputHTML = input.clone().wrapAll("<div>").parent().html();

var newinputHTML = inputHTML.replace(/type="file"/, 'type="text"');

input.replaceWith(newinputHTML);

http://jsfiddle.net/QdZDb/1/

edited Sep 05 '13 at 18:07

KingJulian

893
8
16

answered Sep 04 '13 at 15:38

Emery Lapinski

1,342
17
22

This is cool. I changed it to: `input.replaceWith(input[0].outerHTML.replace(/type="file"/, 'type="input"'));` – KingJulian Sep 05 '13 at 17:51
outerHTML might not work on Firefox http://www.quirksmode.org/dom/w3c_html.html – Emery Lapinski Sep 11 '13 at 15:44

Replace an input with another dynamically created input

5 Answers5