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

时间:2023年09月17日

/

来源:网络

/

编辑:佚名

很多时候,搜索的链接太长,带着很多参数,我们想要进行伪静态修改,同时也希望链接能二次访问。
原来的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
  window.location.href = url;
}
</script>
将提交按钮的type属性设置为button,这样它就不会提交表单。然后使用JavaScript来获取输入框的值,并将它们组合成一个URL。最后,使用JavaScript中的window.location.href将页面重定向到新的URL。
如果用户在输入框中按下回车键,它会默认触发表单的提交行为,为了避免这种情况,可以使用JavaScript来截取回车事件,并阻止默认行为。
猜你需要

豫ICP备2021026617号-1  豫公网安备:41172602000185   Copyright © 2021-2028 www.78moban.com/ All Rights Reserved

本站作品均来自互联网,转载目的在于传递更多信息,并不代表本站赞同其观点和对其真实性负责。如有侵犯您的版权,请联系 1565229909#qq.com(把#改成@),我们将立即处理。