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

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

原来的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="" 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
  window.location.href = url;
}
</script>

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

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

© 版权声明
THE END
喜欢就支持一下吧
点赞10
相关推荐
评论 共1条

请登录后发表评论