提交按钮的name='submit'引起的js失效问题及原因

所属分类: 网络编程 / JavaScript 阅读数: 795
收藏 0 赞 0 分享

代码如下:

复制代码 代码如下:

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<link type="text/css" rel="stylesheet" href="css/style.css">
</head>
<body>
<form id="pquery" method="post" action="supplierAction!list.action">
<div class="menu">
                商品名称:
                <input name="bill.goodsname" class="input-text" type="text">
                &nbsp;&nbsp;&nbsp;&nbsp; 是否付款:
                <select name="bill.pay">
                    <option value="">
                        请选择
                    </option>
                    <option value="01">
                        已付款
                    </option>
                    <option value="02">
                        未付款
                    </option>
                </select>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <!--就是因为下面这个按钮的名称叫做submit导致js失效-->
                <input name="submit" value="组合查询" class="button" type="submit">
            </div>
<div style="text-align: center;">每页显示
<select name="page.pageItems" onchange="gotoSelectedPage1()">
<option value="5">5</option>
<option value="10" selected="selected">10</option>
<option value="20">20</option>
<option value="50">50</option>
</select>条 共6条记录&nbsp; 第
<input id="curpage" name="page.currentPage" style="height:14px;line-height:14px; vertical-align:middle;color:#005aa7; border-bottom:1px solid #005aa7;border-top:0px;border-left:0px;border-right:0px;background-color:transparent;width:14px;text-align: center; " readonly="readonly" value="1" size="3">
页 / 共1页&nbsp;<a href="javascript:page_first();">第一页</a>
<a href="javascript:page_last();">最后一页</a> &nbsp;跳转页码至:
<select style="width: 40px;" id="selectpage" onchange="gotoSelectedPage()">
<option value="1" selected="selected">1</option></select></div>
<script type="text/javascript">
function sel(val){return document.getElementById(val);}
var page=sel('curpage');var form=sel('pquery');var select=sel('selectpage');
function page_first() {page.value = 1;form.submit();}
function page_pre() {var a = page.value;a = parseInt(a) - 1;page.value = a;page_validate();form.submit();}
function page_next() {var a = page.value;a = parseInt(a) + 1;page.value = a;page_validate();form.submit();}
function page_last() {page.value = 1;form.submit();}
function page_validate() {var a = page.value;if (a < 1){a = 1;}    if (a > 1){a = 1;}page.value = a;}
function gotoSelectedPage1() {page.value = 1;form.submit();}
function gotoSelectedPage() {page.value = select.value;form.submit();}
</script>
</div>
</form>
</body></html>

name属性删除之后正常运行~~这是什么原因呢,经过一番研究和咨询,一位大神给出了答案

form中元素通过name获取。如果name=submit,那么form.submit得到的应该是 那个input 。所以form.submit()会报 is not a finction 的错误

小伙伴们了解了没,希望本文能给大家一些帮助

更多精彩内容其他人还在看

JS组件Bootstrap Table使用方法详解

这篇文章主要为大家详细介绍了JS组件Bootstrap Table使用方法,具有一定的实用性,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

javascript禁止超链接跳转的方法

这篇文章主要介绍了javascript禁止超链接跳转的方法,结合实例分析了JavaScript事件机制与鼠标事件的响应操作技巧,需要的朋友可以参考下
收藏 0 赞 0 分享

JavaScript实现的MD5算法完整实例

这篇文章主要介绍了JavaScript实现的MD5算法,以完整实例形式分析了基于JavaScript实现MD5算法的具体步骤与相关技巧,需要的朋友可以参考下
收藏 0 赞 0 分享

Hammer.js+轮播原理实现简洁的滑屏功能

这篇文章主要介绍了Hammer.js+轮播原理实现简洁的滑屏功能的相关资料,需要的朋友可以参考下
收藏 0 赞 0 分享

基于JQuery实现图片轮播效果(焦点图)

这篇文章主要为大家详细介绍了基于JQuery实现图片轮播效果,利用Jquery制作焦点图左右轮播特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

javascript实现瀑布流加载图片原理

这篇文章主要为大家介绍了javascript实现瀑布流加载图片效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

JavaScript实现的SHA-1加密算法完整实例

这篇文章主要介绍了JavaScript实现的SHA-1加密算法,以完整实例形式分析了SHA-1加密算法的具体实现技巧,需要的朋友可以参考下
收藏 0 赞 0 分享

Javascript实现的SHA-256加密算法完整实例

这篇文章主要介绍了Javascript实现的SHA-256加密算法,以完整实例形式分析了JavaScript实现SHA-256加密的具体步骤与相关技巧,需要的朋友可以参考下
收藏 0 赞 0 分享

原生js实现图片层叠轮播切换效果

这篇文章主要为大家详细介绍了原生js实现图片层叠轮播切换效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

javascript自动切换焦点控制效果完整实例

这篇文章主要介绍了javascript自动切换焦点控制效果的方法,结合完整实例形式分析了JavaScript响应键盘按键控制表单输入框的焦点切换功能,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多