如何将HTML input与Vue渲染的div内容通过PHP保存到TXT文件

问题原因 #

HTML 表单默认仅会提交内置表单元素（input、select、textarea 等）的内容，div 不属于可被表单自动识别的提交元素，即使设置 name 属性也不会被纳入表单提交数据，因此 PHP 侧无法接收到对应内容。

可行解决方案 #

方案1：新增隐藏表单域（最简便，无需修改原有PHP逻辑） #

直接在表单内新增一个隐藏的 input 元素，通过 Vue 动态绑定其值为拼接好的姓名，该隐藏元素会跟随表单自动提交：

<form method="POST" id="someform">
  <input placeholder="Enter Email" type="email" name="email">
  <!-- 新增隐藏input，同步Vue的姓名变量 -->
  <input type="hidden" name="name" :value="`${firstName} ${lastName}`">
  <div>{{firstName}} {{lastName}}</div>
<!-- 修正原有代码的错误闭合标签，把多余的</div>换成form闭合 -->
</form>

修改完成后原有PHP代码可直接拿到 $name 变量正常写入。

方案2：通过AJAX手动提交表单 #

如果需要更灵活的提交控制，可以监听表单提交事件，手动组装数据提交给PHP：

1. 给表单绑定Vue提交事件：

<form method="POST" id="someform" @submit.prevent="submitForm">
  <input placeholder="Enter Email" type="email" name="email" v-model="email">
  <div>{{firstName}} {{lastName}}</div>
  <button type="submit">提交</button>
</form>

2. 新增Vue提交方法：

// Vue实例的methods配置
methods: {
  async submitForm() {
    const formData = new FormData();
    formData.append('email', this.email);
    formData.append('name', `${this.firstName} ${this.lastName}`);
    // 提交到你的PHP接口地址
    await fetch('write.php', {
      method: 'POST',
      body: formData
    });
    // 可自行添加提交成功/失败的提示逻辑
  }
}

PHP代码优化建议 #

原有代码中直接使用 extract($_REQUEST) 存在变量覆盖的安全风险，建议改为显式获取请求参数，同时使用 PHP_EOL 兼容不同系统的换行符：

<?php 
$email = isset($_POST['email']) ? trim($_POST['email']) : '';
$name = isset($_POST['name']) ? trim($_POST['name']) : '';
// 可自行添加参数合法性校验
if (!empty($email) && !empty($name)) {
    $file = fopen("emails.txt", "a");
    fwrite($file, "email :");
    fwrite($file, $email . PHP_EOL);
    fwrite($file, "name :");
    fwrite($file, $name . PHP_EOL);
    fclose($file);
    echo "写入成功";
} else {
    echo "参数不完整";
}
?>

内容的提问来源于stack exchange，提问作者Mark Julien Hahn