<a>标签跳转失效：表单提交保存后无法跳转到指定页面

问题根源 #

你遇到的跳转失效，核心原因是这两点：

1. 按钮点击事件里的ev.preventDefault()，不仅阻止了submit按钮的表单提交行为，也干扰了外层<a>标签的默认跳转逻辑。
2. 即使<a>标签存在，因为JS阻止了事件的默认行为，跳转指令根本没被触发，且你没有手动添加跳转逻辑。

修正方案 #

1. 简化HTML结构（移除多余的<a>标签）

不需要用<a>包裹按钮，改用JS手动控制跳转，更可控：

<button type="button" class="btn btn-dark py-2 px-4" id="btn">Gå vidare</button>

如果你的按钮原本在<form>标签内，建议保留<form>并把按钮类型改回submit，后续通过监听表单的submit事件处理逻辑。

2. 完善JavaScript逻辑（添加手动跳转+修复数据覆盖问题）

原代码每次点击都会重置bookings为空数组，会丢失之前的存储数据，同时补充跳转逻辑：

const addBooking = (ev) => {
    // 如果按钮在<form>内，必须保留这行阻止表单默认提交刷新
    // ev.preventDefault();

    // 先读取localStorage中已有的预订数据，避免覆盖
    let bookings = JSON.parse(localStorage.getItem('Bokningar')) || [];
    
    const booking = {
        startDate: document.getElementById("startDate").value,
        daySpan: document.getElementById("daySpan").value, 
        packageType: document.querySelector('input[name="packageType"]:checked').value,
        age: document.getElementById("age").value,
        height: document.getElementById("height").value,
        weight: document.getElementById("weight").value,
        shoeSize: document.getElementById("shoeSize").value,
        fname: document.getElementById("fname").value,
        lname: document.getElementById("lname").value,
        email: document.getElementById("email").value,
        tel: document.getElementById("tel").value,
        address: document.getElementById("address").value,
        postalCode: document.getElementById("postalCode").value,
        city: document.getElementById("city").value,
    };

    bookings.push(booking);
    localStorage.setItem('Bokningar', JSON.stringify(bookings));
    
    // 手动触发页面跳转
    window.location.href = "bokning_genomford.html";
};    

document.addEventListener('DOMContentLoaded', () => {
    // 如果是表单提交，建议监听form的submit事件而非按钮click
    // document.getElementById("bookingForm").addEventListener("submit", addBooking);
    document.getElementById("btn").addEventListener("click", addBooking);
});

额外说明 #

如果你的按钮在<form>标签内，更规范的做法是监听表单的submit事件（比如给表单加id="bookingForm"），这样用户按回车键也能触发提交，同时通过ev.preventDefault()阻止页面刷新，最后执行跳转。

内容的提问来源于stack exchange，提问作者Veronica Byström