帝国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来截取回车事件,并阻止默认行为。
原来的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来截取回车事件,并阻止默认行为。
新闻资讯 更多
- 【帝国cms教程】帝国CMS模板变量$GLOBALS[navclassid]用法分析04-03
- 【帝国cms教程】鲜为人知帝国CMS内容页调用上一篇和下一篇的精华方法汇总04-03
- 【帝国cms教程】怎么快速找出帝国CMS数据库配置文件路径及迁移网站后修改技巧!04-03
- 【帝国cms教程】帝国CMS模板$GLOBALS[navclassid]用法详解04-03
- 【帝国cms教程】帝国cms 7.5版列表页分页样式修改笔记04-02
- 【帝国cms教程】解决帝国CMS搜索页面模板不支持灵动标签和万能标签的方法04-02
- 【帝国cms教程】帝国CMS只备份栏目和模板的方法04-02
- 【帝国cms教程】帝国CMS怎样删除清空数据库记录?04-02
热门文章
- 178Moban源码谈谈免费源码与收费源码的区别
- 2帝国CMS忘记后台登陆用户名、密码、认证码的解决方法
- 3帝国CMS(EmpireCMS) v7.5后台任意代码执行漏洞及具体修复方法
- 4帝国CMS和WordPress 哪个好?哪个适合建站?
- 5如何解决Discuz的密码错误次数过多请15分钟后登陆的问题
- 6帝国cms灵动标签取得内容和栏目链接地址
- 7emlog pro 注册码“开心”教程(如果有一天,emlog官方版 或者 emlog免费版 跑路了,那用户怎么办?)
- 8织梦CMS在nginx下设置伪静态方法(附nginx伪静态规则)
- 9帝国cms后台登录出现”您还未登录”怎么解决?
- 10帝国cms7.5忘记登录密码 和忘记登录认证码以及多次登录 失败被锁定解决办法