Button提交数据注意写法

最新推荐文章于 2024-04-24 13:11:44 发布
最新推荐文章于 2024-04-24 13:11:44 发布
阅读量442 收藏
点赞数 1
文章标签： JavaScript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jinhanjiang/article/details/84481491
版权
今天做一个功能，页面提交数据到后台。做的多了功能很熟，写代码基本从做过的地方拷拷过来用。今天也很随意的从别处拷代码过来。很快功能完成了。测试下来，一点提交按钮页面刷新一下输入框填的数据全清空了。废话不多说。上代码分析问题。 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Button测试</title>
<script type="text/javascript" src="http://global.z7zba.com/js/jquery-1.9.1.min.js"></script>
</head>
<body>
<form>
	T1<input type="text" id="t1" name="t1" value="" />
	T2<input type="text" id="t2" name="t2" value="" />
    <br />
    <input type="submit" onclick="doAction();" value="按钮1(type=submit)" />
    <button onclick="doAction();">按钮2(button)</button>
    <input type="button" onclick="doAction();" value="按钮3(type=button)" />
    <a href="javascript:doAction();">按钮4(a)</a>
</form>
    <div style="border-bottom:#000;">----form外----</div>
<script type="text/javascript">
function doAction()
{
	if($('#t2').val() == '') { alert('T2为空'); return; }
}
</script>
</body>
</html>


有四个按钮，都可以做点击后提交动作。

我们先来做测试。
在T1输入框中随意输入如：x,然后点击各按钮

[b]
所有按钮放在form内

1 发现点击按钮1和按钮2时,弹出提示框后页面刷新，T1输入框的值被清空。

我们把按钮1和按钮2放到form外面，再次执行如上操作

2 发现所有按钮,弹出提示框后页面，没有刷新，T1输入框的值没有被清空。[/b]

注：按钮3和按钮4放在form里面和里面，效果属于第2种结果

以上在chrome和firxfox中测试过。欢迎大家验证。

[b]总结：写提交动作时，按钮尽量用a或input[type='button'][/b]
jinhanjiang
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js实现a标签超链接提交form表单的方法
10-24
在不使用JavaScript的情况下，表单通常通过用户点击提交按钮来提交数据。提交按钮通常是一个`<input>`或`<button>`类型的元素，带有`type="submit"`属性。然而，如果开发者希望通过a标签来提交表单，可以通过为a标签...
关于点击button按钮为何会自动提交数据的问题-0613
兜兜的博客
06-14 1140
关于点击button按钮为何会自动提交数据的问题，button的type属性。
2023.11.21使用＜button＞元素来触发form表单和数据提交
leigh_chen的博客
11-21 1900
除了使用``中的`submit`方式进行form表单和数据提交，还可以使用button方式，两种方式视使用场景，各有优点。
表单提交之“button/submit“
cold的博客
07-18 1180
(1)type=“button” 往往是结合JS，提交数据，没有写js，点击后无事发生 (2)type=“submit” 直接提交数据，不结合js (3)button标签，和（1）一样，往往不常用，因为浏览器解析value结果不同，有的是value值，有的是标签前后的内容 ...
踩坑：form表单中button按钮，点击后提交表单
这是我的笔记本，记录学习历程，分享学习经验，菜鸡一枚，感谢支持！
05-22 1069
我当时是在JSP中写的这段代码，我一直以为只是JSP的问题，然后又开始怀疑jQuery的问题，都没有解决。然后终于在网上找到了相关的文章。以下来自MDN的官网文档中的说明。
HTML中常用的“提交”按钮代码的表示方式
最新发布
2301_79083882的博客
04-24 691
如果想要提交按钮变得美观一点可以自己添加代码噢！两种代码看个人喜好哪一种，第二种比较方便噢！
js校验表单后提交表单的三种方法总结
10-26
在HTML表单标签中，`action`属性定义了表单提交后服务器要接收数据的URL地址，而`method`属性指定了提交数据的HTTP方法（通常为`get`或`post`）。当点击提交按钮时，如果表单内配置了`onsubmit`属性，就会触发相应的...
图片型按钮的写法.rar
07-05
此时，`<button>`的`type="submit"`属性表示点击按钮会提交表单数据。如果需要阻止默认行为，如防止页面刷新，可以使用JS的`event.preventDefault()`。 五、无障碍性（Accessibility） 确保图片型按钮对残障人士...
Jquery表单验证失败后不提交的解决方法
11-26
这个简单的解决方案可以帮助开发者在处理表单时确保数据的完整性和准确性，防止因误操作导致的无效数据提交。同时，这种做法也提高了用户交互体验，及时给出反馈，指导用户完成正确的表单填写。希望这个解释对大家在...
PHP中CheckBox多选框上传失败的代码写法
10-20
然而，在PHP中，为了能够正确处理多选框提交的数据，需要在多选框的name属性值后面加上方括号（[]），这样一来，表单提交的数据就会被作为数组处理。 例如，在HTML代码中，如果要创建一个可以多选的checkbox，应该...
javascript在form表单中使用button按钮实现submit提交方法
有种轰趴我
01-22 1万+
在form表单提交中，使用button来间接完成submit的提交更为灵活。下面是实现方法： 使用button按钮实现submit提交，需要在button标签中的使用onclick方法，然后在javascript中实现具体，代码如下： function submitBtnClick(){ document.fileForm.submit(); } 检索
Button提交数据到其他页面
Aruko的博客
11-01 1825
使用按钮的响应函数: <form id="delmg" action="DelMgServlet" method="post"> <input type="hidden" value="<%=mg.getname() %>" name="delnm"> <button type="button" class="delbt" οnclick="Pressbt()">删除</button> </form> <script typ
input submit、button和回车键提交数据详解
yunduanaoligei的博客
08-18 2219
最近项目中用了很多的表单提交，发现input、button、submit甚至回车键都可以引发表单提交，下面将分别给大家讲述下他们在使用中的区别。 1 2 3 4 <form> <input name="name"> <input type="submit" value="提交"> </form> 以这种方式提交，input 值为22222222时，后面递交的url 就会变为localhost:3980/input.html?name=222222 其
button按钮提交表单问题
牧小七的博客
02-24 2260
问题描述： 表单中嵌套按钮，在点击按钮时会自动提交表单 <form action="/save"> <button>提交</button> </form> 原因分析： 表单中的button按钮，没有指定 type="button"，则默认是 submit 类型，所以当点击按钮时会提交表单 解决方案： 在 button 标签中添加 type="button" 属性 <form action="/save"> <button
form表单的两种提交方式，submit和button的用法
热门推荐
honey_Claire的专栏
06-13 63万+
1.当输入用户名和密码为空的时候，需要判断。这时候就用到了校验用户名和密码，这个需要在jsp的前端页面写；有两种方法，一种是用submit提交。一种是用button提交。 方法一： 在jsp的前端页面的头部插入一个js方法：  function checkUser(){    var result = document.getElementById("userid").value;
form表单中button按钮自动提交数据
hotchange的博客
07-07 7986
from表单中button按钮自动提交表单内容。 问题描述： 给button按钮绑定click事件，使用ajax向后台提交数据，在回调函数中无法实现页面跳转，并且页面会自动刷新。 有时回调函数中的语句还会出现不执行等情况。 这些情况的产生完全取决于form表单在button按钮被点击后什么时间自动刷新页面。 解决方案： 1、设置 form 的 onsubmit='return fal...
表单提交中的input、button、submit的区别
weixin_30376163的博客
12-29 2411
　　最近项目中用了很多的表单提交，发现input、button、submit甚至回车键都可以引发表单提交，下面将分别验证他们在使用中的区别。 1.input[type=submit] 我们直接来看例子： 代码如下： <form> <input name="name"> <input type="submit" value=...
HTML--使用提交按钮，提交数据
weixin_30246221的博客
07-20 2284
在表单中有两种按钮可以使用，分别为：提交按钮、重置。这一小节讲解提交按钮：当用户需要提交表单信息到服务器时，需要用到提交按钮。 语法： <input type="submit" value="提交"> type：只有当type值设置为submit时，按钮才有提交作用 value：按钮上显示的文字 举例： 在浏览器中显示的结果： 转载于:https://www...
vant2 表单的详细写法
09-01
我们可以使用 `van-button` 组件来展示这些操作按钮，并通过相应的事件处理函数来实现提交、重置等功能。 最后，在组件中定义相应的方法来处理表单的提交、重置等操作。例如，可以定义一个名为 submitForm 的方法，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值