如何实现HTML表单提交时Action URL正确拼接用户输入值

• HTML标签的属性是静态解析的，无法直接在属性值中拼接JS函数的返回结果，你写在action中的giveme()不会被执行
• 表单使用method="get"提交时，会自动把所有带name属性的表单字段以?参数名=参数值的格式追加到请求地址末尾，这就是你看到?keyword=前缀的原因

直接监听表单提交事件，阻止默认提交行为后手动拼接目标地址跳转即可，改后完整代码如下：

<form id="myform" class="form-horizontal" onsubmit="handleSubmit(event)">
    <div id="searchkeyword">
         <div class="form-group">
            <label for="keyword" class="col-sm-3 control-label">Enter keyword</label>
            <div class="col-sm-4">
                <input type="text" id="keyword" class="form-control">
                <br>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-3 col-sm-9">
            <button type="submit" class="btn btn-primary">Submit &raquo;</button>
            <span class="small-paddingleft">*Required</span>
        </div>
    </div>
</form>
<script>
function handleSubmit(e) {
    // 阻止表单默认提交行为
    e.preventDefault();
    // 获取用户输入的关键词
    const keyword = document.getElementById('keyword').value.trim();
    // 可自定义非空校验逻辑
    if (!keyword) {
        alert('请输入关键词');
        return;
    }
    // 拼接目标地址跳转，encodeURIComponent处理特殊字符编码
    window.location.href = 'http://127.0.0.1:5000/default/' + encodeURIComponent(keyword);
}
</script>

改动说明 #

• 移除form标签原有的action、method属性，新增onsubmit事件绑定提交处理函数
• 移除input的name="keyword"属性，避免默认提交逻辑自动拼接参数
• 新增的提交处理逻辑会直接拼接符合要求的地址完成跳转，自动处理关键词的特殊字符编码

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