I'm trying to display the values from a form into a table but I'm getting 405 errors. I was previously using CSS for styling but I've removed them but still, the code is not working. I've also checked on the internet but still, I'm unable to find the solution to it.
I'm a beginner so any help would be appreciated!
Here's my HTML file
<html>
<head>
</head>
<body>
<h1 id="headline"> Welcome to Bread & Butter Co.</h1>
<form action="#" method="post" name="form_name" id="form_id" class="form_class">
<label> First Name </label>
<input type="text" title="Name" id="fname" placeholder="Enter your First name">
<br>
<label> Last Name </label>
<input type="text" title="Name" id="lname" placeholder="Enter your last name">
<br>
<Label>Phone/Mobile Number</Label>
<input type="number" title="Phone Number" id="phone" placeholder="Enter your phone number">
<br>
<input type="reset" value="Reset">
<input type"button" class="button" type="submit" onclick="Display()">
</form>
</body>
<script src="main.js"></script>
</html>
<div id="table" style="display:none;" class="answer_list" > <table id="myTable">
</table></div>
Here's my Javascript file
function Display()
{
document.getElementById('table').style.display = "block";
var table = document.getElementById("myTable");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = document.getElementById("fname").value;
cell2.innerHTML = document.getElementById("lname").value;
cell3.innerHTML = document.getElementById("phone").value;
}
There's a couple things you can do.
1- You can remove type="submit" from your button.
2- Or you can send event to your function like onclick="Display(event)" then you can use preventDefault() like :
function Display(e){
e.preventDefault();
...