Replace an input with another dynamically created input [duplicate]

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
– KingJulian, Commented Sep 4, 2013 at 14:53

KingJulian · Accepted Answer · 2013-09-05 17:54:19Z

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 5, 2013 at 17:54

KingJulian

9631 gold badge9 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 12:28:01Z

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, 2017 at 12:28

CommunityBot

11 silver badge

answered Sep 4, 2013 at 15:00

lomas09

1,1024 gold badges13 silver badges29 bronze badges

Comments

Martin · Accepted Answer · 2013-09-04 15:04:48Z

0

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.

answered Sep 4, 2013 at 15:04

Martin

3,3461 gold badge29 silver badges50 bronze badges

Comments

Moazzam Khan · Accepted Answer · 2013-09-04 15:24:03Z

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 4, 2013 at 15:24

answered Sep 4, 2013 at 14:59

Moazzam Khan

3,1702 gold badges23 silver badges38 bronze badges

2 Comments

KingJulian Over a year ago

How do I copy all the properties of previous file input into new text input?

Moazzam Khan Over a year ago

you can use attr method or just by simple JavaScript

KingJulian · Accepted Answer · 2013-09-05 18:07:16Z

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 5, 2013 at 18:07

KingJulian

9631 gold badge9 silver badges20 bronze badges

answered Sep 4, 2013 at 15:38

Emery Lapinski

1,6621 gold badge19 silver badges28 bronze badges

2 Comments

KingJulian Over a year ago

This is cool. I changed it to: input.replaceWith(input[0].outerHTML.replace(/type="file"/, 'type="input"'));

Emery Lapinski Over a year ago

outerHTML might not work on Firefox quirksmode.org/dom/w3c_html.html

Collectives™ on Stack Overflow

Replace an input with another dynamically created input [duplicate]

5 Answers 5

Comments

Comments

Comments

2 Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

2 Comments

2 Comments

Linked

Related