如何将HTML下拉框选中内容导出到Replit的.txt文件？

纯HTML表单无法直接写入服务器端的cardspicked.txt文件——你当前的代码用GET方法请求txt文件，只会在浏览器中展示文件内容，不会对文件进行修改。要实现写入文件的功能，必须搭配后端脚本处理表单提交请求。

步骤1：调整HTML表单代码 #

将表单的请求方法改为POST，提交地址指向后端处理路由，同时修正原代码中不必要的引号转义：

<!DOCTYPE html>
<html>
  <body>
    <form action="/submit" method="post">
      <h3>What is your favorite low elixir Clash Royale card?</h3>
      <label for="low_elixir">Choose a card:</label>
      <select name="low_elixir" id="low_elixir">
        <option>Heal Spirit</option>
        <option>Skeletons</option>
        <option>Electro Spirit</option>
        <option>Fire Spirit</option>
        <option>Ice Spirit</option>
        <option>Wall Breakers</option>
        <option>Bats</option>
        <option>Spear Goblins</option>
        <option>Bomber</option>
        <option>Ice Golem</option>
        <option>Goblins</option>
        <option>Rage</option>
        <option>Giant Snowball</option>
        <option>Barbarian Barrel</option>
        <option>Zap</option>
        <option>The Log</option>
      </select>
      <hr>
      <h3>What about medium elixir?</h3>
      <label for="med_elixir">Choose a card:</label>
      <select name="med_elixir" id="med_elixir">
        <option>Knight</option>
        <option>Ice Wizard</option>
        <option>Mega Minion</option>
        <option>Dart Goblin</option>
        <option>Goblin Gang</option>
        <option>Miner</option>
        <option>Minions</option>
        <option>Bandit</option>
        <option>Princess</option>
        <option>Guards</option>
        <option>Archers</option>
        <option>Firecracker</option>
        <option>Royal Ghost</option>
        <option>Elixir Golem</option>
        <option>Skeleton Barrel</option>
        <option>Fisherman</option>
        <option>Skeleton Army</option>
        <option>Battle Healer</option>
        <option>Zappies</option>
        <option>Skeleton King</option>
        <option>Hunter</option>
        <option>Valkyrie</option>
        <option>Flying Machine</option>
        <option>Mighty Miner</option>
        <option>Electro Wizard</option>
        <option>Magic Archer</option>
        <option>Night Witch</option>
        <option>Inferno Dragon</option>
        <option>Battle Ram</option>
        <option>Mini P.E.K.K.A</option>
        <option>Musketeer</option>
        <option>Baby Dragon</option>
        <option>Golden Knight</option>
        <option>Skeleton Dragons</option>
        <option>Dark Prince</option>
        <option>Night Witch</option>
        <option>Lumberjack</option>
        <option>Cannon</option>
        <option>Tombstone</option>
        <option>Mortar</option>
        <option>Bomb Tower</option>
        <option>Tesla</option>
        <option>Furnace</option>
        <option>Goblin Cage</option>
        <option>Goblin Drill</option>
        <option>Goblin Barrel</option>
        <option>Royal Delivery</option>
        <option>Tornado</option>                     
        <option>Earthquake</option>
        <option>Arrows</option>
        <option>Clone</option>
        <option>Fireball</option>
        <option>Freeze</option>
        <option>Poison</option>
      </select>
      <hr>
      <h3>High elixir?</h3>
      <label for="high_elixir">Choose a card:</label>
      <select name="high_elixir" id="high_elixir">
        <option>Barbarians</option>
        <option>Royal Hogs</option>
        <option>Giant</option>
        <option>Prince</option>
        <option>Wizard</option>
        <option>Ram Rider</option>
        <option>Cannon Cart</option>
        <option>Rascals</option>
        <option>Witch</option>
        <option>Minion Horde</option>
        <option>Executioner</option>
        <option>Balloon</option>
        <option>Archer Queen</option>
        <option>Bowler</option>
        <option>Electro Dragon</option>
        <option>Elite Barbarians</option>
        <option>Goblin Giant</option>
        <option>Sparky</option>
        <option>Royal Giant</option>
        <option>Giant Skeleton</option>
        <option>Mega Knight</option>
        <option>P.E.K.K.A</option>
        <option>Royal Recruits</option>
        <option>Lava Hound</option>
        <option>Electro Giant</option>
        <option>Golem</option>
        <option>Three Musketeers</option>
        <option>Goblin Hut</option>
        <option>Inferno Tower</option>
        <option>Elixir Collector</option>
        <option>X-Bow</option>
        <option>Barbarian Hut</option>
        <option>Graveyard</option>
        <option>Lightning</option>
        <option>Rocket</option>
      </select>
      <hr>
      <button type="submit" value="Submit">Submit</button>
    </form>
  </body>
</html>

步骤2：创建后端服务器代码 #

在Replit项目根目录创建server.js文件，用Express处理表单提交并写入文件：

const express = require('express');
const bodyParser = require('body-parser');
const fs = require('fs');
const path = require('path');

const app = express();
const PORT = process.env.PORT || 3000;

// 解析表单数据
app.use(bodyParser.urlencoded({ extended: true }));
// 托管静态HTML文件
app.use(express.static(path.join(__dirname, 'public')));

// 处理表单提交的路由
app.post('/submit', (req, res) => {
  const { low_elixir, med_elixir, high_elixir } = req.body;
  // 构造写入内容，添加时间戳区分不同记录
  const logEntry = `${new Date().toLocaleString()} - Low: ${low_elixir}, Medium: ${med_elixir}, High: ${high_elixir}\n`;

  // 以追加模式写入cardspicked.txt
  fs.appendFile('cardspicked.txt', logEntry, (err) => {
    if (err) {
      console.error(err);
      return res.status(500).send('Failed to save your selection.');
    }
    res.send('Your card selection has been saved successfully!');
  });
});

app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

步骤3：在Replit中配置项目 #

1. 创建新的Node.js项目
2. 将修改后的HTML文件放入新建的public文件夹
3. 在终端运行npm install express body-parser安装依赖
4. 点击运行按钮启动服务器，访问生成的URL即可测试

替代方案（基于Python Flask） #

若更熟悉Python，可使用Flask实现：

1. 安装依赖：pip install flask
2. 创建app.py文件：

from flask import Flask, render_template, request
from datetime import datetime

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/submit', methods=['POST'])
def submit():
    low = request.form.get('low_elixir')
    med = request.form.get('med_elixir')
    high = request.form.get('high_elixir')
    entry = f"{datetime.now().strftime('%Y-%m-%d %H:%M:%S')} - Low: {low}, Medium: {med}, High: {high}\n"
    
    with open('cardspicked.txt', 'a', encoding='utf-8') as f:
        f.write(entry)
    
    return 'Your card selection has been saved successfully!'

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=3000)

3. 将HTML文件放入新建的templates文件夹并命名为index.html，运行项目即可。

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