How to reset form and delete Cookie after clicking on reset button?

Question

I am saving the drop down selections in a cookie called "mysettings". However, after running through the program (myform.htm) first time and saved the selections of these two fields in the cookie, on the second run, I want to delete the cookie and reset both drop down boxes on clicking the Reset button at the same time.

MYFORM.HTM:

<form action="myform.htm" method="post" >
    Field 1: <select name="f1">
        <option value="1">First</option>
        <option value="2">Second</option>
        <option value="3">Third</option>
    </select> 
    Field 2: <select name="f2">
        <option value="1">First</option>
        <option value="2">Second</option>
        <option value="3">Third</option>
    </select> 
    <input type="reset" value ="Reset" onclick= 'document.cookie = "mysettings=; expires=Fri, 29 Jun 2018 00:00:00 GMT; path/";'/>  &nbsp;&nbsp;
    <input type="submit" name="action" value=" Submit ">
</form>

However, it does not delete the cookie nor reset the form. What am I doing wrong?

Thanks in advance.

--- EDITED --- I have found the issue with deleting the cookie. It was missing a SECURE parameter. The cookie was secured by Coldfusion but the cookie deletion is missing that parameter, therefore it won't delete. So now I have:

<form action="myform.htm" method="post" >
    Field 1: <select name="f1">
        <option value="1">First</option>
        <option value="2">Second</option>
        <option value="3">Third</option>
    </select> 
    Field 2: <select name="f2">
        <option value="1">First</option>
        <option value="2">Second</option>
        <option value="3">Third</option>
    </select> 
    <input type="reset" value ="Reset" onclick= "clearset()">  &nbsp;&nbsp;
    <input type="submit" name="action" value=" Submit ">
</form>

<script>
function clearset () {
    document.cookie = "mysettings=; expires=Thu, 18 Dec 2013 12:00:00 UTC; secure; path=/"; 
    window.location.reload();
}       
</script>

Now the cookie gets deleted, however, the Reset will still not reset the fields. The reason I believe was due to the fields were "selected" based on the stored cookie value. Even though the cookie was deleted, the page doesn't know that. So a reload is most likely required? But even with the reload, the fields are still not reset . I had to press the Reset key again to reset it? Is there a way to reload and reset the fields automatically or totally avoid reload altogether?

Answer 1

now that you fixed cookies, I think it should be easy to reset form values according to here Form reset() Method w3 schools

just use

document.getElementById("myForm").reset();

no need for reload

Answer 2

I have finally found a solution, Simple as it may sound, adding a "true" to the reload() function fixed it!

window.location.reload(true);

Apparently, Firefox and Chrome etc. don't really reload with the reload(). Adding that parameter seems to do a force reload. It must have been a hidden feature