使用onclick/表单submit跳转到其他页面

最新推荐文章于 2022-05-10 14:22:47 发布

原创最新推荐文章于 2022-05-10 14:22:47 发布 · 9.1k 阅读

4 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

7 篇文章

订阅专栏

博客介绍了网页中onclick和submit的使用方法。使用onclick时，本页显示可直接用location，若页面有frame，可在location前添加top.mainframe.frames['right_frame'].location；使用submit则通过form表单创建只有submit按钮的表单，单击提交即可。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用onclick

如果是本页显示可以直接用location,方法如下：

- onclick="javascript:window.location.href='URL'"
 - onclick="location='URL'"
 - onclick="window.location.href='URL?id=11'"

如果页面中有frame可以将在location前面添加top.mainframe.frames[‘right_frame’].location

使用submit

使用form表单创建一个只有submit按钮的表单，单击提交即可

<form action="URL" name="表单名" method="get">
	<table><td colspan="2"><input type="submit" value="注册"></td></table>--%>
 </form>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

可乐可乐可

关注关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

onclick="this.form.submit();" 无法提交的解决办法

weixin_34326429的博客

03-21

633

网页中如果使用 onclick="this.form.submit();" 无法提交表达，可以使用下面的代码： onclick="document.forms['form'].submit();" 范例：<form name="search" type="get"> <input type="hidden" name="m" value="search"...

FORM表单中onclick()、submit()与onsubmit()的问题

qq_36785719的博客

05-19

1351

FORM表单中onclick()、submit()与onsubmit()的问题最近遇到一次处理form数据的过滤，采用了button的onclick事件来检查，发现return false后表单仍然提交了。于是仔细研究了下onclick、onsubmit、submit集合函数之间的关系和区别 onsubmit: You can override this event by returning false in the event handler. Use this capability to valid

参与评论您还未登录，请先登录后发表或查看评论

onclick和onsubmit

lijiang_shen的博客

09-11

432

表单验证： <body> <form action="demo_form.php" name="myForm" onsubmit="return validateForm()" method="POST">名字:<input type="text" name="fname"> <input type="submit" value="提交"> </form> <script&gt

submit中onclick方法的执行

bblbx的博客

08-06

4975

无标题文档 function onC(){ varcount = document.myForm.times.value; //alert(); for(i=0;i document.write("HelloWorld!"); } } 输入HelloWo

Form表单中的onClick，onSubmit和submit

weixin_30633949的博客

03-16

282

一个表单： 1 <form action="#" method="POST" name="A" onsubmit="return X();"> 2 <input type="text" value="" /> 3 <input onclick="Y()" type="submit" value="提交" /> 4 </form> ...

FORM表单 onclick()与onsubmit()

weixin_30242907的博客

02-28

322

submit按钮与一般按钮的onclick

cxzhq2002的杂记

11-25

2492

script>function test(){alert(11);}script> BODY> form id="form1" name="form1" method="post" action="1111111111111.html" onsubmit="test(); return false;"> input name="a" /> i

表单提交onclick和onsubmit

m0_37346206的博客

08-26

588

onsubmit只能表单上使用,提交表单前会触发, onclick是按钮等控件使用, 用来触发点击事件。在提交表单前，一般都会进行数据验证，可以选择在submit按钮上的onclick中验证,也可以在onsubmit中验证。但是onclick比onsubmit更早的被触发。　　提交过程 1、用户点击按钮 ----> 2、触发onclick事件 ----> 3、onclick返回true或未处理onclick ----> 4、触发onsubmit事件 ---->...

onclick、onsubmit、submit集合函数之间的关系和区别

kk791159796的专栏

11-15

1985

这几个函数的调用顺序如下： onclick->onsubmit->submit 只要 onclick 未 return false 那么就继续执行 onsubmit 只要 onsubmit 未return false 那么表单就被提交出去了另外一点写法上注意一定要 “return X();” 才能取得函数的返回值，否则只是调用函数，返回值未被传递

js 按钮实现跳转页面 jsp html

热门推荐

G-Ohand

04-04

2万+

type=button 就单纯是按钮功能 type=submit 是发送表单但是对于从事WEB UI的人应该要注意到，使用submit来提高页面易用性：使用submit后，页面支持键盘enter键操作，而很多WEB软件设计师，可能没有注意到submit统一.用button后往往页面不支持enter键了。所以需要支持enter键，必须要设置个submit，默认enter键

关于onclick操作,影响按钮submit提交

BIG.KE的博客

03-09

1285

<button type="submit" onclick = $.pdialog.closeCurrent();>保存</button> 谷歌游览器, 当触发点击事件后, onclick中的操作会进行, 但是button当前的form表单, 并不会提交, 解决方案 <button type="submit" onclick = $(this.clos...

submit与onclick的执行顺序

wshten

07-10

5368

onclick先于onsubmit执行，若onsubmit返回值为true，执行submit；将submit操作放到$.ajax()中执行即可

onlick onsubmit submit 的执行顺序

wem520的专栏

03-28

4564

1、onlick onsubmit submit 的执行顺序： form action="#" method="POST" name="A" onsubmit="return X();"> input type="text" value="" /> input onclick="Y

FORM表单中onclick()、onsubmit()与submit()的问题

Alex的专栏

10-09

1万+

最近遇到一次处理form数据的过滤，采用了button的onclick事件来检查，发现return false后表单仍然提交了。于是仔细研究了下onclick、onsubmit、submit集合函数之间的关系和区别 1 2 3 4 5 6 7 8 9 10 11 12 13

关于表单下的onclick、onsubmit、submit执行顺序

sunny_345的博客

06-05

1177

要求输入框内容为空时不提交表单，这个是普遍需求吧。结构： <div id="divForm"> <form id="searchForm" name="searchForm" action="RecordForm" method="post"> <input id="search_text" name="search_text" placeholde...

表单提交的相关注意事项，submit-onclick-事件触发执行过程

【小喵】的博客

11-30

1万+

submitAction 方法里面有提交表单的动作。如果不加 return false，在执行完 submitAction 之后，submit 按钮还会继续执行它的默认事件，就会再次提交表单。这可能就是很多错误的根源。的确，return false的含义不是阻止事件继续向顶层元素传播，而是阻止浏览器对事件的默认处理。你可以这样试验：首先将所有的js脚本注释掉，在IE浏览器中尝试拖动一下图片，你

如何阻止表单的自动提交 - onclick - onsubmit - return true / false；

Muxiu

05-10

1345

目录表单的默认提交理解 onclick 和 onsubmit 参数的先后顺序补充：表单的默认提交一般，后台程序员与表单打交道的时间是最多的最近学习Html 表单的提交验证，没想到运行时，都会给我自动提交，这真是难为我了，查了一下，原来是onclick/onsubmit方法的机制问题，我们看似正常传递了函数，用来验证提交是否有问题，如账号或密码是空的验证操作，就不提交表单了。具体看一下html代码：  <form action="/index/" met

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

SIP学习笔记

11-01

855

[code="java"]type=button //就单纯是按钮功能 type=submit //是发送表单[/code] 但是对于从事WEB UI的人应该要注意到，使用submit来提高页面易用性：使用submit后，页面支持键盘enter键操作，而很多WEB软件设计师，可能没有注意到submit统一。用button后往往页面不支持enter键...

制作表单页面跳转

最新发布

05-07

### 表单提交后实现页面跳转的方法在 HTML 和 JavaScript 中，可以通过多种方式实现在表单提交后页面自动跳转的功能。以下是几种常见的方法及其具体实现： #### 方法一：通过 `window.location.href` 实现跳转当表单数据验证完成后，可以使用 JavaScript 的 `window.location.href` 属性来指定目标 URL 并完成页面跳转[^3]。 ```javascript osub.onclick = function () { if (t1 && p1 && p2 && t2 && t3) { // 验证所有字段是否有效 window.location.href = "https://example.com/target-page"; // 跳转到目标页面 } else { alert("请填写正确的信息！"); } }; ``` 此方法适用于需要动态控制跳转逻辑的情况，例如基于用户输入的有效性决定是否执行跳转。 --- #### 方法二：利用 `<form>` 标签的 `action` 属性 HTML 表单本身支持通过设置 `action` 属性，在提交时直接跳转至指定的目标地址[^2]。 ```html <form action="https://example.com/target-page" method="POST">  <input type="text" name="username" placeholder="用户名"> <button type="submit">提交</button> </form> ``` 在此情况下，浏览器会在表单提交后默认加载由 `action` 指定的 URL 页面。 --- #### 方法三：结合 PHP 后端处理返回重定向响应如果希望在服务器端处理完请求后再进行页面跳转，则可以在 PHP 文件中发送 HTTP 重定向头信息[^1]。 ```php <?php // 假设这是接收表单数据的PHP脚本 if ($_SERVER["REQUEST_METHOD"] === "POST") { $isValid = validateFormData($_POST); // 自定义函数用于校验数据有效性 if ($isValid) { header("Location: https://example.com/success-page"); exit(); } else { echo "提交失败，请检查您的输入！"; } } ?> ``` 注意：调用 `header()` 函数前不能有任何输出（包括空白字符），否则会引发报错。 --- #### 方法四：借助 AJAX 提交表单并手动触发跳转对于更复杂的场景，比如不想刷新整个页面而仅更新部分内容的同时还能实现跳转，可采用 AJAX 技术异步提交表单数据，并根据服务端反馈结果调整行为[^2]。 ```javascript $(document).ready(function() { $('#myForm').on('submit', function(e) { e.preventDefault(); // 阻止默认提交动作 $.ajax({ url: $(this).attr('action'), type: 'POST', data: new FormData(this), processData: false, contentType: false, success: function(response) { if (response.success) { window.location.href = response.redirectUrl; // 根据后台返回的数据跳转 } else { alert('提交失败！'); } }, error: function(xhr, status, error) { console.error(error); } }); }); }); ``` 以上代码片段展示了如何利用 jQuery 库简化 AJAX 请求过程以及后续操作。 --- ### 总结不同的需求对应着不同层次的技术解决方案。如果是简单的静态网页开发可以直接运用 HTML 或基础 JS 完成任务；而对于交互性强的应用程序来说，则可能需要用到高级技术如AJAX或者配合后端编程语言共同协作达成目的。