JavaScript实现form提交，回车提交URL地址伪静态 原创
文本框（input element）里输入内容后，直接Enter回车键提交表单（form），是很方便的，也很人性化，便于用户使用。比如一个搜索框，希望输入完关键词之后直接按回车键立即提交表单，但如果不使用form提交，用JavaScript来实现提交动作，而且提交URL地址伪静态化，不想带问号和搜索关键词，搜索框内enter回车键自动提交，那么应该如何实现呢。笔者下面将用实际代码来展示。
下面是html中的简单form表单：
1、一个id是keywords的搜索框；
2、placeholder是文本框默认提示文字；
3、onkeydown是在该文本框中按下动作时触发事件，event.keyCode==13表示按下的是“ENTER”回车键，触发JavaScript的formsubmit函数。注意这里有return。
4、点击“搜索”按钮会触发formsubmit函数
备注：点击“搜索”按钮和搜索框内enter回车键触发的时同一个函数
<form id="form" method="get" action="">
<input type="text" id="keywords" name="keywords" value="" placeholder="请输入关键词" onkeydown="if(event.keyCode==13){return formsubmit();}"/>
<input type="button" value="搜索" onClick="formsubmit()">
</form>下面是JavaScript的formsubmit函数：
1、获取文本框keywords的输入值，如果为空提示“请输入查询关键词！”；如果存在keywords进行下一步
2、用keywords取得的，伪造URL伪静态链接（后端程序设计好）
3、window.location.href跳转到url页面
4、注意这里的return false，可以使得上面的form不主动提交
<script>
function formsubmit(){
var keywords = $('#keywords').val();
if (keywords) {
url = '/search/'+keywords+'.html';
window.location.href = url;
}else{
$('#keywords').focus();
alert("请输入查询关键词！");
}
return false;
}
</script>如果不需要提交URL伪静态，可以直接在form中action里写入url，也可以在JavaScript中改变form中action的值，进行form提交。keywords就会变成参数加到跳转链接里。
<script>
function formsubmit(){
var keywords = $('#keywords').val();
if (keywords) {
url = 'search.php';
$("#form").attr('action',url);
$("#form").submit();
}else{
$('#keywords').focus();
alert("请输入查询关键词！");
}
return false;
}
</script>总结：上面的例子介绍了form使用javascript提交时，点击“搜索”按钮能提交，搜索框内也能使用enter回车键提交的方法和代码。详细解释了原理和各个代码的含义，简单易懂，便于学习。
到此这篇关于JavaScript实现form提交，回车提交URL地址伪静态的文章就介绍到这了,更多相关js实现form提交URL地址伪静态内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
学习CSS的10大理由...2006-09-09
DIV+CSS 网页TIP的简单作法...2006-09-09
HTML结构化：实践DIV＋CSS网页布局入门指南...2006-06-06
在日常布局当中，会遇到文本内容超过容器的情况。非常常见的一种解决方案是超出省略。但是有的时候，由于场景的限制，可能会出现在一些无法使用超出打点省略的方法的场景，譬如在导航栏中：在容器定宽但是文本又溢出且不能换行的情况下，我们就需要寻求另外的解决方案。2021-05-05
在HTML中，link标签是一个自闭合元素，通常位于文档的head部分。它用于建立与外部资源的关联，如样式表、图标等。link标签具有多个属性，其中rel和href是最常用的，文中有详细的代码示例，感兴趣的同学可以参考阅读2023-05-05
本文介绍一下关于CSS透明属性详解及背景透明继承解决办法hack，如果你在使用css透明背景之类的此文章可帮你解决许多不兼容问题2013-11-11
CSS经典技巧十则...2006-06-06
这篇文章主要介绍了关于HTML的语义化标签和无语义化标签,语义化的标签，旨在让标签有自己的含义，让浏览器认识这个标签所传达的信息，是干什么的有什么作用,需要的朋友可以参考下2023-04-04
这篇文章主要介绍了父div高度不能自适应子div高度的解决方案,需要的朋友可以参考下2014-05-05
如何禁止打印页面...2006-08-08
最新评论