如何根据支付网关选择动态设置表单POST至不同URL？

你可以通过JavaScript监听单选按钮的选择变化，动态修改表单的action属性来实现需求。以下是具体实现步骤和完整代码：

实现思路 #

• 监听两个单选按钮的change事件
• 根据选中的选项，更新表单的提交地址
• 可选：在表单提交前再次确认地址，避免异常情况

完整代码 #

<h3>Page Redirection Request</h3>
<form action="https://sandbox.bankalfalah.com/SSO/SSO/SSO" id="PageRedirectionForm" class="PageRedirectionForm" method="post" novalidate="novalidate">
    <input type="radio" autocomplete="off" id="TransactionTypeId" class="TransactionTypeId" name="TransactionTypeId" value="Bank account" checked> Bank Account
    <input type="radio" autocomplete="off" id="TransactionTypeId1" class="TransactionTypeId" name="TransactionTypeId" value="Easypaisa"> Easypaisa

    Amount: <input autocomplete="off" id="TransactionAmount" name="TransactionAmount" class="TransactionAmount" placeholder="Transaction Amount" type="text" value="5000">
    <button type="submit" class="btn btn-custon-four btn-danger run" id="run">RUN</button>
</form>

<script>
// 获取表单元素和单选按钮组
const form = document.getElementById('PageRedirectionForm');
const transactionTypeRadios = document.querySelectorAll('input[name="TransactionTypeId"]');

// 定义地址映射
const actionUrls = {
    'Bank account': 'https://sandbox.bankalfalah.com/SSO/SSO/SSO',
    'Easypaisa': 'https://easypay.easypaisa.com.pk/easypay/Index.jsf'
};

// 监听单选按钮变化事件
transactionTypeRadios.forEach(radio => {
    radio.addEventListener('change', function() {
        if (this.checked) {
            form.action = actionUrls[this.value];
        }
    });
});

// 可选：提交前再次验证地址，确保正确性
form.addEventListener('submit', function(e) {
    const selectedValue = document.querySelector('input[name="TransactionTypeId"]:checked').value;
    form.action = actionUrls[selectedValue];
});
</script>

代码说明 #

1. 地址映射对象：用actionUrls存储选项值和对应提交地址的映射，便于后续维护和修改
2. 单选按钮监听：给每个单选按钮绑定change事件，选中时立即更新表单的action属性
3. 提交前验证：额外添加表单提交事件监听，再次确认提交地址，防止因其他操作导致地址异常
4. 默认选中处理：给"Bank account"单选按钮加上checked属性，确保页面加载时表单默认提交地址正确

这样就能实现选中不同支付方式时，表单提交到对应的网关地址。

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