如何为提交按钮添加跳转链接 保留原有CSS样式与按钮文字

方案1：直接替换为a标签（最稳妥，无需依赖JS） #

直接把原有<button>标签替换成<a>标签，完全保留原有class、动态样式和文字内容，代码如下：

<p class="hb-submit">
    <a class="btn btn-solid btn-sm <?php echo esc_attr($btn_color); ?>" href="这里替换成你的客房页面实际地址"><?php esc_html_e( 'Book now', 'rokka' ); ?></a>
</p>

该方案可以100%保留原有按钮的视觉样式，点击后直接跳转，不会触发原表单提交逻辑。

方案2：添加JS脚本覆盖提交逻辑 #

如果不想改动原有HTML结构，可在页面尾部加入以下脚本实现需求：

document.querySelector('.hb-submit button[type="submit"]').addEventListener('click', function(e) {
    // 阻止表单默认提交行为
    e.preventDefault();
    // 跳转到指定客房页面
    window.location.href = '这里替换成你的客房页面实际地址';
})

如果页面存在多个同选择器的按钮，调整选择器的精准度即可。

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