Dom之表单提交与默认行为
一、button提交表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="https://www.sogou.com/web" method="get">
<input type="text" name="query"> <input type="submit" value="提交">
</form>
</body>
</html>
效果图
二、JS提交表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form id="form1" action="https://www.sogou.com/web" method="get">
<input type="text" name="query">
<div onclick="Submit();">提交</div>
</form>
<script type="text/javascript">
function Submit(){
document.getElementById('form1').submit();
}
</script>
</body>
</html>
效果图
三、问题：如果文本框中没有输入内容或内容全部为空格，我就不让它有提交的动作，怎么办呢？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form id="form1" action="https://www.sogou.com/web" method="get">
<input type="text" name="query">
<input type="submit" value="提交" onclick="return Submit();">
</form>
<script type="text/javascript">
function Submit(){
var obj = document.getElementsByName('query')[0];
if(obj.value.trim()){
return true
}else{
alert('请输入内容');
return false
}
}
</script>
</body>
</html>
解释：
Dom之表单提交与默认行为的更多相关文章
- vue---阻止默认表单提交的三种方法
vue在做表单提交的时候,需要用到一些自定义的验证规则,这个时候就需要阻止表单默认的提交方式. 方法一:直接阻止 <form id="form" @submit=" ...
- 防止表单提交时刷新页面-阻止form表单的默认提交行为
最近在写 ajax 提交的时候遇到一个问题,在执行 ajax 提交之后,浏览器页面自动刷新了,主要是没有 由于form 表单的默认提交行为.一下是几种阻止 form 表单默认提交行为的方式. 1.使用 ...
- 如何阻止<a>标签默认行为和表单提交
阻止<a>标签默认行为 方式一 (通过return false) <!DOCTYPE html> <html> <head> <meta char ...
- 处理laravel表单提交默认将空值转为null的问题
比如表单提交,如果我们提交了这个字段,但是这个字段为空字符串.在Laravel中会自动转义成Null. 处理这个问题,直到找到中间件\vendor\laravel\framework\src\Illu ...
- form表单提交过程
本文为转载文章! 今天,我将站在HTML和单纯的Asp.net框架的角度来解释它们的工作方式,因此,本文不演示WebForms服务器控件的相关内容. 简单的表单,简单的处理方式 好了,让我们进入今天的 ...
- Ajax表单提交插件jquery form
jQuery Form插件是一个优秀的Ajax表单插件,我们可以非常容易的使用它处理表单控件的值,清空和复位表单控件,附件上传,以及完成Ajax表单提交. jQuery Form有两个核心方法ajax ...
- input file 在开发中遇到的问题 类似ajax form表单提交 input file中的文件
最近在做项目的过程中遇到个问题,在这里做个记录防止日后忘记 现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件, 为 ...
- ajax form表单提交 input file中的文件
ajax form表单提交 input file中的文件 现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件, 为了 ...
- 项目总结15：JavaScript模拟表单提交(实现window.location.href-POST提交数据效果)
JavaScript模拟表单提交(实现window.location.href-POST提交数据效果) 前沿 1-在具体项目开发中,用window.location.href方法下载文件,因windo ...
随机推荐
- codeforces 711C Coloring Trees（DP）
题目链接:http://codeforces.com/problemset/problem/711/C O(n^4)的复杂度,以为会超时的 思路:dp[i][j][k]表示第i棵数用颜色k涂完后bea ...
- array_walk() 函数
array_walk() 函数对数组中的每个元素应用回调函数.如果成功则返回 TRUE,否则返回 FALSE. 典型情况下 function 接受两个参数.array 参数的值作为第一个,键名作为第二 ...
- magento 全页缓存
全页缓存能极大的提高网页的响应速率,但magento社区的商用全页缓存工具都很贵,但是有一款免费的叫ezzoom,虽然免费但是功能强大,能够对产品.分类.特定模块进行缓存,还支持页面某些部分的动态加载 ...
- C++学习笔记2：关于开发
一.简单的开发流程 (1)定义要被解决的问题: 明确定义待被解决问题,比如具体实现什么功能等. (2)设计解决问题的方法: 好方法的有哪些特点: 1.方法明确: 2.规范化:(已被验证过) 3.模块化 ...
- wddm 部署问题解决
在把wddm部署到一台老的服务上的 windows server 2003 上时遇到了问题,之前也在 windows server 2003 上装过,但是并没有遇到问题,估计和服务器比较老有关系. 问 ...
- Flume NG 简介及配置实战
Flume 作为 cloudera 开发的实时日志收集系统,受到了业界的认可与广泛应用.Flume 初始的发行版本目前被统称为 Flume OG(original generation),属于 clo ...
- USB相关的网络资料
相关资源连接: USB官网:http://www.usb.org/home <USB in a NutShell>: http://www.beyondlogic.org/usbnutsh ...
- Java-->类的成员
一.方法重载 在同一个类中,方法名相同.形参列表不同的两个多个方法之间构成重载!overload 调用方法的时候,是根据你传递的实参,来决定到底调用的是重载的哪个方法!!! 注意: 1.判断形参列表是 ...
- 319. Bulb Switche
There are n bulbs that are initially off. You first turn on all the bulbs. Then, you turn off every ...
- bzoj 1012 维护一个单调数列
Description 现在请求你维护一个数列,要求提供以下两种操作: 1. 查询操作.语法:Q L 功能:查询当前数列中末尾L个数中的最大的数,并输出这个数的值.限制:L不超过当前数列的长度. 2. ...