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>

解释:  

时间: 2024-08-26 15:17:34

Dom之表单提交与默认行为的相关文章

Ajax表单提交

jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Form有两个核心方法 -- ajaxForm() 和 ajaxSubmit(), 它们集合了从控制表单元素到决定如何管理提交进程的功能.另外,插件还包括其他的一些方法: formToArray().formSerialize().fieldSerialize().fieldValue().clearForm().clearFields() 和 resetForm()等.

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

ajax form表单提交 input file中的文件 现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件, 为了解决这个问题我走了不少弯路: 1.用原生的 input file , 不支持ajax上传文件,你肯定会说可以用 ajax form表单上传了呀?不过我后面还要调用上传成功后用js处理一些对话框,所以这种方法排除 2.用了 uploadify 上传插件,弄出来能上传东西,结果不理想:因为不能判断上传的

Extjs 表单提交送给新手

Extjs的三种提交方式: 表单Ajax提交,普通提交,单独Ajax提交: 1.表单ajax提交(默认提交方式) 提交函数:当按下表单中的提交按钮时执行下面的btn函数,按照表单的name进行提交.提交数据后根据后台的返回值不同来回调success或者failure函数(和单独ajax的提交不同),后台返回值的形式:[如果返回outputResult(“{success:true}”),则调用success的函数.如果返回:outputResult(“{success:false,reason:

jquery.form.js(ajax表单提交)

Form插件地址: 官方网站:http://malsup.com/jQuery/form/ 翻译地址:http://www.aqee.net/docs/jquery.form.plugin/jquery.form.plugin.html#getting-started 一.准备工作 写一个表单: <form id="reg" action="123.php" method="post"> <p> <label for

form表单提交过程

本文为转载文章! 今天,我将站在HTML和单纯的Asp.net框架的角度来解释它们的工作方式,因此,本文不演示WebForms服务器控件的相关内容. 简单的表单,简单的处理方式 好了,让我们进入今天的主题,看看下面这个简单的HTML表单. <form action="Handler1.ashx" method="post" > <p>客户名称: <input type="text" name="Custom

jQuery表单提交验证

<!DOCTYPE html><html> <head> <title>表单提交验证功能</title> <meta charset="utf-8"/> <script src="scripts/jquery-1.11.3.js"></script> </head> <body> <fieldset> <legend>用户注

表单提交问题

HTML DOM Button 对象 Button 对象 Button 对象代表 HTML 文档中的一个按钮. 该元素没有默认的行为,但是必须有一个 onclick 事件句柄以便使用. 在 HTML 文档中 <input type="button"> 标签每出现一次,一个 Button 对象 就会被创建. 您可以通过遍历表单的 elements[] 数组来访问某个按钮,或者通过使用 document.getElementById(). 定义和用法 click() 方法可模拟

Ajax表单提交插件jquery form

jQuery Form插件是一个优秀的Ajax表单插件,我们可以非常容易的使用它处理表单控件的值,清空和复位表单控件,附件上传,以及完成Ajax表单提交. jQuery Form有两个核心方法ajaxForm()和ajaxSubmit(),本文我们重点介绍ajaxSubmit()的应用. HTML 首先我们载入jquery库和jquery.form.js插件.jquery.form.js插件的官网地址:http://www.malsup.com/jquery/form/ <script type

表单提交详细介绍

阅读目录 开始 简单的表单,简单的处理方式 表单提交,成功控件 多提交按钮的表单 上传文件的表单 MVC Controller中多个自定义类型的传入参数 F5刷新问题并不是WebForms的错 以Ajax方式提交整个表单 以Ajax方式提交部分表单 使用JQuery,就不要再拼URL了! id, name 有什么关系 使用C#模拟浏览器提交表单 资源链接 Form(表单)对于每个WEB开发人员来说,应该是再熟悉不过的东西了,可它却是页面与WEB服务器交互过程中最重要的信息来源. 虽然Asp.ne