如何将HTML/JScript网页表单数据追加到TXT文件？

原代码存在的问题 #

• ActiveXObject仅支持IE浏览器：现代Chrome、Firefox、Edge等主流浏览器都已移除对ActiveX的支持，这段代码在绝大多数环境下无法运行。
• 表单提交默认行为未阻止：点击提交按钮后，浏览器会默认刷新页面，可能导致文件写入操作未完成就中断，同时用户体验差。
• 追加内容无分隔符：写入的姓名直接拼接，多次提交后内容会连在一起，无法区分不同条目。
• 权限限制：即使在IE中，浏览器也会默认阻止ActiveX控件运行，需要用户手动授权，操作门槛高且不安全。

修正后的客户端代码（仅IE兼容，不推荐） #

如果一定要用客户端JScript（仅适合IE环境），可做以下调整：

<html>
    <head>
        <title>Form</title>
        <script> 
            function Write(form) {
                // 阻止表单默认刷新行为
                event.returnValue = false;
                
                var forename = form.Forename.value.trim();
                var surname = form.Surname.value.trim();
                
                // 简单校验输入
                if (!forename || !surname) {
                    alert("请输入完整的姓名");
                    return;
                }

                var fso, f;
                var ForAppending = 8; // 明确变量含义：追加模式对应值为8
                try {
                    fso = new ActiveXObject("Scripting.FileSystemObject");
                    // 以追加模式打开文件，添加换行分隔条目
                    f = fso.OpenTextFile("text.txt", ForAppending, true);
                    f.WriteLine(forename + " " + surname);
                    f.Close();
                    alert("数据已成功追加");
                    // 清空表单
                    form.reset();
                } catch (e) {
                    alert("写入失败：" + e.message);
                }
            }
        </script>
    </head>
    <body>
        <form onSubmit="Write(this)">
            <input type="text" name="Forename" id="Forename" placeholder="名" size="20">
            <input type="text" name="Surname" id="Surname" placeholder="姓" size="20">
            <input type="submit" value="添加人员">
        </form>
    </body>
</html>

推荐方案：使用服务器端脚本（通用安全） #

客户端直接操作本地文件存在极大安全风险，现代浏览器均禁止此类操作。正确做法是通过服务器端脚本处理文件写入，以下是Node.js + Express的实现示例：

1. 服务器端代码（server.js） #

const express = require('express');
const fs = require('fs');
const path = require('path');
const app = express();

// 解析表单数据
app.use(express.urlencoded({ extended: true }));

// 处理表单提交请求
app.post('/submit', (req, res) => {
    const { Forename, Surname } = req.body;
    if (!Forename || !Surname) {
        return res.send("请输入完整姓名");
    }
    const content = `${Forename} ${Surname}\n`;
    // 追加写入文件
    fs.appendFile(path.join(__dirname, 'text.txt'), content, (err) => {
        if (err) {
            return res.send("写入失败：" + err.message);
        }
        res.send("数据已成功追加");
    });
});

// 提供静态页面访问
app.use(express.static(__dirname));

app.listen(3000, () => {
    console.log("服务器运行在http://localhost:3000");
});

2. 前端页面（index.html） #

<html>
    <head>
        <title>Form</title>
    </head>
    <body>
        <form action="/submit" method="post">
            <input type="text" name="Forename" id="Forename" placeholder="名" size="20">
            <input type="text" name="Surname" id="Surname" placeholder="姓" size="20">
            <input type="submit" value="添加人员">
        </form>
    </body>
</html>

使用前需先安装express依赖（执行npm install express），再运行node server.js，访问http://localhost:3000即可使用。

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