方式一: 使用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. Hbase的作用

    实时动态增加列 多版本的意思为多个用户地址,多个用户信息,多个用户号码

  2. wireshark抓包获取好友ip,定位所在位置

    1.打开wireshark 2.按Ctrl + F 键进行搜索 1,选择搜索 “字符串”; 2,选择搜索 “分组详情”; 3,填写搜索数据 “020048″; 3.对qq好友发起语言或视频通话(需要对 ...

  3. Python:matplotlib绘制线条图

    线型图是学习matplotlib绘图的最基础案例.我们来看看具体过程:  下面我们将两条曲线绘制到一个图形里:   可以看到这种方式下,两个线条共用一个坐标轴,并且自动区分颜色. plot方法的核心是 ...

  4. ECharts在柱状图的柱子上方显示数量的方法

    在setOption()方法中的series配置中加上itemStyle配置 如下: series: [{ name: '人数', type: 'bar', data: [], //x轴对应列的值 i ...

  5. django celery redis 定时任务

    0.目的 在开发项目中,经常有一些操作时间比较长(生产环境中超过了nginx的timeout时间),或者是间隔一段时间就要执行的任务. 在这种情况下,使用celery就是一个很好的选择.   cele ...

  6. Git拉取项目时报错“remote: HTTP Basic: Access denied”解决方法

    问题: Git拉取项目时报错“remote: HTTP Basic: Access denied”,此问题多为本地密码与远端密码不符导致. 解决方法: 在下载地址中加上用户名和密码即可,如下: htt ...

  7. 实体类注解错误:Could not determine type for: java.util.List

    今天配置实体类注解时,出现以下错误: Caused by: org.hibernate.MappingException: Could not determine type for: java.uti ...

  8. Java 获取客户端ip返回127.0.0.1问题

    Java开发中使用 request.getRemoteAddr 获取客户端 ip ,返回结果始终为127.0.0.1.原因是服务器使用了nginx反向代理. 解决办法:在nginx配置文件nginx. ...

  9. 利用H5 FormData 实现表单中多图上传(可带其他如String类型数据)

    本篇的具体思路来源于右侧网址:http://blog.csdn.net/qq_19551571/article/details/49977983 本篇代码有所修改,请具体区分. 本篇使用的是 form ...

  10. vhdl 边沿

    rising_eage falling_eage clock'event and clock='1' 两种方式