clear input works in FF but not IE

[dragon_sa]

Thanks to Vic my validation check is working, I made a change to clear the form field with the wrong file type is detected, but it only clears the field in FF not IE, what have I missed for cross browser compatibility.

Vics function including my clear command

<script>
function showDiv(objectID) {
 var ip=document.getElementById('image_file'),txt=ip.value.split('.');
 var theElementStyle = document.getElementById(objectID);
 theElementStyle.style.visibility = "hidden";
 if (txt.length==2&&(txt[1]=='jpg'||txt[1]=='JPG')){
  theElementStyle.style.visibility = "visible";
 }
 else {
  document.getElementById('image_file').value = "";
  alert('File MUST be type JPG or jpg, Please Browse again for CORRECT type.');
 }
}
</script>

the part I added above to clear the form file input field

document.getElementById('image_file').value = "";

the form input it affects

SELECT NEW IMAGE&nbsp;&nbsp;<input name="image_file" type="file" size="35" id="image_file" accept="image/jpeg" onchange="showDiv('submitDiv');return true;" onkeypress="return nokeys(event)">

[jscheuer1]

There's kinda a law against taking any kind of control over a file input. You could replace the file element with another:

var nfile = document.createElement('input');
nfile.type = 'file';
nfile.id = 'image_file';
nfile.name = 'image_file';
nfile.size = '35';
nfile.accept = 'image/jpeg';
nfile.onchange = function(){showDiv('submitDiv');return true;};
nfile.onkeypress = function(){return nokeys(event)};
document.getElementById('image_file').parentNode.replaceChild(nfile, document.getElementById('image_file'));

Do that instead of:

document.getElementById('image_file').value = "";

But if your file input is in a form - say:

<form name="file_form" action="#">
	<input name="image_file" id="image_file"" type="file" size="60" value="" />
	<input type="hidden" name="setTime" value="<?php echo $current; ?>" />
	<input type="hidden" name="pchange" value="Change File" />
	<input type="submit" value="Change File" /> &nbsp;&nbsp;<b>( Changes Image )</b>
</form>

You can simply reset the form:

document.forms.file_form.reset();

I just tested that in IE 9 and it works. And it won't affect the hidden fields because a reset will reset them to the value thay had when the page first loaded.

But that cuts both ways. If the file input had an initial value, a reset will restore that rather than simply emptying its value.

[dragon_sa]

Thanks John, used the reset (); and it works a treat, I even managed to add the feature of disabling the input so they cant select another file after they have chosen the correct type, and enabling it again when the form is submitted, so the value gets passed

Heres what I ended up doing

script

<script>
function showDiv(objectID) {
 var ip=document.getElementById('image_file'),txt=ip.value.split('.');
 var theElementStyle = document.getElementById(objectID);
 theElementStyle.style.visibility = "hidden";
 if (txt.length==2&&(txt[1]=='jpg'||txt[1]=='JPG')){
  document.getElementById("chgMSG").style.display="none";
  document.getElementById("submitDiv").style.display="block";
  theElementStyle.style.visibility = "visible";
  ip.disabled = "disabled";
 }
 else {
  document.forms.pic.reset();
  alert('File MUST be type JPG or jpg, Please Browse again for CORRECT type.');
 }
}
function enableField() {
  document.pic.image_file.disabled = false;
}
</script>

then for the form

<form action="chgIMG.php" name="pic" method="post" enctype="multipart/form-data" target="_parent">
	<input type="hidden" name="picID" value="<?php echo $current; ?>" />
	<input type="hidden" name="page" value="<?php echo $page; ?>" />
	SELECT NEW IMAGE&nbsp;&nbsp;<input name="image_file" type="file" size="35" id="image_file" accept="image/jpeg" onchange="showDiv('submitDiv');return true;" onkeypress="return nokeys(event)">
	<br/>
	<div id="chgMSG">New Image <b>MUST</b> be a <b>JPG</b> or <b>jpg</b> Image file type, and must also be a <b>horizontal</b> Image</div>
	<div id="submitDiv"><input type="submit" style='vertical-align:middle;' name="submitIMG" value="Click to Upload New Image" onclick="javascript:enableField()" /></div>
</form>