时间戳

首页 > 解决方案 > 获取当前 URL 并更新 URL 中的参数

javascript - 获取当前 URL 并更新 URL 中的参数

问题描述

提前感谢您的时间。

我正在尝试从 URL 中获取值并自动填充单选选项。

示例 URL = https://example.com/v2-search/?&orderBy=relevance&tags=Kinship

<form action="https://example.com/v2-search/?" method="GET" >
    <div class="uk-inline">
        
        <div class="uk-inline">

           <label>Filter by: <label> 
           <input id="distance" class="uk-radio" type="radio" name="orderBy" value="distance"> Distance 
            <input id="relevance" class="uk-radio" type="radio" name="orderBy" value="relevance" > Relevance 

        </div>
        
        <div class="uk-inline">
        <button style="margin-left: 15px;" class="uk-button uk-button-primary uk-button-small uk-mobile-width">Update</button>
    </div>

    </div>

</form>

这是我在评论中使用的 JS。

function autoFill() {
  var ob = url.searchParams.get("orderBy"); //Getting the value from the URL for the first radio options selected.
  var radioElements = document.getElementsByName("orderBy"); //Selecting the first radio options.

  for (var i=0; i<radioElements.length; i++) {
    if (radioElements[i].getAttribute('value') == 'ob') {
      radioElements[i].checked = true; //Adding checked to the value based on the URL
    }
  }
}

标签： javascripthtmlformsradio

解决方案

您可以将 URL 查询（搜索）字符串解析为一个URLSearchParams实例，这样可以更轻松地获取值。

然后，您可以搜索相关的单选按钮并检查是否找到

const params = new URLSearchParams(location.search)
const orderBy = params.get("orderBy")

const radio = document.querySelector(`input[name="orderby"][value="${orderBy}"]`)
if (radio) {
  radio.checked = true
}

推荐阅读