帝国cms 点击提交表单后，用js组合url并重定向

正文概述管理员 2024-04-10 200

很多时候，搜索的链接太长，带着很多参数，我们想要进行伪静态修改，同时也希望链接能二次访问。

原来的html代码：

<form class="form-search" id="q-form" method="get">
                <div class="input-append" id="q-input">
                    <input type="text" class="span6 search-query" name="q" title="输入任意关键词皆可搜索"
                           value="">
                    <button type="submit" class="btn">搜索</button>
                </div>
            </form>

我们修改为：

<form class="form-search" id="q-form" method="get">
  <div class="input-append" id="q-input">
    <input type="text" class="span6 search-query" name="q" title="输入任意关键词皆可搜索"
           value="" onkeypress="return handleKeyPress(event)">
    <button type="button" class="btn" onclick="submitForm()">搜索</button>
  </div>
</form>

<script>
function handleKeyPress(event) {
  if (event.keyCode === 13) { // 13是回车键的键码
    event.preventDefault(); // 阻止默认行为
    submitForm(); // 调用submitForm()方法处理表单提交
  }
}

function submitForm() {
  // 获取输入框的值
  var query = document.getElementById("q-input").querySelector("input[name='q']").value;
  
  // 组合URL
  var url = "/moreSearch/" + encodeURIComponent(query) + ".html";
  
  // 重定向到URL
  w indo w.location.href = url;
}
</script>

将提交按钮的type属性设置为button，这样它就不会提交表单。然后使用JavaScript来获取输入框的值，并将它们组合成一个URL。最后，使用JavaScript中的w indo w.location.href将页面重定向到新的URL。

如果用户在输入框中按下回车键，它会默认触发表单的提交行为，为了避免这种情况，可以使用JavaScript来截取回车事件，并阻止默认行为。