方式一: 使用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. [转帖]cmd批处理常用符号详解

    cmd批处理常用符号详解 https://www.jb51.net/article/32866.htm 很多符号 还是不清楚的.. 批处理能够极大的提高 工作效率 需要加强深入学习.   1.@一般在 ...

  2. Oracle pivot行转列函数案例

    with temp as( select '湖北省' province,'武汉市' city,'第一' ranking from dual union all select '湖北省' provinc ...

  3. word的"bug"

    发表博客发现,从word复制文本到chrome浏览器上的博客时, 如果复制完后立即关闭word,那么将无法粘贴到通过chrome浏览器访问的博客上,也无法粘贴到记事本上: 但是复制完立即关闭word后 ...

  4. SpringMVC配置三大组件

    1.组件扫描器 使用组件扫描器省去在spring容器配置每个Controller类的繁琐. 使用<context:component-scan>自动扫描标记@Controller的控制器类 ...

  5. netstat -na 查看有大量TIME_WAIT解决办法(修改内核参数)

    # netstat -an|awk '/tcp/ {print $6}'|sort|uniq -c      16 CLOSING     130 ESTABLISHED     298 FIN_WA ...

  6. Multiple websites on single instance of IIS

    序幕 通常需要在单个IIS实例上托管多个网站,主要在开发环境中,而不是在生产服务器上.我相信它在生产服务器上不是一个首选解决方案,但这至少是一个可能的实现. Web服务器单实例上的多个网站的好处是: ...

  7. 洛谷 P2119 魔法阵

    题目描述 六十年一次的魔法战争就要开始了,大魔法师准备从附近的魔法场中汲取魔法能量. 大魔法师有mm个魔法物品,编号分别为1,2,...,m1,2,...,m.每个物品具有一个魔法值,我们用X_iXi ...

  8. MySQL的my.cnf文件(解决5.7.18下没有my-default.cnf)

    官网说:从5.7.18开始不在二进制包中提供my-default.cnf文件.参考:https://dev.mysql.com/doc/refman/5.7/en/binary-installatio ...

  9. spring boot项目基本结构

    /==================================Controller @Controller public class SimpleController { @Autowired ...

  10. java中值类型与引用类型的关系

    值类型:就是java的基本类型.byte.short.int.long.float.char.double.boolean 引用类型:类(class).接口(Interface).数组(Array) ...