`
gllwhq
  • 浏览: 15077 次
  • 性别: 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实现页面跳转的方式 Button和Submit是两个常用的HTML表单元素,它们都是用于提交表单的,但是它们之间存在着一些区别。 首先,Button类型的按钮仅仅是一个普通的按钮,点击它不会...

    JSP页面跳转方法总结

    这是最简单直接的方式,通过`&lt;a&gt;`标签的`href`属性设置目标页面的URL来实现跳转。例如: ```html 点击跳转 ``` ##### 2. 使用JavaScript 利用JavaScript编写脚本来控制页面跳转,这种方式更加灵活。例如: ```html ...

    页面提交submit的几种方法

    本文介绍了几种页面提交submit的方法,包括使用`&lt;input type="button"&gt;`配合JavaScript、使用`&lt;input type="submit"&gt;`以及结合这两种方式实现复杂的验证逻辑。同时,还探讨了在处理表单提交数据时可能遇到的编码问题...

    js.rar_页面跳转

    在“js.rar_页面跳转”这个主题中,我们主要关注的是如何利用JavaScript来实现页面的动态跳转,从而使网页更具吸引力和用户体验。下面我们将深入探讨JavaScript页面跳转的原理、方法及其在实际应用中的技巧。 一、...

    跳转代码与js有关的跳转代码,您懂的

    在提供的代码片段中,使用了`&lt;form&gt;`标签结合`&lt;button&gt;`元素来实现页面跳转。这里需要注意的是,虽然代码中包含了`&lt;form&gt;`和`&lt;button&gt;`元素,但实际上并没有实际的功能逻辑。例如,按钮中的图片和隐藏的`&lt;span&gt;`元素...

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

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

    js实现指定用户名和密码登录

    JavaScript(简称JS)是一种轻量级的脚本语言,常用于网页和网络应用中的动态内容控制。在这个场景中,我们要实现一个登录系统,要求用户输入指定的用户名和密码,只有当两者完全匹配时,用户才能成功登录并进入一个...

    js以post方式打开新页面

    在JavaScript中,通常我们使用`window.location.href`或者`a`标签来实现页面跳转,但这两种方式都采用GET请求的方式传递数据。然而,在某些情况下,我们可能需要以POST方式发送数据并打开新页面,例如处理表单提交、...

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

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

    页面中将submit样式转换成a标签的样式

    在网页设计中,提交表单通常使用`&lt;input type="submit"&gt;`标签,它具有默认的样式和行为,如按钮外观和点击后提交表单的功能。然而,为了追求更丰富的用户体验或者符合某些设计规范,有时我们需要将这个提交按钮的...

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

    W3School上关于`&lt;button&gt;`元素的`type`属性的详细说明指出,`type`属性定义了按钮的类型,有`submit`、`reset`和`button`三种值。`submit`表示按钮会提交表单,`reset`则会重置表单的所有字段,而`button`则是一个...

    input链接页面、打开新网页等等的具体实现

    &lt;input name="Submit2" type="button" class="btn" onclick="location.href='javascript:history.go(-1);'" value="返回" /&gt; ``` 这行代码会让用户返回上一个访问过的页面。 3. **打开新网页**: 使用`window....

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

    页面跳转可以通过改变表单的`action`属性和调用`submit()`方法来实现。同时,服务器端需要正确地处理请求,执行必要的业务逻辑,并将结果编码成适合Ajax接收的格式返回。这种方式不仅提高了交互的流畅性,也使得用户...

    【JavaScript源代码】vue实现登录、注册、退出、跳转等功能.docx

    在本文中,我们将探讨如何使用 Vue.js 来实现登录、注册、退出和页面跳转等常见功能。 1. **登录功能**: 登录功能通常涉及验证用户输入的凭证(如用户名和密码)与服务器上的数据进行匹配。在 Vue.js 中,可以...

    vue 解决form表单提交但不跳转页面的问题

    在Vue.js框架中,表单提交是一个常见的...通过这种方式,你可以实现在当前页面提交表单而不引起页面跳转,提供更流畅的用户体验。同时,这种方法也允许你在前端进行数据验证和错误处理,提高应用的响应速度和用户体验。

    JavaScript中通过提示框跳转页面的方法

    在JavaScript编程中,页面跳转...总之,JavaScript提供了多种页面跳转的实现方式,开发者可以根据具体的业务需求和场景来选择最合适的方法。在实际使用时,需要注意不同浏览器的兼容性问题,以及对用户交互体验的影响。

    ASP.net开发经典button样式

    1. **基本使用**:在ASP.NET页面中,你可以通过以下代码添加一个Button控件: ```asp &lt;asp:Button ID="btnClassic" runat="server" Text="经典按钮" OnClick="btnClassic_Click" /&gt; ``` 其中,`ID`属性是控件的...

Global site tag (gtag.js) - Google Analytics