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 ...
随机推荐
- C# 封装一个钩子类
利用C#设置钩子函数,并封装成类.如果想要实现全局钩子的话,必须将实现的代码封装到类库里. using System; using System.Collections.Generic; using ...
- 【转发】构建高可伸缩性的WEB交互式系统（中）
原文转自:http://kb.cnblogs.com/page/503953/ 在<构建高可伸缩性的WEB交互式系统>的第一篇,我们介绍了Web交互式系统中平台的可伸缩性.本文将描述模块的 ...
- eclipse中文乱码
问题描述: 在导入log4j.properties文件时里面出现中文乱码,如下: ### 设置### log4j.rootLogger = debug,stdout,D,E ### è¾å ...
- interproscan 的使用和遇到的问题
错误一: 2014-10-08 13:09:32,238 [uk.ac.ebi.interpro.scan.jms.worker.LocalJobQueueListener:193] ERROR - ...
- HTTP 2.0 与 tomcat
tomcat 支持http2.0吗? 首先,HTTP2.0协议一级公布,只是推广和各个中间件软件的适配需要时间. stackoverflow里“Tomcat support for HTTP/2.0? ...
- 单元测试-代码覆盖率工具 -- JaCoCo
最近学习Mybatis的官方文档,看到了[项目文档]一节有很多内容没有见过,做个笔记,理解一下. 随着敏捷开发的流行,编写单元测试已经成为业界共识.但如何来衡量单元测试的质量呢?有些管理者片面追求单元 ...
- (实用篇)PHP缓存类完整实例
本文完整描述了一个简洁实用的PHP缓存类,可用来检查缓存文件是否在设置更新时间之内.清除缓存文件.根据当前动态文件生成缓存文件名.连续创建目录.缓存文件输出静态等功能.对于采用PHP开发CMS系统来说 ...
- 如何重启Activity
有的时候,我们只是想重启某个Activity,但是不重启整个App. 一种做法是: Intent intent = getIntent(); overridePendingTransition(0, ...
- discuz如何设置游客可以浏览板块，但是不能查看帖子内容呢？
后台 ,将用户组 --游客 阅读权限设置为0 QQ快捷登陆不正常 ,在首页,点击QQ快捷登陆,并不跳转到QQ认证页面,而是要输入用户名.密码.验证码等. 但是如果输入的是你想新注册的用户名等信息,却不 ...
- Codeforces Round #375 (Div. 2) A B C 水 模拟 贪心
A. The New Year: Meeting Friends time limit per test 1 second memory limit per test 256 megabytes in ...