如何将表单输入的访问码作为utm标签追加到URL后跳转，现有代码如何修正

现有代码存在的问题 #

• 访问码校验逻辑错误：document.getElementById('input-code').value == '1234','5678','9809'的写法不符合JS语法，逗号运算符只会返回最后一个值，实际仅会判断输入值是否等于9809
• 变量引用错误：定义了存储域名的变量domain，但跳转时使用了未声明的url变量，会触发JS报错
• 表单序列化逻辑失效：$(this).serialize()中的this指向点击的<a>标签，不是表单元素，且你没有包裹<form>标签，无法拿到输入框的提交数据
• 跳转URL格式不符合预期：缺少参数名code=，无法生成?code=xxx的格式
• 未阻止<a>标签的默认跳转行为，点击后会先跳转到#再执行自定义逻辑，可能出现异常

修正后完整代码 #

HTML 部分 #

<center>
<span class="text-container">
<input type="text" name="accesscode" placeholder="ACCESS CODE" maxlength="10" size="25" id="input-code">
<p><a href="#" class="btn" onclick="btntest_onclick();return false;">ENTER</a></p>
</span>
</center>

JS 部分（无jQuery依赖版本） #

<script>
function btntest_onclick(){
    // 定义合法的访问码列表
    const validCodes = ['1234', '5678', '9809', '12345'];
    // 获取输入的访问码，自动去除前后空格
    const inputCode = document.getElementById('input-code').value.trim();
    
    if (validCodes.includes(inputCode)) {
        // 拼接跳转链接
        const jumpUrl = `http://www.website.com/?code=${encodeURIComponent(inputCode)}`;
        window.location.href = jumpUrl;
    } else {
        alert('not found');
    }
};
</script>

额外说明 #

如果你的项目已经引入了jQuery，只需要把校验逻辑部分替换即可，不需要修改核心跳转逻辑。encodeURIComponent是为了避免输入特殊字符时URL解析异常，建议保留。

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