Delete Cookie With Button using JavaScript

Question

I have been agonizing over this for several days now and I'm just burned out and in need of guidance. I'm new to JavaScript, so i apologize in advance. My goal is to take 3 inputs from a form and save them to a cookie. Here is the html form portion:

<form name="userData" action="">

        <fieldset align="center">
            <legend align="center">Create a User Account</legend>

            <label>First Name: </label>
            <span>
                <input type="text" size="25" name="field1">
            </span>

            <label>Password: </label>
            <span>
                <input type="text" size="25" name="field2">
            </span>

            <label>Email: </label>
            <span>
                <input type="text" size="25" name="field3">
            </span>
        </fieldset>
    </form>
</div>  

<div align="center">
    <input type="submit" value="Set Cookies" onClick="setCookies();">
    <input type="submit" value="Show Cookie Data" onClick="showCookies();">
    <input type="button" value="Clear Cookies" onClick="clearCookies();">
</div>

After submitting the form data the user should see a pop-up showing the cookie info from the form they just filled out. Keep in mind, they shouldn't be able to submit the form until ALL three fields have been filled out. Here are the Javascript functions I have scripted thus far, the first is setting the cookie and presenting the popup:

function setCookies()
{
  if (document.userData.field1.value == "")
  {
    alert("Please Fill In All Form Values!");
    return;
  }

  else if (document.userData.field2.value == "")
  {
    alert("Please Fill In All Form Values!");
    return;
  }

  else if (document.userData.field3.value == "")
  {
    alert("Please Fill In All Form Values!");
    return;
  }

  else
  {
    cookievalue1 = escape(document.userData.field1.value);
    document.cookie = cookievalue1;

    cookievalue2 = escape(document.userData.field2.value);
    document.cookie = cookievalue2;

    cookievalue3 = escape(document.userData.field3.value);
    document.cookie = cookievalue3;

    alert("The Following Data Has Been Saved To a Cookie:\n" + "\nFirst Name = " + cookievalue1 + "\nPassword = " + cookievalue2 + "\nEmail = " + cookievalue3);
  }
}

Now this function is tied to the second button which merely displays the cookie that was saved upon submission:

function showCookies()
{
  alert("First Name: " + cookievalue1 + "\nPassword: " + cookievalue2 + "\nEmail: " + cookievalue3)
}

The THIRD button, the one that is supposed to wipe the cookie is where I have no clue what to do. Any guidance is GREATLY appreciated. All I have is this alert within my function that should display when the button is pressed and the logic (that's not yet present) executes:

function clearCookies()
{
  alert('Your Coookies Have Been Deleted')
}

Again, if anyone has any recommendations as to simplification, i'm open to it. I just cant look at this anymore, my eyes feel like acid and I can feel the hair on my head turning gray.

Answer 1

You can just see all the W3C Examples and you'll be fine!

Delete a Cookie with JavaScript

Deleting a cookie is very simple. Just set the expires parameter to a passed date:

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

Answer 2

You can delete a cookie by just setting its expires parameter to a passed date. For example:

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

w3schools has an example very similar to what you are trying to do. Check it out here: http://www.w3schools.com/js/js_cookies.asp.