更改表单的操作答案

【问题标题】：change action for form更改表单的操作
【发布时间】：2021-08-03 07:56:08
【问题描述】：

如何使用 javascript 和使用 onsubmit 按钮更改表单的操作。我试图写这个，但什么也没发生，尽管我在 jsp 文件中使用 js 更改了操作表单，但页面不会改变有没有办法调试js

如何在点击提交按钮后立即更改表单的操作属性？

<form id="cust" name="cust" method="post" onsubmit="return myAction()">
  <table style="with: 50%">
    <tr>
      <td>a</td>
      <td><input type="date" name="departureDate" placeholder="yyyy-mm-dd" value="">
      </td>
    </tr>
    <tr>
      <td>b</td>
      <td>
        <select name="comeFrom">
          <option value="a">a</option>
          <option value="b">b</option>
          <option value="c">c</option>
          <option value="d">d</option>
        </select>
      </td>
    </tr>
  </table>
  <input type="submit" name="io" value="next" />
</form>

【问题讨论】：

如果您提交表单，页面将重新加载并重置所有内容 - 因为您在提交时返回 true，所以表单已提交
您也使用 getElementById 但表单没有 ID。将name="cust" 更改为id="cust" 但仍会提交
为什么要更改操作？如果您想提交到服务器而不重新加载表单，则需要查看 AJAX
@mplungjan 是的，我也设置了 id 并且操作不会改变
它发生了变化，但随后您的表单被提交，由于您没有操作，页面只是重新加载，清除更改的操作

标签： javascript html css forms

【解决方案1】：

这很简单。监听提交事件并在回调函数中更改操作。

document.forms.form01.addEventListener('submit', e => {
  e.target.action = 'page02';
});

<form name="form01" action="page01" method="post">
  <button>Submit</button>
</form>

【讨论】：