使用 jQuery 动态修改表单 action 属性并提交

在网页开发中，我们经常会遇到需要根据用户操作动态调整表单提交地址的场景，比如不同用户身份跳转不同的处理接口、选择不同业务类型提交到对应的后端路由等。jQuery 提供了简洁的 DOM 操作方法，能够快速实现动态修改表单 <form> 标签的 action 属性并提交表单的需求。

核心实现思路

实现这个功能主要分为三个步骤：

• 首先通过 jQuery 选择器选中目标表单元素
• 调用 attr() 方法修改表单的 action 属性值为目标地址
• 调用 submit() 方法触发表单的提交行为

基础示例代码

下面是一个最简单的实现示例，点击按钮后会将表单的提交地址修改为指定的后端接口，并自动提交表单：

// 等待页面DOM加载完成后执行
$(document).ready(function() {
  // 给提交按钮绑定点击事件
  $('#submitBtn').on('click', function() {
    // 选中id为targetForm的表单元素
    var $form = $('#targetForm');
    // 动态修改表单的action属性，这里替换为实际的后端接口地址
    $form.attr('action', 'http://ipipp.com/api/submit');
    // 触发表单提交
    $form.submit();
  });
});

对应的 HTML 表单结构如下，注意其中的 <form> 标签和 <input> 标签都需要按规范转义展示：

<form id="targetForm" method="post">
  <input type="text" name="username" placeholder="请输入用户名">
  <input type="password" name="password" placeholder="请输入密码">
  <button type="button" id="submitBtn">提交表单</button>
</form>

动态场景扩展示例

实际业务中往往需要更灵活的调整，比如根据用户选择的下拉框值切换不同的提交地址，下面的示例实现了这个功能：

$(document).ready(function() {
  // 业务类型下拉框 change 事件
  $('#bizType').on('change', function() {
    // 获取用户选择的业务类型值
    var selectedBiz = $(this).val();
    var actionUrl = '';
    
    // 根据业务类型匹配对应的提交地址
    switch(selectedBiz) {
      case 'user':
        actionUrl = 'http://ipipp.com/api/user/submit';
        break;
      case 'order':
        actionUrl = 'http://ipipp.com/api/order/submit';
        break;
      case 'goods':
        actionUrl = 'http://ipipp.com/api/goods/submit';
        break;
      default:
        actionUrl = 'http://ipipp.com/api/default/submit';
    }
    
    // 修改表单action属性
    $('#dynamicForm').attr('action', actionUrl);
  });
  
  // 表单提交按钮点击事件
  $('#dynamicSubmitBtn').on('click', function() {
    var $form = $('#dynamicForm');
    // 提交前可以做一些校验
    var username = $('input[name="username"]').val();
    if (!username) {
      alert('请输入用户名');
      return false;
    }
    // 校验通过则提交表单
    $form.submit();
  });
});

对应的 HTML 结构如下：

<form id="dynamicForm" method="post">
  <select id="bizType" name="bizType">
    <option value="user">用户相关</option>
    <option value="order">订单相关</option>
    <option value="goods">商品相关</option>
  </select>
  <input type="text" name="username" placeholder="请输入用户名">
  <button type="button" id="dynamicSubmitBtn">提交</button>
</form>

注意事项

在实际使用时需要注意以下几点：

• 修改 action 属性后再调用 submit() 方法，才能确保表单提交到新的地址，如果先提交再修改属性，修改不会生效
• 如果表单本身有默认 action 属性，动态修改后会覆盖原有的值，如需恢复可以提前保存原始 action 值
• 如果需要阻止表单默认提交行为，可以在事件处理函数中返回 false 或者使用 event.preventDefault() 方法
• 若页面引入了多个版本的 jQuery，需要确保使用的 attr() 和 submit() 方法来自正确的 jQuery 实例，避免出现方法不存在的错误

jQuery动态表单提交修改action属性动态修改表单ajax动态action表单提交事件