Rails 7 表单提交异常：如何让表单跳转至指定外部链接而非服务器

问题场景 #

在Rails项目的erb视图中编写了如下表单：

<form id="megapayForm" name="megapayForm" method="POST">
      <label for="merId" >MerchantId:</label>
      <input type="text" id="merId" name="merId" ><br><br>
      <label for="currency">Currency:</label>
      <input type="text" id="currency" name="currency" ><br><br>
      <input type="submit" id="submit" value="Submit">
</form>

配套的submit.js代码如下：

$.ajax({
   url: 'https://www.cloudflare.com/cdn-cgi/trace', 
   success: function(data){
             
            
        },
   complete: function(){
      $("#" + formId).attr("action", domain + "acb.do");
      setTimeout(function(){ paymentForm.submit(); }, 100);
   }
});

Rails控制器代码：

class TransactionController < ApplicationController
   def index
   end
end

点击提交按钮时，表单并未跳转到domain + "acb.do"，而是被Rails路由重定向到了transaction#create方法。

解决方案 #

1. 阻止表单默认提交行为 #

点击submit按钮会触发浏览器默认的表单提交动作，直接走Rails的RESTful路由。必须先通过JS阻止这个默认行为，再执行自定义逻辑：

$('#megapayForm').on('submit', function(e) {
  // 阻止浏览器默认提交动作
  e.preventDefault();

  // 执行AJAX请求
  $.ajax({
     url: 'https://www.cloudflare.com/cdn-cgi/trace', 
     success: function(data){
        // 这里可根据需要处理AJAX返回的数据
     },
     complete: function(){
        // 设置表单提交地址
        $("#megapayForm").attr("action", domain + "acb.do");
        // 手动触发表单提交
        $("#megapayForm").submit();
     }
  });
});

2. 修正JS中的未定义变量问题 #

原代码里的formId和paymentForm变量未声明，会导致无法定位表单元素。可以直接使用表单ID选择器，或者提前定义变量：

// 提前定义表单变量，避免未定义错误
const paymentForm = $('#megapayForm');
const formId = 'megapayForm';

// 后续使用变量操作表单
paymentForm.attr("action", domain + "acb.do");
paymentForm.submit();

3. 改用普通按钮触发逻辑（可选） #

如果不想处理submit事件的默认行为，可以把submit按钮改为普通按钮，通过click事件触发逻辑：

<!-- 将submit按钮改为普通button -->
<input type="button" id="submitBtn" value="Submit">

对应的JS代码：

$('#submitBtn').on('click', function() {
  $.ajax({
     url: 'https://www.cloudflare.com/cdn-cgi/trace', 
     success: function(data){
        // 处理返回数据
     },
     complete: function(){
        $("#megapayForm").attr("action", domain + "acb.do");
        $("#megapayForm").submit();
     }
  });
});

4. 确认Rails路由配置 #

确保没有额外的路由规则强制拦截表单请求，RESTful路由默认会把POST请求指向create动作，但只要通过JS阻止默认提交并手动设置action，就能绕过这个逻辑。

内容的提问来源于stack exchange，提问作者Thang Nguyen