ajax提交,form表单提交,onsubmit=return checksubmit()提交验证
Ajax提交的两种方式:
一是url参数提交数据,
二是form提交(和平常一样在后台可以获取到Form表单的值)。在所要提交的表单中,如果元素很多的话建议用第二种方式进行提交
一.Url参数提交数据
<script type="text/javascript">
function checkCorpID()//检测客户编号是否可用
{
if($.trim($("#txtF_CORPID")[0].value)=="")//txtF_CORPID是客户编号输入框
{
alert("请输入客户编号!");
}
else
{
$("#checkFlag").html("正在检测");//显示提示信息
$.ajax({
type: "POST", //提交方式(一般选择post提交,安全)
url: "CheckCorpID.ashx",
data: "ID="+$.trim($("#txtF_CORPID")[0].value),//提交表单,相当于CheckCorpID.ashx?ID=XXX
success: function(msg){$("#checkFlag").html("");alert( msg ); } //操作成功后的操作!msg是后台传过来的值
});
}
}
</script>
二.form表单提交
<script type ="text/javascript" src ="../js/jquery.js"></script> //必须要引用
<script type ="text/javascript" src ="../js/jquery.form.js"></script> //必须要引用
<script type="text/javascript">
// wait for the DOM to be loaded
$(document).ready(function() //ready在文档加载后激活函数
{
$('#Tip').hide();//显示操作提示的元素不可见
$('#form1').submit(function()//提交表单
{
//alert("ddd");
var options = {
target:'#Tip', //后台将把传递过来的值赋给该元素
url:'ReturnVisit.aspx?flag=do', //提交给哪个执行
type:'POST',
success: function(){ alert($('#Tip').text());} //显示操作提示
};
$('#form1').ajaxSubmit(options);
return false; //为了不刷新页面,返回false,反正都已经在后台执行完了,没事!
});
}
);
</script>
<body>
<form id="form1" runat="server">
<div>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" class="tableCategory">客户回访</td>
</tr>
<tr>
<td width="30%" class="tableBg1">客户名称:</td>
<td class="tableBg2">
<asp:TextBox ID="txtF_CorpName" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td width="30%" class="tableBg1">回访主题:</td>
<td class="tableBg2">
<asp:TextBox ID="txtF_ReturnVisitTitle" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td width="30%" class="tableBg1">联系人:</td>
<td class="tableBg2">
<asp:TextBox ID="txtF_ContractPerson" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td width="30%" class="tableBg1">联系人职务:</td>
<td class="tableBg2">
<asp:TextBox ID="txtF_ContractPersonPosition" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td width="30%" class="tableBg1">联系电话:</td>
<td class="tableBg2">
<asp:TextBox ID="txtF_ContractPhone" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td width="30%" class="tableBg1">回访时间:</td>
<td class="tableBg2">
<asp:TextBox ID="txtF_ReturnVisitDate" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td width="30%" class="tableBg1">回访内容:</td>
<td class="tableBg2">
<asp:TextBox ID="txtF_ReturnVisitContent" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td width="30%" class="tableBg1">回访相关文档:</td>
<td class="tableBg2">
<asp:TextBox ID="txtF_ReturnVisitFile" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td width="30%" class="tableBg1"> </td>
<td class="tableBg2">
<asp:Button ID="Submit_BT" runat="server" Text="确定" CssClass="button" />
<input type="reset" class="button" value="还原" />
</td>
</tr>
</table>
<span id="Tip"></span>
</div>
</form>
</body>
<button type="submit">保存</button></div></form>
三.提交验证
HTML表单代码段:
<span id="ss" style="color: red;font-size: 12px;"></span>
<form action="dw/addDw" method="post" οnsubmit="return submitCheck()">
<table class="rttable"><tr><td class="tdbg">单位名称</td><td class="tdinput"><input type="text" name="dwmc" id="dwmc" required="required" value="${tbDw.dwmc }" class="form-control" /></td><button type="submit">保存</button></div></form>
javascript验证代码:
function submitCheck(){var s1 = $("#ss").html();
if(s1.length > 0 ){if(s1.length > 0){alert(s1);} return false;} else {return true;}
}
$("#dwmc").blur(function() {var cyxmpzmc = $("#dwmc").val();var cyxmpzmcStr = encodeURI(encodeURI(cyxmpzmc));$.post("dw/dwmccfyz?cyxmpzmc="+cyxmpzmcStr, function(data){if("1"==data) {alert("单位名称已存在,请重新录入!"); $("#ss").text("单位名称已存在");} else{$("#ss").text("");}});});
效果展示: javascript:知识点: $("#dwmc").blur(function() { //blur焦点 var cyxmpzmc = $("#dwmc").val(); //val取值 <span id="ss" style="color: red;font-size: 12px;"></span> $("#ss").text("单位名称已存在"); //html改标签里的内容
ajax提交,form表单提交,onsubmit=return checksubmit()提交验证相关推荐
- form表单的onsubmit() return问题
以前在项目中为一个表单(from)编写onsubmit()脚本的时候,经常需要验证表单中数据的合法性,所以常会写道:<form action="/admin/addUser.do&qu ...
- ajax提交form表单到数据库(无刷新)
在静态页面提交表单到数据库很简单就是单纯的 <form action="test.php" method="post"> </form> ...
- 使用原生javascript实现ajax提交form表单
使用原生javascript实现ajax提交form表单 ============================ 1 准备表单 首先我们需要编写一个html代码,这里我是采用nodej ...
- form表单提交以及用Jquery实现ajax提交form表单
在form标签中添加Action(提交的地址)和method(post),且有一个submit按钮(<input type='submit'>)就可以进行数据的提交,每一个input标签都 ...
- Jquery通过Ajax方式来提交Form表单
今天刚好看到Jquery的ajax提交数据到服务器的方法,原文是: 保存数据到服务器,成功时显示信息. jQuery 代码: $.ajax({type: "POST",url: & ...
- html form通过ajax提交表单提交数据,Jquery通过Ajax方式来提交Form表单的具体实现
今天刚好看到Jquery的ajax提交数据到服务器的方法,原文是: 保存数据到服务器,成功时显示信息. jQuery 代码: $.ajax({ type: "POST", url: ...
- ajax post form上传图片,ajax怎样提交form表单与实现文件上传
这次给大家带来ajax怎样提交form表单与实现文件上传,ajax提交form表单与实现文件上传的注意事项有哪些,下面就是实战案例,一起来看一下. 前几天,发现了一些小问题.我在写后台管理页面时,需要 ...
- 通过php jq ajax 提交form表单
参考http://www.php100.com/html/webkaifa/PHP/PHPyingyong/2013/0619/13568.html html <div id="con ...
- 使用ajax提交form表单,包括ajax文件上传 转http://www.cnblogs.com/zhuxiaojie/p/4783939.html...
使用ajax提交form表单,包括ajax文件上传 前言 使用ajax请求数据,很多人都会,比如说: $.post(path,{data:data},function(data){... },&quo ...
- 学习日志day45(2021-09-09)(1、有道翻译API使用json格式数据 2、JSONP 3、Ajax提交form表单 4、Web Uploader)
学习内容:学习JavaWeb(Day45) 1.有道翻译API使用json格式数据 2.JSONP 3.Ajax提交form表单 4.Web Uploader 1.有道翻译API使用json格式数据 ...
最新文章
- Leangoo看板协作工具“免费版”和“企业版”差异
- 转:SLAM算法解析:抓住视觉SLAM难点,了解技术发展大趋势
- ie9怎么开兼容模式
- android 解决Error:This Gradle plugin requires a newer IDE able to request IDE model level 3. For Andro
- 渗透测试流程(单台服务器)
- 微软私有云解决方案_微软发布电信云平台 ,互联网巨头争夺5G网络商机
- MongoDB复制集搭建主服务器模拟切换
- java对象创建的细节
- Paypal开源nodejs框架研究(二)KrakenJs之Enrouten
- 累次积分怎么计算_【高等数学】二重积分化累次积分方法
- 怎样在 kibana 中查看 es elasticsearch lucene 的版本
- tomcat 8.5.31启动报错:org.apache.jasper.servlet.TldScanner.scanJars At least one JAR was scanned for TLD
- 简单的微服务feign之间调用授权/安全验证
- 解析dump的几种方式
- PHP:【商城后台管理系统】admin超级管理员后台操作界面部署{无限级菜单}
- 阿里巴巴戛纳首秀,带去了天猫全域营销
- 金融工资和计算机工资待遇,【成都京东金融工资】计算机待遇-看准网
- ABB系统备份与恢复(重做系统)S4C系统
- 信号完整性分析---串扰和反射
- Bugku CTF每日一题 可爱的故事