如何为含双提交按钮的HTML表单搜索结果追加指定预设文本

你可以给每个提交按钮新增自定义属性存储需要追加的预设前缀，在原有onclick逻辑的基础上增加搜索词拼接逻辑即可，以下是可直接运行的修改后代码：

<form action="" method="get">
    <input type="text" value="Hakunamatata"  id="box" name="search_query" placeholder="text" autofocus />

    <input type="submit" value="BNG" formaction="https://testurl1.com" 
        data-prefix="site:imdb.com/title "
        onclick="
            const input = document.getElementById('box');
            input.name='q';
            // 缓存用户原始输入，避免多次点击重复拼接前缀
            if(!input.dataset.originValue) input.dataset.originValue = input.value;
            input.value = this.dataset.prefix + input.dataset.originValue;
        " />

    <input type="submit" value="ABB" formaction="http://testurl2.com"
        data-prefix="此处替换为ABB按钮需要的前缀 "
        onclick="
            const input = document.getElementById('box');
            input.name='s';
            if(!input.dataset.originValue) input.dataset.originValue = input.value;
            input.value = this.dataset.prefix + input.dataset.originValue;
        " />
</form>

如果需要提交后还原输入框的原始内容给用户看，可以额外给form增加onsubmit事件：

<form action="" method="get" onsubmit="
    const input = document.getElementById('box');
    setTimeout(()=>{
        input.value = input.dataset.originValue || '';
        delete input.dataset.originValue;
    },100)
">
<!-- 表单其余内容保持不变 -->
</form>

逻辑说明 #

• 每个按钮通过data-prefix自定义属性存储对应需要拼接的前缀，不同按钮可以独立配置完全不同的前缀内容，按需修改属性值即可
• 完全保留了原有修改搜索参数名的逻辑，兼容testurl1需要q、testurl2需要s的要求
• 增加了原始输入内容的缓存逻辑，避免用户多次点击提交按钮导致前缀重复拼接的问题
• 可选的提交后还原逻辑，不会修改用户在输入框中看到的内容，使用体验更友好

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