Question

my reset button is able to work but in my sample form, I have two files to reset them individually. Now when i press my reset button, it will reset two fields.I can’t use form.reset() to call out because I won’t want to reset my whole form values. So if I have two files selected for browse and browseAssign and I click cancel. Both values gone.

Updated Code:
<form name = "sample" id = "sample" action ="nextpage.php">
<input name="Name" type="text" id="Name" value="Joey"/>
<input name="browse" type="file"/>
<button type="reset" title="Cancel" onClick="document.getElementsByName('browse').value=''"><span>cancel</span></button>

<input name="browseAssign" type="file"/>
<button type="reset" title="Cancel" onClick="document.getElementsByName('browseAssign').value=''"><span>cancel</span></button>

</form>

It still reset two browse fields.Kindly advise.

Answer 1

Use this:

<form name="sample" id="sample" action="nextpage.php">
<input name="Name" type="text" id="Name" value="Joey" />
<input id="browse" name="browse" type="file" />
<button title="Cancel" onclick="event.preventDefault();document.getElementById('browse').value='';"><span>cancel</span></button>
<input id="browseAssign" name="browseAssign" type="file" />
<button title="Cancel" onclick="event.preventDefault();document.getElementById('browseAssign').value='';"><span>cancel</span></button>
</form>

How it works: add IDs to the file inputs, then in the onclick event, prevent the default action (submitting the form) and then reset the value of the input in question to ''.