asked on 1/9/2009

JavaScript Replace INPUT TYPE=FILE with New, Blank INPUTS

I upload photos to an iframe (8 boxes named and id'd PH1,PH2, etc...)
but it is annoying that after upload the file inputs still have the file path displayed.
I know you cannot set the value to NULL because of security but is there an easy way in Internet Explorer to replace the inputs with new ones having blank values but retaining the same name? Or possibly have them in a div and do something with innerHTML and replace a whole block of elements?

her's a loop that grabs each element.

var x=document.forms[0];
var z;
for (var y=1; y<=8; y++) {
z=eval("x.PH"+y);
}

JavaScript AJAX

Last Comment

MoreHeroic

1/9/2009

MoreHeroic

1/9/2009

How about something like the following?

var x=document.forms[0];
var z;
for (var y=1; y<=8; y++) {
z=eval("x.PH"+y);
var currentElement = document.createElement("input");
currentElement.setAttribute("type", "file");
if(z.name)
{
currentElement.setAttribute("name", z.name);
}
if(z.id)
{
currentElement.setAttribute("id", "hiddenName");
}
z.parentNode.replaceChild(currentElement,z);
}

ASKER CERTIFIED SOLUTION

MoreHeroic

1/9/2009

THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

DropZone

1/9/2009

If all you want to do is to clear the input boxes, why not just call a function that does this from the OnLoad event of the window? See below for an example.

-dZ.

<script language="JavaScript" type="text/javascript">
function clearInput() {
    var frm = document.forms[0];
    for (var i = 0; i < frm.elements.length; i++) {
        var elm = frm.elements[i];
        if (elm.type == 'file') {
            elm.value = '';
        }
    }
}
 
// Call clearInput() when the page loads.
window.onload = clearInput;
</script>

Open in new window

Bob-Villa

1/9/2009

ASKER

MoreHeroic, perfect, tested and working. The other solution is an onload trigger which is not what I am looking for. Just curious. Can I also set the className and onfocus/onblur behaviors also?

Bob-Villa

1/9/2009

ASKER

figured it out wass className, not class.

DropZone

1/9/2009

Sure. You could set those hooks declaratively:

<input type="file" id="foo" onfocus="myFunc()" />

or programmatically:

<script type="text/javascript">
var elm = document.getElementById('foo');
if (elm != null) elm.onfocus = myFunc;
</script>

The same for the onblur event.

-dZ.

MoreHeroic

1/9/2009

Thanks, sorry I was distracted there for a while. Glad it's working out for you.