如何替换HTML表单提交触发方式，实现相同GET请求与页面加载效果

实现方案 #

方案1：调用表单原生submit方法（最推荐，和原有提交逻辑完全一致）

先给表单和输入框加ID方便选择：

<form action="" method="get" id="searchForm">
    <input type="text" name="seq" id="seqInput" placeholder="Search by ID">
</form>

触发方式1：按回车键提交（符合常规使用习惯）

document.getElementById('seqInput').addEventListener('keydown', function(e) {
    if (e.key === 'Enter') {
        document.getElementById('searchForm').submit();
    }
});

这个方法会完全走表单原生的提交逻辑，自动拼接GET参数、重载页面，和你原来点击提交按钮的效果完全一致。

触发方式2：输入后自动提交（加防抖避免频繁请求）

如果需要输入过程中自动触发，建议加防抖逻辑，避免每输入一个字符就重载一次页面：

let submitTimer = null;
document.getElementById('seqInput').addEventListener('keyup', function() {
    clearTimeout(submitTimer);
    // 输入停止300ms后再提交，时长可自行调整
    submitTimer = setTimeout(() => {
        document.getElementById('searchForm').submit();
    }, 300);
});

方案2：手动拼接URL跳转

如果你不想操作表单元素，也可以直接拼接参数修改当前页面地址，效果和表单提交一致：

document.getElementById('seqInput').addEventListener('keyup', function() {
    // 对输入值做编码，避免特殊字符导致URL解析错误
    const seq = encodeURIComponent(this.value.trim());
    window.location.href = `myurl/?seq=${seq}`;
});

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