表单提交时如何避免特定输入项加入GET请求数据？

你遇到的问题是浏览器**前进/后退缓存（BF Cache）**导致的——当用户点击后退时，浏览器会直接恢复页面的状态（包括元素的禁用属性），所以需要额外处理来恢复这些元素的可用性。下面是几个可行的解决方案：

方案1：监听页面显示事件恢复元素状态 #

在页面加载（包括后退返回）时主动启用这些输入项，确保每次页面显示时元素都是可用的：

// 页面加载或通过后退返回时，恢复元素可用状态
$(window).on('pageshow', function() {
    $(sellForm + " input[name=fiat_amount], " + sellForm + " select[name=fiat_currency]")
        .removeAttr('disabled');
});

// 表单提交时禁用元素，排除提交数据
$(sellForm).on('submit', function() {
    $(sellForm + " input[name=fiat_amount], " + sellForm + " select[name=fiat_currency]")
        .attr('disabled', 'disabled');
});

这个方案兼容性好，不管表单提交后是否跳转，后退时都能自动恢复元素状态。

方案2：提交时临时修改元素name属性（替代禁用） #

禁用元素会被浏览器缓存状态，不如直接修改元素的name属性——表单提交时只会包含有有效name的字段，修改后这些字段就不会被提交，同时元素保持可用，后退时也不会有状态问题：

$(sellForm).on('submit', function() {
    const $targets = $(sellForm + " input[name=fiat_amount], " + sellForm + " select[name=fiat_currency]");
    // 保存原name值，方便后续恢复（如果需要）
    $targets.each(function() {
        $(this).data('orig-name', $(this).attr('name'));
        $(this).attr('name', '');
    });
});

// 如果表单提交失败（比如前端验证不通过），可以手动恢复name
// 示例：绑定表单重置事件恢复
$(sellForm).on('reset', function() {
    const $targets = $(sellForm + " input[data-orig-name], " + sellForm + " select[data-orig-name]");
    $targets.each(function() {
        $(this).attr('name', $(this).data('orig-name')).removeData('orig-name');
    });
});

这个方案不需要处理页面缓存状态，元素始终保持可用，只是提交时被排除。

方案3：提交前移除元素（适合提交后跳转的场景） #

如果表单提交后一定会跳转到新页面，直接移除这些元素即可——既不会被提交，也不用担心后退后的状态问题（因为后退回来的页面会重新加载元素）：

$(sellForm).on('submit', function() {
    $(sellForm + " input[name=fiat_amount], " + sellForm + " select[name=fiat_currency]").remove();
});

注意：如果表单存在前端验证，验证失败后这些元素会丢失，所以只适合确定提交后页面跳转的场景。

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