如何在表单外获取链接按钮值并通过POST方法传入表单？

你的HTML结构已经具备核心基础，只需要补充JavaScript逻辑来实现点击按钮更新状态值、提交表单时传递参数的需求，以下是具体实现步骤：

1. 优化HTML（可选） #

给两个状态按钮添加统一类名status-tab-btn，方便后续JS快速选择元素，同时调整文本为中文：

<div class="mxw-670 position-relative z-index-2">
    <input class="search-field" type="hidden" name="status" value="for-sale" data-default-value="">
    <ul class="nav nav-pills property-search-status-tab">
        <li class="nav-item" role="presentation">
            <a class="nav-link btn shadow-none rounded-bottom-0 fs-13 letter-spacing-087 bg-dark-opacity-05 text-white hover-white text-uppercase bg-active-primary active status-tab-btn"
                data-toggle="pill" data-value="for-sale" href="#" role="tab" aria-selected="true" form="message">
                出售
            </a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link btn shadow-none rounded-bottom-0 fs-13 letter-spacing-087 bg-dark-opacity-05 text-white hover-white bg-active-primary text-uppercase status-tab-btn"
                data-toggle="pill" data-value="for-rent" href="#" role="tab" aria-selected="false" form="message">
                出租
            </a>
        </li>
    </ul>
    <form action="" method="post" id="message" class="d-flex">
        <div class="position-relative w-100">
            <i class="far fa-search text-dark fs-18 position-absolute pl-4 pos-fixed-left-center"></i>
            <input type="text"
                class="rounded-bottom-right-lg w-100 pl-8 py-4 bg-white border-0 fs-13 font-weight-500 text-gray-light rounded-0 lh-17"
                placeholder="输入地址、社区名称" name="search">
        </div>
        <button type="submit" name="submit"  class="btn btn-primary fs-16 font-weight-600 rounded-left-0 rounded-lg">
            搜索
        </button>
    </form>
</div>

2. 添加JavaScript交互逻辑 #

在HTML页面底部（或外部JS文件）插入以下代码，实现按钮点击时更新隐藏输入框的值，并切换激活状态：

// 获取状态按钮和隐藏输入框元素
const statusButtons = document.querySelectorAll('.status-tab-btn');
const statusHiddenInput = document.querySelector('input[name="status"]');

// 为每个按钮绑定点击事件
statusButtons.forEach(button => {
    button.addEventListener('click', function(e) {
        e.preventDefault(); // 阻止默认跳转行为
        
        // 移除所有按钮的激活样式
        statusButtons.forEach(btn => {
            btn.classList.remove('active');
            btn.setAttribute('aria-selected', 'false');
        });
        
        // 为当前点击的按钮添加激活样式
        this.classList.add('active');
        this.setAttribute('aria-selected', 'true');
        
        // 更新隐藏输入框的值为当前按钮的data-value
        const selectedStatus = this.getAttribute('data-value');
        statusHiddenInput.value = selectedStatus;
    });
});

3. 后端接收参数处理搜索 #

表单提交后，后端可通过POST参数status获取选中的状态值（for-sale或for-rent），结合search参数执行搜索逻辑。以PHP为例：

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $selectedStatus = $_POST['status']; // 获取选中的状态：for-sale/for-rent
    $searchKeyword = $_POST['search']; // 获取搜索关键词
    
    // 此处编写搜索业务逻辑，根据状态和关键词查询数据
}

点击按钮时会更新隐藏输入框的值，提交表单时该值会随search参数一起通过POST传递给后端，完成状态与搜索功能的关联。

内容的提问来源于stack exchange，提问作者Dennis Silas Mbagwu