如何使用JavaScript隐藏表单的action属性？

嘿，我来帮你解决这个问题！其实要隐藏表单的action属性，核心思路是不让目标提交地址直接暴露在HTML代码里——因为只要写在HTML里，用户查看源码就能看到。下面给你两种实用的方案：

方案1：完全用JavaScript处理表单提交（最推荐） #

这种方法直接去掉HTML里的action属性，用JS监听表单提交事件，手动发送请求。这样提交地址只会存在于JS代码中（生产环境还可以混淆JS，进一步隐藏）。

首先修改你的HTML，移除action属性：

<form method="post" role="form" id="form">
  <div class="form-group">
    <textarea class="form-control" id="forms" name="forms" required="required"></textarea>
  </div>
  <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 col-md-offset-5">
    <div class="form-group">
      <button type="submit" name="valid" class="btn btn-success">Start</button>
      <button type="button" id="stop" class="btn btn-danger">Stop</button>
    </div>
  </div>
</form>

然后添加JavaScript代码，处理提交逻辑：

// 获取表单元素
const form = document.getElementById('form');

// 监听表单提交事件
form.addEventListener('submit', function(e) {
  // 阻止浏览器默认的表单提交行为
  e.preventDefault();
  
  // 收集表单里的所有数据
  const formData = new FormData(this);
  
  // 用Fetch API发送POST请求到目标地址（这里就是原来的test.php）
  fetch('test.php', {
    method: 'POST',
    body: formData
  })
  .then(response => {
    // 处理服务器返回的响应，比如跳转、提示成功等
    if (response.ok) {
      console.log('提交成功！');
      // 这里可以添加后续操作，比如跳转到结果页
      // window.location.href = 'success.html';
    } else {
      throw new Error('提交失败');
    }
  })
  .catch(error => {
    console.error('出错了：', error);
    // 提示用户提交失败
    alert('提交失败，请稍后重试');
  });
});

方案2：动态修改/隐藏action属性（适合临时需求） #

如果你暂时不想完全重构提交逻辑，可以在页面加载后清空action属性，只在提交前动态设置。不过这种方法只是在DOM面板里隐藏，用户查看原始HTML还是能看到原来的地址，所以不如方案1彻底。

代码示例：

const form = document.getElementById('form');
// 页面加载后清空action属性
window.addEventListener('load', function() {
  form.action = '';
});

// 提交前重新设置action并提交
form.addEventListener('submit', function(e) {
  e.preventDefault();
  // 动态设置目标地址
  this.action = 'test.php';
  // 执行提交
  this.submit();
});

总结一下，方案1是最安全的隐藏方式，因为提交地址不会出现在HTML中，完全由JS控制，还能灵活处理提交后的逻辑。

内容的提问来源于stack exchange，提问作者Nafiz Ur Rahman