表单action属性切换异常：误点按钮后需刷新才能切换正确路由

你的代码里用了全局clicked变量，一旦点击任意按钮后这个变量就变成true，后续再点其他按钮时，if (!clicked)的判断不成立，所以不会执行修改action的代码——这就是必须刷新页面才能切换路由的核心原因。

直接去掉那个限制判断，每次点击按钮都直接更新表单action属性，同时可以给按钮加选中状态提示用户，另外调整搜索按钮的逻辑，不再依赖clicked变量：

var myform = document.getElementById("cabform");
var searchcab = document.getElementById("searchcab");
var paragraphId = document.getElementById("pid");

// 批量获取所有类型按钮
var cabTypeButtons = [
    document.getElementById("addInputBtn"),
    document.getElementById("localBtn"),
    document.getElementById("oneWay"),
    document.getElementById("roundTrip")
];

// 给每个按钮绑定点击事件
cabTypeButtons.forEach(btn => {
    btn.addEventListener("click", function(){
        // 根据当前点击的按钮设置对应action
        switch(this.id){
            case "addInputBtn":
                myform.action = "/airport";
                break;
            case "localBtn":
                myform.action = "/local";
                break;
            case "oneWay":
                myform.action = "/oneway";
                break;
            case "roundTrip":
                myform.action = "/roundtrip";
                break;
        }
        // 切换按钮选中状态，让用户直观看到当前选择
        cabTypeButtons.forEach(b => b.classList.remove("active"));
        this.classList.add("active");
        // 清空提示信息，恢复搜索按钮为提交类型
        paragraphId.innerHTML = "";
        searchcab.type = "submit";
    });
});

// 搜索按钮点击事件逻辑调整
searchcab.addEventListener("click", function(e){
    // 检查表单action是否已设置有效路由
    if(!myform.action || myform.action === window.location.href){
        e.preventDefault(); // 阻止表单提交
        paragraphId.innerHTML = "请选择以下按钮之一：Airport, Local";
        this.type = "button";
    }
});

• 移除全局clicked变量，每次点击按钮直接更新action，不再限制修改
• 用循环批量绑定按钮事件，代码更简洁易维护
• 添加按钮选中状态切换，用户能直观看到当前选中的选项（可以给.active类加CSS样式，比如背景色变化）
• 搜索按钮逻辑改为检查表单action是否有效，避免依赖clicked变量的误判
• 点击按钮时自动清空提示信息并恢复搜索按钮为提交类型，优化用户体验

可选的CSS样式（用于标记选中按钮）：

.active {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
}

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