方式一: 使用input type="submit" 提交

<form action="http://www.w3school.com.cn/tiy/loadtext.asp" onsubmit="return false;">
<input type="text" name="userName" />
<input type="submit" />
</form>

onsubmit 事件会在表单中的确认按钮被点击时发生。  return false会阻止提交;

方式二:使用js提交 submit()方法

<form action="http://www.w3school.com.cn/tiy/loadtext.asp" id="myForm">
<input type="text" name="userName"/>
<input type="button" onclick="submitForm();" />
</form>
function submitForm() {
document.getElementById("myForm").submit();
}

方式三: 使用jquery提交 submit()方法

<form action="http://www.w3school.com.cn/tiy/loadtext.asp" name="testForm">
<input type="text" name="userName" />
<input type="submit" />
</form>
$("form[name=testForm]").submit(function(e) {
// 阻止默认提交
//e.preventDefault();
// 或者
//return false;
});

使用 e.preventDefault(); 或者 return false; 可以阻止默认提交

方式四: 使用ajax提交(或者jquery封装的ajax 推荐)

参考地址:http://www.w3school.com.cn/jquery/ajax_post.asp

$.ajax({
type: 'POST',
url: url,
data: data,
success: success,
dataType: dataType
});

js 表单提交的更多相关文章

  1. 原生JS 表单提交验证器

    转载:http://www.cnblogs.com/sicd/p/4613628.html 一.前言 最近在开发一个新项目,需要做登陆等一系列的表单提交页面.在经过“缜密”的讨论后,我们决定 不用外部 ...

  2. js表单提交,面向对象

    一.js表单验证之后再提交 1.普通按钮onclick函数调用表单的submit()函数 <input type=button name="submit1" value=&q ...

  3. js表单提交,判断文本框,用户名密码是否为空,JS表单检测!

    当表单提交时先触发验证的js代码,当验证表单的方法返回true时才会提交表单返回false则不提交数据<script type="text/javascript">fu ...

  4. 代码段:js表单提交检测

    市面上当然有很多成型的框架,比如jquery的validation插件各种吧.现在工作地,由于前端童鞋也没用这些个插件.根据业务的要求,自己就在代码里写了个简单的表单提交的检测代码(php的也写了一个 ...

  5. JS表单提交的几种方式

    第一种方式 : 表单提交,在 form 标签中增加 onsubmit 事件来判断表单是否提交成功 <script type="text/javascript"> fun ...

  6. js表单提交回调函数

    在研究表单的时候发现一个有意思的东西——在表单提交的时候如何保证数据全部提交完毕才会清空? 我们常用的<input type="reset" value="重置&q ...

  7. js表单提交一种方式

    在一个html和php混编的文件中,用到js提交表单的方法: 定义表单id为form1,提交按钮type为submit, var data_info = document.getElementById ...

  8. html js 表单提交前检测数据

    通过使用form的onsibmit来控制是否提交数据 返回值为真是提交,其他不变,示例如下: JS部分 function check() { var newPwd = document.getElem ...

  9. js表单提交到后台对象接收

    $.extend({ StandardPost:function(url,args){ var form = $("<form method='post' target='_blank ...

随机推荐

  1. maven eclipse 第3方包

    C:\Users\3510\.m2\repository\myjar install:install-file -Dfile=C:\Users\3510\.m2\repository\myjar\al ...

  2. Executor介绍

    1.Executor介绍: Executor是mybatis的核心接口之一,其中定义了数据库操作的基本方法,它的子类结构图如下:这这张关系图中,涉及到了模板方法模式和装饰器模式.BaseExecuto ...

  3. Day 4-8 hashlib加密模块

    HASH Hash,一般翻译做“散列”,也有直接音译为”哈希”的,就是把任意长度的输入(又叫做预映射,pre-image),通过散列算法,变换成固定长度的输出,该输出就是散列值.这种转换是一种压缩映射 ...

  4. jquery和js的几种页面加载函数的方法以及执行顺序

    参考博客:http://www.cnblogs.com/itslives-com/p/4646790.html    https://www.cnblogs.com/james641/p/783837 ...

  5. JavaScript之简易http接口测试工具网页版

    简易http接口测试工具网页版,支持get.post请求,支持json格式消息体,form表单暂不支持. httpClient.html <!DOCTYPE html> <html ...

  6. 二、Docker部署应用

    一.有关Docker的安装请参考docker官网  Docker 提供了两个版本:社区版 (CE) 和企业版 (EE). Docker 社区版 (CE) 是开发人员和小型团队开始使用 Docker 并 ...

  7. 百度云虚拟主机配置 Thinkphp5.1

    材料 服务器:百度云虚拟主机(nginx+php7.0+linux) Thinkphp 5.1 问题 百度云默认目录为/webroot,但是我们的需求是将项目存放到/webroot/public下面. ...

  8. Servlet3.0上传

    1.上传对表单限制 *method=post *Enctype=multipart/form-data,它的默认值是:application/x-www-form-urlencoded 表单中需要添加 ...

  9. .NET Core 2.0及.NET Standard 2.0 Description

    NET Core 2.0的发布时间,.NET Core 2.0预览版及.NET Standard 2.0 Preview大概在5月中旬或下旬发布. .NET Core 2.0正式版本发布时间大约在Q3 ...

  10. 保密工作与linux系统的发展

    保密工作从性质上可以分成商业方面的保密和国家安全方面的保密.由于自己从事的是IT方面的工作,工作中必然会接触涉及到计算机信息方面的相关文件.加上单位已近通过武器装备科研生产单位二级保密资格认证,今天就 ...