ajax提交，form表单提交，onsubmit="return checksubmit()"提交验证
来源：互联网 发布：美女软件图标ico 编辑：程序博客网 时间：2024/06/06 21:38
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" onsubmit="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改标签里的内容
1 0
- ajax提交，form表单提交，onsubmit="return checksubmit()"提交验证
- 提交表单之前对表单进行检查的方法 onsubmit="return checkSubmit();"
- Form表单提交onSubmit return false失效
- onsubmit=return false阻止form表单提交javascript
- onsubmit=return false阻止form表单提交javascript
- 表单提交错误 ：onsubmit=return false阻止form表单提交
- 表单提交 onsubmit="return false"
- onsubmit="return check() 给form加onsubmit 验证所有表单后再提交，可以用返回false 来阻止submit提交
- js form onsubmit 表单提交
- 有关onsubmit return false 阻止form表单提交：js
- 有关onsubmit return false 阻止form表单提交：js
- 总结：FORM中使用onSubmit="return false"防止表单自动提交，以及submit和button提交表单的区别
- FORM中使用onSubmit="return false"防止表单自动提交，以及submit和button提交表单的区别
- 总结：FORM中使用onSubmit="return false"防止表单自动提交，以及submit和button提交表单的区别
- FORM中使用onSubmit="return false"防止表单自动提交，以及submit和button提交表单的区别
- 总结：form中使用onSubmit="return false"防止表单自动提交，以及submit和button提交表单的区别
- FORM中使用onSubmit="return false"防止表单自动提交，以及submit和button提交表单的区别
- FORM中使用onSubmit="return false"防止表单自动提交，以及submit和button提交表单的区别
- 2016年12月9日工作总结（JNI问题，AudioTrack之回调，FFmpeg之Seek）
- ecshop中出现Redefining already defined constructor for class 的解决方法
- 由<a href = "#" > 引发的思考
- OO设计与分析之二
- M版上在状态栏新增截屏功能
- ajax提交，form表单提交，onsubmit="return checksubmit()"提交验证
- 给 Java 程序猿们推荐一些值得一看的好书
- BZOJ2154——Crash的数字表格
- POJ 2377 Bad Cowtractors 笔记
- 第十六周项目1--验证算法--（4）快速排序
- 将字符串分段
- 微信支付和支付宝有什么区别？
- C#进制转换操作（二）
- URL编码方法的比较
