Avatar of Bob-Villa
Bob-Villa

asked on 

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);
  }
JavaScriptAJAX

Avatar of undefined
Last Comment
MoreHeroic
Avatar of MoreHeroic
MoreHeroic

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
Avatar of MoreHeroic
MoreHeroic

Blurred text
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
Avatar of DropZone
DropZone
Flag of United States of America image

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

Avatar of Bob-Villa
Bob-Villa

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?
Avatar of Bob-Villa
Bob-Villa

ASKER

figured it out wass className, not class.
Avatar of DropZone
DropZone
Flag of United States of America image

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.
Avatar of MoreHeroic
MoreHeroic

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

JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and in almost every mainstream web browser.

127K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
Ask the experts
Read over 600 more reviews

TRUSTED BY

IBM logoIntel logoMicrosoft logoUbisoft logoSAP logo
Qualcomm logoCitrix Systems logoWorkday logoErnst & Young logo
High performer badgeUsers love us badge
LinkedIn logoFacebook logoX logoInstagram logoTikTok logoYouTube logo