尝试将表单输入值显示到表格中却出现405错误求助

你的405错误根源是表单提交触发了POST请求：静态HTML页面的服务器通常不支持POST方法，点击submit按钮时浏览器会自动向当前页面发送POST请求，导致服务器返回405 Method Not Allowed。同时你的代码还有几个语法和结构问题，一起帮你修正：

核心问题与修复步骤 #

1. 表单提交行为问题
   你不需要提交表单，只是要触发JS显示数据，所以把按钮从type="submit"改成普通的type="button"，避免浏览器自动提交表单。

2. HTML结构错误
   你把表格容器<div id="table">放在了</html>标签外面，这不符合HTML规范，浏览器无法正确解析，必须移到<body>内部。

3. 按钮属性语法错误
   原按钮代码<input type"button" class="button" type="submit" onclick="Display()">存在两处错误：type"button"少了等号，且重复定义了type属性，直接修正为单一的type="button"即可。

修改后的完整代码 #

HTML文件

<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" value="Submit" onclick="Display()">
    </form>

    <!-- 表格容器移至body内部 -->
    <div id="table" style="display:none;" class="answer_list" > 
        <table id="myTable" border="1">
            <!-- 添加表头增强可读性 -->
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Phone Number</th>
            </tr>
        </table>
    </div>

    <script src="main.js"></script>
</body>
</html>

JavaScript文件（优化版）

function Display() {
    document.getElementById('table').style.display = "block";
    var table = document.getElementById("myTable");
    // insertRow(-1)将新行插入到表格末尾，而非表头上方
    var row = table.insertRow(-1);

    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);

    // 用textContent替代innerHTML，避免XSS风险，更安全
    cell1.textContent = document.getElementById("fname").value;
    cell2.textContent = document.getElementById("lname").value;
    cell3.textContent = document.getElementById("phone").value;
}

额外优化说明 #

• 给表格添加border="1"，方便你直观看到表格结构（默认无边框可能会误以为没显示）
• 新增表头，让表格数据更清晰
• 使用textContent替代innerHTML，防止用户输入恶意代码，提升安全性
• 调整insertRow(-1)，让新数据行显示在表头下方而非上方

内容的提问来源于stack exchange，提问作者Kashif