Trying to enter data into a form then display the data on the same page and in a pop up window

Question

Every time I fill in the whole form the data disappears. If i just fill out three inputs it displays fine, but when I enter the final piece of data and hit display it erases everything. then i also need the data to display in a pop up window. I have been starting at the code for too long i think.

function displayData() {

  var a = document.getElementById("name").value;
  var b = document.getElementById("add").value;
  var c = document.getElementById("phone").value;
  var d = document.getElementById("course").value;
  var e = document.getElementById("email").value;

  data1.innerHTML = ("<ul><li><strong>Name:</strong>" + a + "</li>" +
    "<li><strong>Address:</strong>" + b + "</li>" +
    "<li><strong>Phone:</strong>" + c + "</li>" +
    "<li><strong>Courses:</strong>" + d + "</li>" +
    "<li><strong>Email:</strong>" + e + "</li></ul>");

}

<form>

  <p align="center">

    <lable><b>Name:</b></lable>
    <input type="text" id="name" required/>
    <br>

  </p>
  <p align="center">

    <lable><b>Address:</b></lable>
    <input type="text" id="add" required/>
    <br>

  </p>
  <p align="center">

    <lable><b>Phone:</b></lable>
    <input type="tel" id="phone" required/>
    <br>

  </p>
  <p align="center">

    <lable><b>Email:</b></lable>
    <input type="text" id="email" required/>
    <br>

  </p>
  <p align="center">

    <select class="scrol" id="course" size="3" width="15px">

      <option>Android</option>
      <option>Java</option>
      <option>C#</option>
      <option>Data Base</option>

    </select>

  </p>

  <br>

  <p align="center">

    <button type="submit" onclick="displayData()">Display</button>
    <button type="reset">Reset</button>

  </p>

</form>

Message is:

<p id="data1"></p>

I outputs fine until i fill everything in. any assistance is appreciated

Answer 1

How to prevent form from being submitted?

function displayData(event) {
  event.preventDefault();
  var a = document.getElementById("name").value;
  var b = document.getElementById("add").value;
  var c = document.getElementById("phone").value;
  var d = document.getElementById("course").value;
  var e = document.getElementById("email").value;
  var message = document.getElementById("data1");

  data1.innerHTML = ("<ul><li><strong>Name:</strong>" + a + "</li>" +
    "<li><strong>Address:</strong>" + b + "</li>" +
    "<li><strong>Phone:</strong>" + c + "</li>" +
    "<li><strong>Courses:</strong>" + d + "</li>" +
    "<li><strong>Email:</strong>" + e + "</li></ul>");
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet" />
<form>
  <label>Name:
  <input type="text" id="name" required/></label>
  <label>Address:
  <input type="text" id="add" required/></label>
  <label>Phone:
  <input type="tel" id="phone" required/></label>
  <label>Email:
  <input type="text" id="email" required/></label>
  <select id="course">
    <option>Android</option>
    <option>Java</option>
    <option>C#</option>
    <option>Data Base</option>
  </select>
  <button onclick="displayData(event)">Display</button>
  <button type="reset">Reset</button>
</form>

Message is:

<p id="data1"></p>