Question: Just so I get a better understanding of how to write preventDefault as opposed to return false. Here is an example of return false. I would like to rewrite this code using preventDefault

My HTML:

```
<form name="myForm" action="formPracticePHP.php" method="post" onsubmit="return validateForm()">

    <p>Enter your Name: <input type="text" name="name" value="" placeholder="[your-name]" required="required" /><br /></p>
    <p>Enter your Age:  <input type="number" name="age" size="6" value="" /><br /></p>

    <p>Please Select Your Favorite Fruit</p>
    <select name="fruit" id="fruit">
       <option value="nothing" selected="selected">Select A Fruit</option>
       <option value="Bannana">Bannana</option>
       <option value="Kiwi">Kiwi</option>
       <option value="Mango">Mango</option>
       <option value="Apple">Apple</option>
       <option value="Cherry">Cherry</option>
    </select>

    <input type="submit" name="submit" value="submit" id="submitBtn" />  
</form>

```

My JavaScript

```
function validateForm() {
   var x = document.forms["myForm"]["age"].value;
   var x2 = document.forms["myForm"]["fruit"].value;
      if ((x==null || x=="") || (x2 == null || x2=="nothing")) {
        alert("Age and fruit selection must be filled out");
        return false;

      }
}

```

Answer: 
You have to pass the `event` argument into your handler

```
<form onsubmit="validateForm(event)" >

```

And change your function

```
function validateForm(e) {
   var x = document.forms["myForm"]["age"].value;
   var x2 = document.forms["myForm"]["fruit"].value;
    if ((x==null || x=="") || (x2 == null || x2=="nothing")) {
         e.preventDefault();
         alert("Age and fruit selection must be filled out");
      }
}

```

If you're setting the handler from JavaScript, the same function above will also work.
Assuming that `validateForm` is registered as an `onsubmit` handler for your form, you should be able to do this:

```
function validateForm(e) {
   var x = document.forms["myForm"]["age"].value;
   var x2 = document.forms["myForm"]["fruit"].value;
   if ((x==null || x=="") || (x2 == null || x2=="nothing")) {
       alert("Age and fruit selection must be filled out");
       e.preventDefault(); // here    
   }
}

```

If you are using an `onsubmit` attribute in your HTML to do this, you can remove the `return` portion and you will need to pass the event to it:

```
onsubmit="validateForm(event)"

```

However, I would strongly recommend not using your HTML attributes to specify event handlers and instead register the handler using your JavaScript code:

```
window.onload = function () {
    document.forms["myForm"].addEventListener("onsubmit", validateForm);
};

```