js form action动态修改方法

动态修改表单的 Action 属性是在表单提交时将表单的数据使用 HTTP 请求发送到 Action 的 URL 地址，实现前端与后端的数据传输，并将数据处理结果显示给用户。使用 JavaScript 可以动态修改表单的 Action 属性来实现动态提交表单的目的。

步骤如下：

1. 获取表单元素并为其添加绑定事件，当事件触发时执行处理函数。

const form = document.getElementById('form');
form.addEventListener('submit', handleSubmit);

1. 编写处理函数来修改表单的 Action 属性。

const handleSubmit = (event) => {
  event.preventDefault(); // 阻止表单默认提交行为
  const searchInput = document.getElementById('search');
  const inputValue = searchInput.value.trim();
  if (inputValue) {
    form.action = `https://example.com/search?query=${inputValue}`;
    form.submit();
  }
}

在此代码中，我们通过获取输入框中的值，将该值作为查询参数放入 Action 的 URL 中，并使用表单的 submit() 方法进行提交，实现了动态修改表单的 Action 属性。

示例说明1：动态更改搜索表单 Action 属性

<form id="form" method="get" action="https://example.com/search">
  <input type="text" id="search" name="query">
  <button type="submit">搜索</button>
</form>

<script>
const form = document.getElementById('form');
form.addEventListener('submit', handleSubmit);

function handleSubmit(event) {
  event.preventDefault(); // 阻止表单默认提交行为
  const searchInput = document.getElementById('search');
  const inputValue = searchInput.value.trim();
  if (inputValue) {
    form.action = `https://example.com/search?query=${inputValue}`;
    form.submit();
  }
}
</script>

示例说明2：动态更改付款表单 Action 属性

<form id="payment-form" method="post" action="">
  <input type="text" name="card-number" placeholder="信用卡号码">
  <input type="text" name="expiration-date" placeholder="过期日期">
  <input type="text" name="cvv" placeholder="CVV">
  <button type="submit">立即付款</button>
</form>

<script>
const form = document.getElementById('payment-form');
form.addEventListener('submit', handlePayment);

function handlePayment(event) {
  event.preventDefault(); // 阻止表单默认提交行为
  const cardNumberInput = document.getElementsByName('card-number')[0];
  const expirationInput = document.getElementsByName('expiration-date')[0];
  const cvvInput = document.getElementsByName('cvv')[0];
  const cardNumberValue = cardNumberInput.value.trim();
  const expirationValue = expirationInput.value.trim();
  const cvvValue = cvvInput.value.trim();
  if (cardNumberValue && expirationValue && cvvValue) {
    form.action = 'https://example.com/payment';
    form.submit();
  }
}
</script>

在以上示例中，我们使用了类似的方法动态更改表单的 Action 属性，并在表单提交时使用新的 URL 地址发送表单数据进行处理。需要注意的是，在实现这一功能时需要先阻止表单的默认提交行为，否则无法动态更改 Action 属性。