方式一: 使用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. mybatis源码分析(四)---------------代理对象的生成

    在mybatis两种开发方式这边文章中,我们提到了Mapper动态代理开发这种方式,现在抛出一个问题:通过sqlSession.getMapper(XXXMapper.class)来获取代理对象的过程 ...

  2. vue-resources&axios

    vue-resource vue-resource是Vue.js的一款插件,它可以通过XMLHttpRequest或JSONP发起请求并处理响应. vue-resource特点: 体积小 vue-re ...

  3. python之路--反射

    一 . isinstance, type, issubclass isinstance 可以判断该对象是否是XXX家族体系中的(只能往上判断) class Base: pass class Foo(B ...

  4. web攻擊

    一.dos攻擊 向服務器發送數量龐大的合法數據,讓服務器分不清是不是正常請求,導致服務器接收所有的請求.海量的數據請求會使得服務器停止服務和拒絕服務. 防禦:阿里云或其它資源服務器有專門web應用防火 ...

  5. How to sign app

    codesign --display --verbose=4 /applications/qq.app codesign --display --entitlements - /application ...

  6. codeforces379C

    New Year Ratings Change CodeForces - 379C One very well-known internet resource site (let's call it ...

  7. Wiener Filter

    假设分别有两个WSS process:$x[n]$,$y[n]$,这两个process之间存在某种关系,并且我们也了解这种关系.现在我们手头上有process $x[n]$,目的是要设计一个LTI系统 ...

  8. 了解AutoCAD对象层次结构 —— 5 —— 块表

    为了清楚的了解块表的组成内容,让我们利用MgdDbg工具查看一下块表中的块表记录.在开始页面,以无样板模式新建一个.dwg文件(图 4‑7(1)),这样的话,默认的块表记录只有3条(图 4‑7(2)) ...

  9. 高仿Readhub小程序 微信小程序项目【原】

    # News #### 项目介绍微信小程序项目涉及功能 https://gitee.com/richard1015/News https://github.com/richard1015/News 高 ...

  10. PXE网络装机

    PXE网络装机配置 安装CentOS 6.5系统 1.配置服务端IP地址和yum源 略 2.安装配置VSFTP服务 vsftpd 的作用:为客户端提供FTP服务,便于客户端下载操作系统 (1)安装vs ...