`
jinhanjiang
  • 浏览: 18690 次
  • 性别: Icon_minigender_1
  • 来自: 勉县
文章分类
社区版块
存档分类
最新评论

Button提交数据注意写法

阅读更多
今天做一个功能,页面提交数据到后台。做的多了功能很熟,写代码基本从做过的地方拷拷过来用。今天也很随意的从别处拷代码过来。很快功能完成了。测试下来,一点提交按钮页面刷新一下输入框填的数据全清空了。废话不多说。上代码分析问题。

<!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,然后点击各按钮


所有按钮放在form内

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

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

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


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

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

总结:写提交动作时,按钮尽量用a或input[type='button']
分享到:
评论

相关推荐

    图片型按钮的写法.rar

    此时,`&lt;button&gt;`的`type="submit"`属性表示点击按钮会提交表单数据。如果需要阻止默认行为,如防止页面刷新,可以使用JS的`event.preventDefault()`。 五、无障碍性(Accessibility) 确保图片型按钮对残障人士...

    jquery $.post()的用法 传递json文本 客户端和服务器端相互传递

    &lt;input type="button" onclick="submitForm()" value="提交"&gt; ``` **关键点分析**: - 使用 `$.post()` 发送一个包含用户名和密码的对象到服务器。 - 成功后,通过回调函数显示服务器返回的 JSON 数据。 ##### 2...

    【JavaScript源代码】React获取input值并提交的2种方法实例.docx

    &lt;button onClick={this.handlePost}&gt;提交&lt;/button&gt; ); } } export default InputDemo; ``` **解析** 1. **初始化状态**:在类组件中通过构造函数或直接在类内部声明`state`来初始化一个名为`InputValue`的...

    js实现a标签超链接提交form表单的方法

    在不使用JavaScript的情况下,表单通常通过用户点击提交按钮来提交数据。提交按钮通常是一个`&lt;input&gt;`或`&lt;button&gt;`类型的元素,带有`type="submit"`属性。然而,如果开发者希望通过a标签来提交表单,可以通过为a标签...

    Jquery表单验证失败后不提交的解决方法

    这个简单的解决方案可以帮助开发者在处理表单时确保数据的完整性和准确性,防止因误操作导致的无效数据提交。同时,这种做法也提高了用户交互体验,及时给出反馈,指导用户完成正确的表单填写。希望这个解释对大家在...

    js校验表单后提交表单的三种方法总结

    在HTML表单标签中,`action`属性定义了表单提交后服务器要接收数据的URL地址,而`method`属性指定了提交数据的HTTP方法(通常为`get`或`post`)。当点击提交按钮时,如果表单内配置了`onsubmit`属性,就会触发相应的...

    微信小程序拼图游戏.zip

    8. **样式设计**:使用WXSS设计界面时,需要注意其特性,比如不支持行内样式,需要通过类名来设置样式,且部分CSS属性的写法与常规CSS有所不同。 9. **调试与发布**:微信开发者工具提供了一整套调试、测试和预览...

    PHP中CheckBox多选框上传失败的代码写法

    然而,在PHP中,为了能够正确处理多选框提交的数据,需要在多选框的name属性值后面加上方括号([]),这样一来,表单提交的数据就会被作为数组处理。 例如,在HTML代码中,如果要创建一个可以多选的checkbox,应该...

    北大青鸟ACCP5.0 ASP.NET第三章课件

    1. 在JSP中,实现树形目录通常通过递归调用和数据绑定来完成,而HTML控件包括基础的如input、textarea等,Web控件则是ASP.NET特有的,如Button、Label、TextBox等,它们提供了更丰富的功能和事件处理机制。...

    小程序源码 Weather.rar

    例如,`weather.wxml`中可能有`&lt;view&gt;`用于布局,`&lt;text&gt;`用于显示天气信息,`&lt;button&gt;`用于触发获取天气数据的操作。 - 小程序还提供了丰富的API,如网络请求、用户授权、地理位置等,开发者可以结合业务需求灵活...

    音乐影音之家微信小程序源码+截图

    7. **组件化开发**:微信小程序支持多种内置组件,如view、image、button、audio、video等,开发者可以利用这些组件快速搭建用户界面。此外,还可以自定义组件以复用代码。 8. **多媒体处理**:本项目涉及到音乐和...

    2021-2022计算机二级等级考试试题及答案No.15678.docx

    - **详细解析**: 在HTML表单中,提交数据通常通过表单内的按钮来触发。根据题目中的描述,正确答案是B.点击“Button2”,这意味着“Button2”是用于提交表单数据的按钮。 #### Python中的参数传递 19. **知识点**:...

    HTML思维导图表单表格详细汇总版

    在题目给出的部分内容中,`”botton” name=”…” value=”…” checked/&gt;` 存在一些错误,正确的写法应该是: ```html &lt;input type="button" name="…" value="…" /&gt; ``` 这里指定了一个按钮,`name`属性可以用于...

    jquery-1.1.2 完整版

    `$.get()`和`$.post()`是它的简化版,常用于获取或提交数据。例如,`$.get('url', data, function(response) { ... })`将发送GET请求到指定URL,处理返回的数据。 5. **链式操作** jQuery的一个显著特点就是链式...

    小程序学习笔记24.04.05

    - **button组件:** 按钮组件,用于接收用户的点击事件,通常用于表单提交或操作触发。 - **input组件:** 输入框组件,允许用户输入文本。可以通过属性设置提示文字以及其他样式,以便更好地引导用户输入。 **函数...

    滴滴(28问).pdf

    6. import {Button} from 'antd' 打包只打包Button: 在webpack中使用babel-loader等工具支持ES6的import语法,模块只会在代码中实际使用时才会被打包。使用Tree Shaking,webpack能够分析出实际未使用到的模块,并...

    西交《网络软件开发综合训练》在线作业17年9月.pdf

    6. **HTML按钮类型**:在HTML表单中,`type="submit"`用于提交表单,`type="reset"`用于清空表单数据,`type="button"`用于创建普通按钮,可自定义功能。而`type="image"`是图像提交按钮,它将图片作为提交按钮,...

    bootstrap验证

    这段代码是使用jQuery的一个常见写法,其中`$(function(){...})`表示文档加载完成后执行括号内的函数。 #### 2. 表单验证 ```javascript $("form").validation(); ``` 这里调用了名为`validation`的函数来为表单...

    HTML5标签小集

    15. `&lt;button&gt;`:创建按钮,可以作为交互元素,执行JavaScript函数或提交表单。 16. `&lt;canvas&gt;`:提供了一个画布,可以使用JavaScript进行图形绘制。 17. `&lt;caption&gt;`:表格的标题标签,显示在表格上方。 18. `...

    js修改绑定手机号码表单代码

    表单是用户与网站交互的重要界面,用于收集、提交数据。在手机号码修改场景下,表单通常包含输入框(input元素)供用户输入新的手机号码,以及提交按钮(button元素)用于触发验证和修改操作。设计师应确保表单具有...

Global site tag (gtag.js) - Google Analytics