JS中$().form失效解决办法

最新推荐文章于 2021-07-23 12:58:33 发布
原创 最新推荐文章于 2021-07-23 12:58:33 发布 · 1.1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#jquery #bug

本文解决了一个关于form非空验证失效的问题，原因在于两个同名的jQuery版本冲突，一个从CDN引入，另一个从本地路径引入。文章强调了在使用JS库时避免冲突的重要性，并提供了简单的解决方案：删除其中一个重复的jQuery引入。

问题如下图：
在这里插入图片描述form的非空验证失效，后面多个地方检查，是js引入冲突了：
在这里插入图片描述这里面第一个jquery是cdn引入的，最后一个jquery是本地路径引入的，两个同名jquery导致jq中的form失效。所以使用时要注意不能冲突，删掉其中任意一个即可。

JavaScript - 使用 $.ajax 发送 JSON 字符串无法正常工作，但发送 JSON 对象可以正常工作
KkowServer的博客
10-03 163
在使用 $.ajax 方法发送数据时，我们可以选择发送 JSON 字符串或 JSON 对象。然而，有时候我们会遇到一个问题：当我们尝试发送 JSON 字符串时，它可能无法正常工作，而发送 JSON 对象则可以正常工作。方法发送数据时，如果要发送 JSON 数据，最好将 JSON 字符串转换为 JSON 对象，并将其作为参数传递给。现在，服务器将能够正确解析请求的数据，并且我们可以成功发送 JSON 数据。在上面的示例中，我们定义了一个 JSON 字符串作为请求的数据，并将其作为。在上面的示例中，我们使用。
解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题
10-16
本文将详细讲解如何解决LayUI中form.render()不显示下拉框、单选及复选框的问题。 首先，确保正确地引入了LayUI的CSS和JS文件。在HTML头部，你需要添加如下代码： ```html ${ctx}/adminthemes/version3/plugins/...
jquery.form.js失效问题。
weixin_34044273的博客
08-22 389
项目中引用 jquery.form.js插件。 打算用 .ajaxForm(options); 方式提交到后台，但是发现 .ajax 是可以正常交互的，但是 .ajaxform 就是不行。 首先 在form表单中，button的type问题。 form表单中，button 的 type 有三种值。 分别是： reset : 如...
jquery 通过submit()方法 提交表单示例
sinoyard的专栏
11-28 4505
jquery 通过submit()方法 提交表单示例： 本示例：以用户注册作为例子。使用jquery中的submit()方法实现表单提交。 注：本示例仅提供了对表单的验证，本例只用选用了三个字段作为测试。   用户点击提交按钮时，触发点击事件，会执行所有表单框的验证，如通过验证，则执行submit()方法，对表单内容进行提交。  用户注册 $(functi
$("#.form").serialisable();
a441962646的博客
05-10 367
$("#.form").serialisable(); 讲form 中的参数序列化
$('#login_Form').form('submit', {});是什么意思
热门推荐
weixin_39793752的博客
06-28 1万+
是EasyUI Form 表单表单（form）提供多种方法来执行带有表单字段的动作，比如 ajax 提交、加载、清除，等等。当提交表单时，调用 'validate' 方法来检查表单是否有效。用法 创建一个简单的 HTML 表单。构建表单并给 id、action、method 赋值。<form id="login_Form" method="post"> <...
$('#form').form("submit",{......});错误
qq_36074233的博客
11-13 1万+
【$('#form').form("submit",{......});】这是easyui中的写法， 如果要使用这种形式提交form表单，需要引入easyUI，即【jquery.easyui.min.js】。 对你有用记得点赞啊！谢谢！
chrome不支持form.submit的解决方案
09-03
这个解决方案虽然有效，但需要注意的是，`$.post()`仅处理POST请求，如果表单需要进行GET请求，需要使用`$.get()`或者`$.ajax()`。此外，这种方式可能会影响到表单的默认行为，比如防止表单重复提交、重定向等，因此...
解决layui中onchange失效以及form动态渲染失效的问题
10-16
然而，在实际使用过程中，开发者可能会遇到一些意料之外的问题，比如onchange事件失效和form动态渲染失效。本文将详细探讨这两个问题的解决方案。 首先，我们来看`onchange`事件失效的问题。在jQuery中，我们通常会...
Jquery form $(“form“).submit()；表单不能提交
qq_41703853的博客
11-12 1036
jsp 页面中使用 $(“form”).submit();进行表单提交，发现怎么都提交不了， 检查form anction 发现没有问题， 手动提交也没有问题。 <dd> <input type="button" value="立即登录" id="submit" class="submit_btn" /> </dd> 各种百度，排查终于jQuery api发现原因： 于是上jQuery API查找原因，看到以下这段文字顿时明
$.Form.serialize
HI,我是小瑞！
05-24 1824
<br />http://www.123-cha.com/prototype/api/form/serialize.htm<br /> serialize(formElement[, getHash = false]) -> String | object<br />串行化表单数据为字符串，以适用于 Ajax 请求（默认行为）。若指定可选的参数 getHash 值为 true，则返回一个 Hash 对象，以表单控件的名称（name 属性）为“键”，控件所代表的数据为“值”。 <br />根据可选参数 get
jQuery.Form插件介绍
hegz
04-07 268
一、前言 jQuery From插件是一个优秀的Ajax表单插件，使用它可以让你非常容易地、无侵入地升级HTML表单以支持Ajax。jQuery From有两个主要方法：ajaxForm和ajaxSubmit，它们集合了从控制表单元素到决定如何管理提交进程的功能，这两个方法支持许多充分控制数据提交的参数选项（options）。用Ajax来提交表单，你不可能找到比这个更容易的了。二、快速...
jquery 中$("#form :input") $("#form input") 区别
鹏javatar的专栏
04-09 1981
$("form :input") 返回form中的所有表单对象，包括textarea、select、button等 $("form input")返回form中的所有input标签对象
通过jQuery提交form表单，为什么要注意$("form")其中的form不是form的id和名字，而是固定就要这么写
Ideality_hunter的专栏
12-09 2302
通过jQuery提交form表单，为什么要注意$("form")其中的form不是form的id和名字，而是固定就要这么写？ 因为 $("")是利用标签获取元素 ··· ··· $("#id_name")才是是利用id获取元素
$(“.form“).html(str)；什么意思
qq_44165157的博客
07-23 559
“$(".form").html(str);”指的是先获取类为“form”的元素，然后将元素的内容设置为变量“str”的值。
jqueryeasyui的form插件使用--form('reset') 和form('clear')
qq_31459039的博客
05-24 2792
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Basic CRUD Application - jQuery EasyUI CRUD Demo</title> <link rel="stylesheet" type="te...
TypeError: $(...).form is not a function
a545132569的博客
11-20 9150
这两天在做图片上传的时候遇到了一个问题，通过$(...).form初始化form表单时总是报TypeError: $(...).form is not a function这个错，网上搜了好多说法众说纷纭，始终没有找到解决自己问题的方法。先总结如下：希望给后来的人提供帮助 可能一、引入的js顺序问题导致的，jquery.js一定要放在最前面juqery.form.js要放在自己的js之前
EASYUI 表单(FORM)用法
weixin_34403693的博客
09-23 276
http://blog.sina.com.cn/s/blog_3ecf39a70102ux8x.html 1，ajax提交只是简单的异步和文本提交。提交的数据需要序列化或程序指定。同时，数据也需要自己验证。如果使用easyui的验证组件validatebox，则需要在提交前调用，如下：      if ($("#formname").form("validate")){           ...
Form表单
发疯的土豆
04-05 347
params['breadcrumbs'][] = ['label' => $model->type_id, 'url' => ['typesave', 'id' => $model->type_id]];?> × 修改分类 ['class' => 'form-horizontal','id'=>'type-form'],'action'=>'/index.php?r=cour
this.$refs.upload.submit()在表格中失效
最新发布
06-20
### this.$refs.upload.submit() 在表格中失效的原因及解决方法 在 Vue.js 中使用 Element UI 的 `el-upload` 组件时，如果发现 `this.$refs.upload.submit()` 在表格中失效，通常是由以下原因导致的： 1. **手动上传模式未正确配置** 如果设置了 `:auto-upload="false"`，则需要手动触发上传逻辑。然而，如果 `before-upload` 方法返回了 `false` 或者没有正确处理上传逻辑，则会导致 `submit()` 方法失效[^2]。 2. **表单重置问题** 表单的重置操作可能会清空上传组件的状态，导致后续调用 `submit()` 无效。例如，`resetFields()` 方法会将表单重置为初始状态，但不会保留文件上传的状态[^4]。 3. **引用错误或组件未正确初始化** 确保 `ref="upload"` 已正确绑定到 `el-upload` 组件上。如果 `ref` 名称不匹配或组件未正确初始化，`this.$refs.upload.submit()` 将无法正常工作。 4. **文件列表为空** 如果 `el-upload` 的文件列表为空（即没有选择任何文件），调用 `submit()` 方法也不会触发上传逻辑。可以通过检查 `this.$refs.upload.uploadFiles` 来确认是否有待上传的文件[^1]。 #### 解决方法 以下是具体的解决方法： 1. **确保文件已正确添加到上传队列** 在调用 `submit()` 方法之前，确保文件已被添加到上传队列中。可以使用以下代码检查文件列表： ```javascript if (this.$refs.upload.uploadFiles.length === 0) { console.error("没有选择任何文件！"); return; } ``` 2. **正确处理 `before-upload` 方法** 如果在 `before-upload` 方法中返回了 `false`，需要手动调用上传逻辑。例如： ```javascript beforeUpload(file) { // 自定义逻辑 if (!isValid(file)) { return false; // 阻止默认上传行为 } return true; // 允许上传 }, submitUpload() { this.$refs.upload.submit(); // 手动提交上传 } ``` 3. **避免表单重置影响上传状态** 如果需要重置表单但保留上传文件的状态，可以单独处理上传组件的状态。例如： ```javascript resetForm(formName) { this.$refs[formName].resetFields(); // 保留上传文件状态 this.$nextTick(() => { this.$refs.upload.clearFiles(); // 清空文件列表 }); } ``` 4. **手动触发上传逻辑** 如果需要在特定条件下触发上传，可以结合 `handleStart` 和 `submit()` 方法实现。例如： ```javascript this.$refs["upload"].clearFiles(); // 清空文件列表 this.$nextTick(() => { this.$refs["upload"].handleStart(this.fileList[0].raw); // 添加文件到队列 this.$refs.upload.submit(); // 提交上传 }); ``` 5. **检查组件初始化状态** 确保 `el-upload` 组件已正确初始化，并且 `ref="upload"` 已正确绑定。可以在 `mounted` 生命周期中调试： ```javascript mounted() { console.log(this.$refs.upload); // 检查是否正确绑定 } ``` ### 示例代码 以下是一个完整的示例代码，展示如何正确使用 `el-upload` 并调用 `submit()` 方法： ```vue <template> <el-upload ref="upload" class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" :http-request="customUpload" :auto-upload="false" :limit="1" list-type="picture" > <el-button slot="trigger" size="small" type="primary">选取文件</el-button> <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">保存</el-button> </el-upload> </template> <script> export default { methods: { handlePreview(file) { console.log("预览文件:", file); }, handleRemove(file) { console.log("移除文件:", file); }, customUpload(options) { const formData = new FormData(); formData.append("file", options.file); // 自定义上传逻辑 fetch(options.action, { method: "POST", body: formData, }).then((response) => response.json()).then((data) => { console.log("上传成功:", data); }); }, submitUpload() { if (this.$refs.upload.uploadFiles.length === 0) { console.error("没有选择任何文件！"); return; } this.$refs.upload.submit(); }, }, }; </script> ``` --- ###
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值