IE6下采用jquery的$("#form").submit()方法提交表单失效

本文介绍在IE6浏览器中使用jQuery提交表单时遇到的问题及解决方案,包括使用return false阻止默认行为、更改链接目标以及使用setTimeout延迟执行提交等方法。
转自: http://www.zds.name/jquery/ie6-form-submit/

 

IE6下采用jquery的$("#form").submit()方法按照如下方式提交表单无效

 function btnQuery(){
  var objSearchForm = $("#searchForm");	   		
  objSearchForm.attr("action", "${pageContext.request.contextPath}/admin/student_list.action");
  objSearchForm.attr("method", "post");
  objSearchForm.submit();
}
<a href="javascript:void(0)" onclick="btnQuery();" >查询</a>

 

先执行onclick里面的,再到href里面了。到href了下面都不执行了,所以只要执行了onclick,后面不执行就可以了

解决办法:

1、加reutrn false

<a href="javascript:void(0)" onclick="btnQuery();return false;" >查询</a>

 

2、把href里面的javascript:void(0)改成#或###

<a href="#" onclick="btnQuery();" >查询</a>

 

3、使用setTimeout,这种是网上查到的

function formSubmit() { $("#searchForm").submit(); }
<a href="javascript:void(0)" onclick="setTimeout(formSubmit,0);">查询</a>

 

<think>好的,我现在需要帮助用户解决EasyMDE和Semantic UI表单验证集成时,保存或发布按钮点击无反应的问题。首先,我得先理清楚可能导致这个问题的原因,然后逐步排查。 用户提到的是按钮点击后没有反应,可能的问题点可能出在表单验证、事件绑定、或者两者之间的集成上。首先想到的是表单验证是否阻止了按钮的默认行为。Semantic UI的表单验证通常会在表单提交时检查字段的有效性,如果验证不通过,会阻止提交。但有时候,如果验证逻辑有问题或者事件绑定不正确,可能会导致按钮点击后没有任何反应。 然后,考虑EasyMDE的集成问题。EasyMDE是一个Markdown编辑器,可能需要特定的初始化步骤。如果EasyMDE的实例没有正确初始化,或者其内容没有被正确捕获到表单字段中,可能会导致表单验证失败,进而阻止提交。比如,用户可能在表单中使用了一个隐藏的textarea来存储EasyMDE的内容,但如果没有正确同步内容,验证时可能认为该字段为空,导致失败。 接下来,检查事件绑定是否正确。用户提供的引用[4]中提到了使用jQuery来初始化复选框,可能涉及到事件绑定的方法。如果保存或发布按钮的事件监听器没有正确绑定,或者被其他代码阻止了,也会导致点击无反应。比如,可能没有阻止表单的默认提交行为,或者事件冒泡导致的问题。 另外,还要考虑JavaScript错误的影响。如果页面上有其他JavaScript错误,可能会导致整个脚本停止执行,从而使按钮的事件处理函数无法被调用。这时候需要检查浏览器的控制台是否有报错。 可能的解决步骤包括: 1. 检查表单验证规则是否正确配置,确保所有必填字段(包括EasyMDE对应的textarea)都被正确标记和验证。 2. 确保EasyMDE的内容实时同步到表单字段中,可能在输入时更新textarea的值。 3. 验证按钮的事件监听器是否正确绑定,没有冲突或被阻止。 4. 检查是否有JavaScript错误,排除其他脚本的影响。 5. 使用开发者工具查看网络请求,确认点击按钮后是否有请求发出,或者被阻止。 可能需要用户检查他们的代码,特别是表单验证的部分,以及EasyMDE的初始化和内容同步。此外,确保在表单提交时正确处理了验证通过和失败的情况,可能需要在Semantic UI的验证回调中手动提交表单,或者在验证通过后触发保存操作。 最后,根据用户提供的引用,特别是引用[4]中关于事件绑定的例子,可能需要用户确认他们的按钮事件是否按照类似的方式正确绑定,或者是否存在选择器错误导致的事件未绑定成功。</think>### 问题排查步骤及解决方法 #### 1. **检查表单验证逻辑** - **原因**:Semantic UI的表单验证可能未正确通过,导致按钮点击事件被拦截。例如,EasyMDE关联的文本域(如`<textarea>`)未正确触发验证规则,或存在必填字段未填写[^2]。 - **解决方法**: - 确认表单中所有必填字段(包括EasyMDE的输入区域)已添加`required`属性。 - 手动触发Semantic UI的验证流程: ```javascript $('.ui.form').form({ onSuccess: function(event, fields) { event.preventDefault(); // 阻止默认提交 // 手动执行保存/发布逻辑 } }); ``` #### 2. **确保EasyMDE与表单数据同步** - **原因**:EasyMDE的编辑器内容可能未实时同步到隐藏的`<textarea>`中,导致表单验证失败[^3]。 - **解决方法**: - 在EasyMDE初始化时绑定内容同步事件: ```javascript const easyMDE = new EasyMDE({ element: document.getElementById('editor'), autoDownloadFontAwesome: false, spellChecker: false, onBlur: function() { easyMDE.codemirror.save(); // 确保内容同步到textarea } }); ``` #### 3. **验证按钮事件绑定** - **原因**:按钮的点击事件可能未正确绑定,或与其他事件冲突(如表单提交的默认行为)[^4]。 - **解决方法**: - 使用`event.preventDefault()`阻止默认表单提交,并显式绑定点击事件: ```javascript $('#save-button').on('click', function(event) { event.preventDefault(); $('.ui.form').form('validate form'); // 手动触发验证 }); ``` #### 4. **检查JavaScript错误** - **原因**:其他脚本错误可能导致事件监听器失效。 - **解决方法**: - 打开浏览器控制台(F12)查看是否有报错,例如未定义的变量或语法错误。 - 确保EasyMDE和Semantic UI的依赖库(如jQuery)已正确加载且版本兼容。 #### 5. **验证网络请求与响应** - **原因**:保存/发布可能触发了异步请求,但未正确处理响应或存在跨域问题。 - **解决方法**: - 在开发者工具的“Network”选项卡中检查请求是否成功发送。 - 添加请求失败的回调处理: ```javascript $.ajax({ url: '/save', method: 'POST', data: $('.ui.form').serialize(), success: function(response) { /* 处理成功 */ }, error: function(xhr) { console.error('请求失败:', xhr.status); } }); ``` --- ### 关键代码示例 ```javascript // 初始化EasyMDE并绑定内容同步 const easyMDE = new EasyMDE({ element: document.getElementById('editor') }); // 初始化Semantic UI表单验证 $('.ui.form').form({ fields: { content: { identifier: 'editor', rules: [{ type: 'empty', prompt: '内容不能为空' }] } }, onSuccess: function(event) { event.preventDefault(); // 手动提交数据 $.ajax({ url: '/save', method: 'POST', data: $('.ui.form').serialize(), success: function() { alert('保存成功'); } }); } }); // 显式绑定按钮点击事件 $('#save-button').on('click', function(event) { event.preventDefault(); $('.ui.form').form('validate form'); }); ``` ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值