`
gllwhq
  • 浏览: 14699 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

button和submit的区别及使用js实现页面跳转的方式

阅读更多
type=button      //就单纯是按钮功能   
type=submit      //是发送表单


但是对于从事WEB UI的人应该要注意到,使用submit来提高页面易用性:
使用submit后,页面支持键盘enter键操作,而很多WEB软件设计师,可能没有注意到submit统
一。

用button后往往页面不支持enter键了。所以需要支持enter键,必须要设置个submit,默认enter键对页面第一个submit进行操作。

<input type="submit" name="b1" value="提交" onClick="bt_submit_onclick()">

执行完onClick,转到action。可以自动提交不需要onClick。所以说onclick这里可以不要。

<input type="button" name="b1" value="提交" onClick="bt_submit_onclick()">

执行完onClick,跳转文件在js文件里控制。提交需要onClick。

比如:
1、
onclick="form1.action='a.jsp';form1.submit();" 

  这样就实现了submit的功能了。

2、
<form name="form1" method="post" action="http://www.sina.com.cn">   
    <input  type="button"  name="Button"  value="Button"  onClick="submit()">   
 </form>


3、
<input type="button" name="Button" value="Button"    onClick="javascript:windows.location.href="你的url"">


js实现页面跳转的几种方式:

第一种:
<script language="javascript" type="text/javascript">
  function   test(){ 
     window.location.href="login.jsp?backurl="+window.location.href; 
   }
</script>


第二种:
<script language="javascript">
  function   test(){ 
     alert("返回");
     window.history.back(-1);
  }
</script>


第三种:
<script language="javascript">
window.navigate("top.jsp");
</script>


第四种:
<script language="JavaScript">
   function   test(){ 
     self.location='top.htm';
    }
</script>


第五种:
<script language="javascript">
  function   test(){ 
     alert("非法访问!");
     top.location='xx.jsp';
   }
</script>
分享到:
评论

相关推荐

    sp\button和submit的区别及使用js实现页面跳转的方式

    sp\button和submit的区别及使用js实现页面跳转的方式

    js点击button按钮跳转到另一个新页面

    这样的效果可以:onclick=”[removed]=’新页面'” 来实现。 1.在原来的窗体中直接跳转用 代码如下 [removed].href=”你所要跳转的页面”; 2、在新窗体中打开页面用: 代码如下 window.open(‘你所要跳转的页面’); ...

    javascript实现点击提交按钮后显示loading的方法

    主要介绍了javascript实现点击提交按钮后显示loading的方法,涉及javascript动态设置页面元素样式的相关技巧,需要的朋友可以参考下

    ajax如何实现页面局部跳转与结果返回

    通过代码示例分析给大家介绍ajax实现页面局部跳转与结果返回,具体内容如下: 1、带有结果返回的提交过程 这里用一个提交按钮来演示,HTML代码为: &lt;input type="button" class="btn" value="提报" name="submit...

    button没有指定type为submit点击按钮跳转不到指定url

    今天由于项目需求,需要js控制form的提交,在submit前先进行数据的验证和处理,ie6、ie7下点击按钮没反映,跳转不到指定url,其他浏览器却可以正常跳转,一直以为是js控制代码中出现了问题,所以跟踪调试很久,始终没...

    自动跳转页代码实现在规定时间跳转

    &lt;form action="javascript:history.go(-1)" method="post" name="form1" id="form1"&gt; &lt;input type="text" name="text1"&gt; &lt;INPUT id="agreeb" type="button" value="8 秒后将返回"&gt;  &lt;/form&gt; ...

    react-router JS 控制路由跳转实例

    Link组件用于正常的用户点击跳转,但是有时还需要表单跳转、点击按钮跳转等操作。...button type=submit&gt;Go&lt;/button&gt; &lt;/form&gt; 第一种方法是使用browserHistory.push import { browserHistory } from '

    如何使用vuejs实现更好的Form validation?

    用vuejs对Form验证怎么进行对submit验证,验证失败不跳转,成功才跳转?我试了好几个方法都没实现,很郁闷,要么不验证,要么就是验证了不进行跳转。 &lt;input type=”button” v-on:click=”return submit()” ...

    从入门到精通HTML5——PDF——网盘链接

     1.4.3 使用可视化软件制作页面 10  1.4.4 使用浏览器浏览HTML文件 14  1.4.5 使用HTML开发的明日图书网 14  1.5 小结 15  1.6 习题 16  第2章 HTML文件基本标记 17  教学录像:44分钟  2.1 HTML头部标记 18...

    微信小程序小知识点:传递参数,跳转,FORM表单

    button formType="submit"&gt;提交&lt;/button&gt; &lt;/form&gt; 表单一定要设置一个绑定函数,即 bindsubmit的属性值 formSubmit 另外一定要设置一个button,并且属性key=”value”是固定的 formType="submit" ...

    html入门到放弃笔记

    4、style :定义 内联方式方式使用(CSS中) 4、注释 语法:&lt;!-- --&gt; 注意: 1、注释不能嵌套 2、注释不能出现在标记中 3、HTML 文档结构 W3C :Word Wide Web Consortium (万维网联盟) 1、HTML文档的...

    ASP.NET程序中常用的三十三种代码.txt

     不要使用Response.Redirect,而应该使用Server.Transfer  e.g // in global.asax protected void Application_Error(Object sender, EventArgs e) { if (Server.GetLastError() is HttpUnhandledException) Server...

    ASP.NET常用代码

    不要使用Response.Redirect,而应该使用Server.Transfer e.g // in global.asax protected void Application_Error(Object sender, EventArgs e) { if (Server.GetLastError() is HttpUnhandledException) Server....

Global site tag (gtag.js) - Google Analytics