Each time I complete the entire form, the data vanishes. However, if I only input three fields, it displays properly. But as soon as I enter the last piece of data and click on display, everything gets erased. Moreover, I also require the data to be shown in a popup window. I believe I have been looking at the code for too long.
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>The output works fine until all fields are filled in. Any help would be greatly appreciated