Form keeps ignoring the preventDefault JS event.

Hello experts:
My form keeps ignoring the preventDefault JS event.
I built an html form with JS backend connected. The form is supposed to write to a Firebase db. The db is already active and works with an Android app. Permissions for testing are set to true for write and read.
I built the JS file incrementally testing code with the console log along the way. It worked perfectly till the Firebase script was added. Now it ignores the event to preventDefault.
The console lists no exceptions.
The site is https://www.hrmualpha.com.
I have looked and looked at this till my eyes are falling out of my head. Can you spot what I'm missing?
Thanks.

The HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Acme Web Design</title>
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" />
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <h1 class="brand"><span>Acme</span> Web Design</h1>
    <div class="wrapper">
      <div class="company-info">
        <h3>Acme Web Design</h3>
        <ul>
          <li><i class="fa fa-road"></i> 44 Something st</li>
          <li><i class="fa fa-phone"></i> (555) 555-5555</li>
          <li><i class="fa fa-envelope"></i> test@acme.test</li>
        </ul>
      </div>
      <div class="contact">
        <h3>Email Us</h3>
        <div class="alert">Your message has been sent</div>
        <form id="contactForm">
          <p>
            <label>Name</label>
            <input type="text" name="name" id="name" >
          </p>
          <p>
            <label>Company</label>
            <input type="text" name="company" id="company">
          </p>
          <p>
            <label>Email Address</label>
            <input type="email" name="email" id="email" >
          </p>
          <p>
            <label>Phone Number</label>
            <input type="text" name="phone" id="phone">
          </p>
          <p class="full">
            <label>Message</label>
            <textarea name="message" rows="5" id="message"></textarea>
          </p>
          <p class="full">
            <button type="submit">Submit</button>
          </p>
        </form>
      </div>
    </div>
  </div>
  <script>
    // Initialize Firebase
    var config = {
      apiKey: "************",
      authDomain: "*********",
      databaseURL: "************",
      projectId: "*********",
      storageBucket: "**********",
      messagingSenderId: "*********"
    };
    <!-- firebase.initializeApp(config);-->
  </script>
  <script src="https://www.gstatic.com/firebasejs/5.4.1/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/5.4.1/firebase-database.js"</script>
  <script src="main.js"></script>
</body>
</html>

Open in new window

The JS code:

  // Create Reference Collection
  var testvaluesRef = firebase.database().ref('testvalues');

// Listen for form submit
document.getElementById('contactForm').addEventListener('submit', submitForm);

// Submit form
function submitForm(e){
  e.preventDefault();

console.log(123);



 // Get values
  var name = getInputVal('name');
  var email = getInputVal('email');
  var phone = getInputVal('phone');
  var allvalues = name + ", " + email + ", " + phone;
  console.log(allvalues);


  // Save values to Firebase
 saveTestValues(name, email, phone);



// Function to get get form values
function getInputVal(id){
  return document.getElementById(id).value;
}
}

// Save values to firebase
function saveTestValues(name, email, phone){
  var newtestvaluesRef = testvaluesRef.push();
  newTestvaluesRef.set({
    name: name,
    email:email,
    phone:phone
  })
  console.log(newTestvaluesRef);
}

Open in new window

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

LVL 25

Snarf0001Commented: 2018-08-26

One of those things that will really irritate you....
You're missing an end tag around the second firebase script. So your main.js is never actually loading.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial

Robert BellowsAuthor Commented: 2018-08-27

Snarf0001,
Thanks. I can't believe how many times I looked at that and missed it.

Form keeps ignoring the preventDefault JS event.

Who is Participating?