一、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之表单提交与默认行为的更多相关文章

  1. vue---阻止默认表单提交的三种方法

    vue在做表单提交的时候,需要用到一些自定义的验证规则,这个时候就需要阻止表单默认的提交方式. 方法一:直接阻止 <form id="form" @submit=" ...

  2. 防止表单提交时刷新页面-阻止form表单的默认提交行为

    最近在写 ajax 提交的时候遇到一个问题,在执行 ajax 提交之后,浏览器页面自动刷新了,主要是没有 由于form 表单的默认提交行为.一下是几种阻止 form 表单默认提交行为的方式. 1.使用 ...

  3. 如何阻止<a>标签默认行为和表单提交

    阻止<a>标签默认行为 方式一 (通过return false) <!DOCTYPE html> <html> <head> <meta char ...

  4. 处理laravel表单提交默认将空值转为null的问题

    比如表单提交,如果我们提交了这个字段,但是这个字段为空字符串.在Laravel中会自动转义成Null. 处理这个问题,直到找到中间件\vendor\laravel\framework\src\Illu ...

  5. form表单提交过程

    本文为转载文章! 今天,我将站在HTML和单纯的Asp.net框架的角度来解释它们的工作方式,因此,本文不演示WebForms服务器控件的相关内容. 简单的表单,简单的处理方式 好了,让我们进入今天的 ...

  6. Ajax表单提交插件jquery form

    jQuery Form插件是一个优秀的Ajax表单插件,我们可以非常容易的使用它处理表单控件的值,清空和复位表单控件,附件上传,以及完成Ajax表单提交. jQuery Form有两个核心方法ajax ...

  7. input file 在开发中遇到的问题 类似ajax form表单提交 input file中的文件

    最近在做项目的过程中遇到个问题,在这里做个记录防止日后忘记 现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件, 为 ...

  8. ajax form表单提交 input file中的文件

    ajax form表单提交 input file中的文件 现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件, 为了 ...

  9. 项目总结15：JavaScript模拟表单提交(实现window.location.href-POST提交数据效果)

    JavaScript模拟表单提交(实现window.location.href-POST提交数据效果) 前沿 1-在具体项目开发中,用window.location.href方法下载文件,因windo ...

随机推荐

  1. 头文件定义和ARM指令

    2015.2.2星期一,阴天 内存管理:内存的分配和释放等静态和动态内存:主要是在释放方式上的区别 静态变量:编译时就已经确定,定义在函数外面自动变量:在程序运行时才能在栈中确定只读数据节:存放常量的 ...

  2. 【LEETCODE OJ】Copy List with Random Pointer

    Problem link: http://oj.leetcode.com/problems/copy-list-with-random-pointer/ Deepcopy a linked list ...

  3. DB Create and Insert

    <?php $servername = "localhost"; $username = "username"; $password = "pa ...

  4. HttpWebRequest 和HttpWebResponse总结

    1. 总结 总结2 3. Code using System; using System.Collections.Generic; using System.Linq; using System.Te ...

  5. 【转】Web应用的组件化开发（二）

    原文转自:http://blog.jobbole.com/56170/ 管控平台 在上一篇中我们提到了组件化的大致思路,这一篇主要讲述在这么做之后,我们需要哪些外围手段去管控整个开发过程.从各种角度看 ...

  6. JQuery操作Table元素

    使用Jquery操作Table中的tr向上或向下移动,以及全选和反选操作. 点击Table Head中的复选框,全选或反选表格中所有的复选框; 选中复选框,点击Up 按钮, tr上移;点击 Down ...

  7. magnetom模板制作

    我个人认为Magento模板制作的难点在于不了解Magento的架构,不会调动block.Magento的block调动几乎都是靠xml.在下面的内容会提及如何操作. 制作Magento模板的前提是: ...

  8. xcrun: error: active developer path ("/Volumes/Xcode/Xcode6-Beta.app/Contents/Developer") does not exist, use xcode-select to change

    When using MacOS with xcode6.4, i always meet these error: xcrun: error: active developer path (&quo ...

  9. Codeforces Round #298 (Div. 2) B. Covered Path

    题目大意: 一辆车,每秒内的速度恒定...第I秒到第I+1秒的速度变化不超过D.初始速度为V1,末速度为V2,经过时间t,问最远能走多远. 分析 开始的时候想麻烦了.讨论了各种情况.后来发现每个时刻的 ...

  10. 希尔排序（C++版）

    #include <iostream> using namespace std; /** Shell Sort * * Key: * * increment * * insertSort( ...