一、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. UVA821 floyd最短路+暴力

    题意:给n条边,求每两个点之间的平均距离: 思路:数据是100条边,用floyd得到每两点之间的最短距离,然后遍历相加除以边的数目: #include <iostream> #includ ...

  2. 13年省赛-B题-连通分量

    题意:求从1到N是否存在一条路,可以遍历每个节点. 思路:求任意两点之间是否通畅即可: 疑惑:完全暴力,bfs但是TLE,问题在于求连通分量(PS:不会)贴别人代码,先保存着. #include &l ...

  3. Android系统在新进程中启动自定义服务过程（startService）的原理分析

    在编写Android应用程序时,我们一般将一些计算型的逻辑放在一个独立的进程来处理,这样主进程仍然可以流畅地响应界面事件,提高用户体验.Android系统为我们提供了一个Service类,我们可以实现 ...

  4. Chocolate_DP

    Description In 2100, ACM chocolate will be one of the favorite foods in the world. "Green, oran ...

  5. GIT之二 基础篇(2)

    远程仓库的使用 要参与任何一个 Git 项目的协作,必须要了解该如何管理远程仓库.远程仓库是指托管在网络上的项目仓库,可能会有好多个,其中有些你只能读,另外有些可以写.同他人协作开发某个项目时,需要管 ...

  6. Asp.net操作Excel----NPOI!!!!1

    前言 Asp.net操作Excel已经是老生长谈的事情了,可下面我说的这个NPOI操作Excel,应该是最好的方案了,没有之一,使 用NPOI能够帮助开发者在没有安装微软Office的情况下读写Off ...

  7. LPEG

    local lpeg = require "lpeg"    function f0() end;    function f1() return "a" en ...

  8. magneto创建运费模板

    Magento系统自带了大概7种运费方式:平价.运费表.免运费.ups.usps.fedex.dhl等.不过这些依然无法满足我们的需求,这时候就需要创建一个shipping module 来实现了.创 ...

  9. ubuntu中常用快捷键

    本文转自 http://yife.im/ubuntu-terminal-shortcode/ 原文的格式会比较好看. Ubuntu终端常用的快捷键 Oct 3, 2013 • 23,469 views ...

  10. 【题解】【数组】【Leetcode】Merge Sorted Array

    Given two sorted integer arrays A and B, merge B into A as one sorted array. Note: You may assume th ...