Resetting an HTML "File" element value...

[JScannell]

Boy, this one has me totally stumped. I have a multipart form with 4 file inputs. I need to blank out the values based on another form action. While I can see the value, I can't set it to "".

HTML statement:
<input type="file" name="file1" size=80>

Javascript to clear it out:
document.getdata.file1.value = "";

This won't work. I have seen some examples online where you remove the form element and then add a new one, but that doesn't work right because it places the new element outside of the table structure.

Thanks in advance,


Jerry Scannell

 

[feherke]

Hi

The JavaScript's access to the [tt]file[/tt] [tt]input[/tt]s is limited for security reason. Setting its [tt]value[/tt] to empty string is permitted, but as far as I know, only in Mozillas.

that doesn't work right because it places the new element outside of the table structure.

That is not a reason for not using it. Is a reason for correcting it.

Feherke.

http://rootshell.be/~feherke/

 

[JScannell]

The setting the value to "" doesn't work.

What possible security hazard could there be in blanking out any form element?

(BTW, the text you quoted from me was related to somebody else who suggested deleting and reinserting the file input element)

Thanks,

Jerry Scannell

 

[feherke]

Hi

What possible security hazard could there be in blanking out any form element?

None. That is why is permitted in Mozillas.

(BTW, the text you quoted from me was related to somebody else who suggested deleting and reinserting the file input element)

Yes, that is how I understood. Probably the examples you seen were of poor quality or not intended to be reusable. But there can not be so big mistake that a Programmer can not correct. Point us to those examples or, even better, to your attempt of using them and we will be able to help you to correct it.

Feherke.

http://rootshell.be/~feherke/

 

[JScannell]

OK. Here's the code:

function BlankOut_FileElement ( strFileObj )
{
var f = document.getElementById( strFileObj );
f.parentNode.removeChild(f);

document.getElementById('getdata').appendChild(f);
return true;
}

When I call it, I use: f = BlankOut_FileElement ( "file1" )

When it's finished, the area of the screen where the input was is gone (due to the removeChild) and a new one ends up at the bottom of the screen (due to the appendChild). And the element's content isn't blank!

I would like to provide an attached word document that shows the screen before and after calling the function, but don't know how to.

Thanks,

Jerry Scannell

 

[feherke]

Hi

No new element is created there, is just putting back the original one. This will be closer to what you want, but is still not a fully generic one.

function BlankOut_FileElement ( strFileObj )
{
   var o=document.getElementById( strFileObj );
   var p=o.parentNode;
   p.removeChild(o);

   var n=document.createElement('input');
   with (n) {
     type='file';
     id=strFileObj;
     name=o.name;
     className=o.className;
   }
   p.appendChild(n);
}

Feherke.

http://rootshell.be/~feherke/

 

[JScannell]

Thanks. That worked but I need to add the onChange event to the object. Can that be done by simply adding:
onChange = "<event function call>"

Thanmks,

Jerry Scannell

 

[feherke]

Hi

That is just another line in the [tt]with[/tt] :

  with (n) {
     type='file';
     id=strFileObj;
     name=o.name;
     className=o.className;
     [red]onchange=o.onchange;[/red]
   }

Feherke.

http://rootshell.be/~feherke/

 

[JScannell]

Awesome! That worked perfectly!

Thanks so much.

Jerry Scannell

 

[feherke]

Hi

Thinking again, this will do the same, but better. If the parent element has more children, the new element will keep its position.

function BlankOut_FileElement(strFileObj)
{
   var o=document.getElementById(strFileObj);
   var n=document.createElement('input');
   var p=o.parentNode;

   p.insertBefore(n,o);
   p.removeChild(o);

   with (n) {
     type='file';
     id=strFileObj;
     name=o.name;
     className=o.className;
     onchange=o.onchange;
   }
}

Feherke.

http://rootshell.be/~feherke/

 

[JScannell]

Actually, your original way keeps its position as well. That was the first thing I saw. The only things I had to add was the "size" and "onchange" properties. I had originally typed "onChange = o.onChange" then sent another post where you showed: "onchange = o.onchange" (darn case-sensitivity!)

Everything is fine now.

Thanks,

Jerry Scannell

 

[feherke]

Hi

Actually, your original way keeps its position as well.

Apparently, because you probably had it alone in a [tt]td[/tt]. But if it was not alone :

<td>
[red]Name : [/red][green]<input name="f1" type="file" id="hmm" onchange="alert('hi')">[/green] [blue]<b>required</b>[/blue]
</td>
       [gray]|[/gray]
       [gray]|[/gray]
      [gray]\ /[/gray]
       [gray]V[/gray]
<td>
[red]Name : [/red] [blue]<b>required</b>[/blue][green]<input name="f1" type="file" id="hmm" onchange="alert('hi')">[/green]
</td>

This is why I wrote the second version.

Feherke.

http://rootshell.be/~feherke/

 

[JScannell]

OK. I don't usually place more than one "file" form element inside a single <td>. And it's only "file" elements that can't be cleared out via a xxx = "" coding.

Thanks,

Jerry Scannell