form表单重置方法 reset() jQuery 中form表单序列化方法 serialize()

最新推荐文章于 2022-04-21 20:06:33 发布
最新推荐文章于 2022-04-21 20:06:33 发布
阅读量848 收藏
点赞数
分类专栏： 前端 文章标签： javascript jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43157612/article/details/114536041
版权

1.form表单重置

myform 是form的id属性值
1.调用reset（）方法

 function fomrReset()
 {
     document.getElementById("myform").reset();
}

2.jquery中form表单序列化

serialize() 方法通过序列化表单值，创建 URL 编码文本字符串。

可以选择一个或多个表单元素（比如 input 及/或 文本框），或者 form 元素本身。

序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
</head>

<body>
    <form action="" id="form1">
        <input type="text" id="t1" name="name">
        <input type="text" id="t2" name="pwd">
        <button> 提交</button>
    </form>
    <script>
        $('button').click((e) => {
            e.preventDefault();
            console.log($('#form1').serialize());
        })
    </script>
</body>

</html>

在这里插入图片描述

kjs--
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery序列化form表单数据为JSON对象的实现方法
12-10
jquery提供的serialize方法能够实现。 $("#searchForm").serialize(); 但是，观察输出的信息，发现serialize()方法做的是将表单中的数据以htpp请求格式拼接成字符串。 serialize确实是能够解决一般的提交数据。但是有时我们需要的是一个object对象，而不是字符串（比如jqgrid reload时设置查询条件参数，就需要object对象）。 方法如下： (function(window, $) { $.fn.serializeJson = function() { var serializeObj = {}; va
form表单重置、清空方法记录
weixin_30508241的博客
10-26 7086
myform 是form的id属性值 1.调用reset（）方法 1 function fomrReset() 2 { 3 document.getElementById("myform").reset(); 4 } 2. 逐个清空input、select值 1 function resetAll() { 2 $("#myform").find('...
jquery重置form表单
二苟
05-30 3964
此篇文章用来防止自己屡次踩坑屡次忘的时候再掉头发。。。 由于JQuery中，提交表单是这样的： $('#form1').submit(); 所以每次想重置的时候就觉得是介样： $('#form1').reset(); 然后就会发现，不行！提示：$(...).reset is not a function emmm，当然，其实可以用这样的方法： document.getElementById("form1").reset(); 但是！这跟页面整体风格看起来不搭呀，我岂会甘心，于是乎，我
jquery 重置表单输入数据
huoshi
01-25 3443
有时候可能需要实现这样的效果：使用ajax提交表单，成功提交表单之后清空表单，如下代码：          提交    当点击 提交 之后，通过ajax将内容提交。  以前我是通过以下代码来清空表单  $("input").val('');  $("textarea").val('');  前些日子无意想到另外一个方法（如果知道下面的方法的
form.reset() 的真正作用，并不是清空所有输入栏
03-11 8110
form.reset() 的真正作用，并不是清空所有输入栏 form 有个方法是 reset()，作用不是清空 &lt;form&gt; 标签中的所有输入栏，而是回到上一次载入页面时的状态。 看例子： &lt;form id="input-form"&gt; &lt;input type="text"&gt; &lt;input type="text"&gt;
el-form表单重置resetForm()不生效问题
qfCSDN的博客
09-27 7522
字段不清空 或者完全没效果 检查： el-form 是否绑定model,带有ref,并且绑定的是同一数组。 <el-form :rules="rules" ref="form" :model="form"> el-form-item绑定prop <el-form-item label="商品状态" prop="enabled"> <el-radio-group v-model="form.enabled"> <el
jQuery实现form表单reset按钮重置清空表单功能
12-12
有时候可能需要实现这样的效果：使用ajax提交表单，成功提交表单之后清空表单，如下代码： 代码如下: <form> <input name=”name1″ /> <input name=”name1″ /> <textarea name=”content”></textarea> 提交 </form> 当点击 提交 之后，通过ajax将内容提交。 以前我是通过以下代码来清空表单 代码如下: $(“input”).val(”); $(“textarea”).val(
jQuery-serialize()输出序列化form表单值的方法
12-11
实例 输出序列化表单值的结果： 代码如下: $(“button”).click(function(){ $(“div”).text($(“form”).serialize()); }); 定义和用法 serialize() 方法通过序列化表单值，创建 URL 编码文本字符串。 您可以选择...
关于jquery form表单序列化的注意事项详解
10-19
本文将深入探讨jQuery中`form`表单序列化时需要注意的事项，以及如何正确使用这一功能。 首先，我们要明白表单序列化的主要方法是`$.serialize()`和`$.serializeArray()`。`$.serialize()`将表单数据转换为字符串，...
jQuery实现form表单序列化转换为json对象功能示例
10-18
jQuery库提供了一种简单的方法来实现这一功能，本篇文章将详细介绍如何使用jQuery将form表单序列化并转换为JSON对象。 首先，让我们理解一下基本概念。**序列化（Serialization）**是将复杂的数据结构转化为字符串...
关于form的reset()方法
just_coming_here的博客
11-03 7980
官方的解释是，reset() 方法可把表单中的元素重置为它们的默认值。 那么问题来了，当你的表单元素如下 当你修改这个表单的时候，即使把testValue修改了，你使用reset的时候它会变回来，而上面的username和password的内容都会为空。 它恢复了id=test 的i
JQuery重置form
sinat_34620530的博客
07-15 279
form重置方式 $("#searchForm").resetForm(); 外部class重置方式 $(".ul-form input:not(.btn)").val(""); $("select[name='selectname']").select2().val("").trigger("change");
JQuery中如何重置初始化表单（reset）
qq_27088383的博客
09-26 5655
示例代码 1 2 3 form id="form1" action="" method="post" runat="server">  input name="inp" id="inp" value="1" />  form> 方法一： 1 document
【jQuery】- form 表单 reset()方法不生效解决
m0_55960697的博客
04-21 2064
Jquery 对form表单对象直接使用reset()方法是无法生效得，而且可能报错没有reset()这个方法。 解决办法： $('#addModal form')[0].reset() // id为#addModal的元素，的子元素form
form表单的reset
yml957803796_1的专栏
07-11 1010
form表单的reset 重置表单(把表单的所有输入元素重置为它们的默认值。): 1.使用reset按钮，条件reset按钮必须在form表单内部。 2. &lt;input id="Button1" type="button" value="button" onclick="form1.reset();" /&gt;可以不在表单内部。 用途示例：一般我们做添加页面和编辑页面时用的都是同一个页...
form的重置reset
aae4581的博客
03-27 1072
HTML中Form表单的reset方法被用来重置用户所输入的内容，以前一直误以为其是单纯的将input等输入项中的值清空。 但实际上不是这样的，reset方法的本质是将input等输入项中的内容还原为属性value中的值，而不是“”空值。 如果input初始value值不为""空值，那么会重置为最开始的设置的值，如果value的初始值为“”空值，那么无影响。 因此使用场景是那些...
vue element-ui resetForm()表单重置的问题
热门推荐
ClamJ092的博客
11-22 2万+
在新建和编辑表单的时候，经常需要重置表单。通用的方法是 this.$refs[formName].resetFields()； 但是经常会发现有的选框重置不好使，那是因为你的表单元素没有绑定prop 如果你要清空表单，应该注意几个方面 <el-form ref="postForm" :model="postForm" :rules="rules" ...
form 表单元素重置(reset)解决方案
johncools的博客
03-31 7855
有初始值的 form 表单在点击默认的 Reset 按钮时，表单元素并不能清空，而是恢复初始值，相信这并不是我们期望的，本文介绍的是用 javascript 解决这一问题的方法。--------------------------------------------------------------点此浏览示例文件-----------------------------------------
jquery的form插件使用--form.clearForm()/resetForm()
qq_31459039的博客
05-24 2590
<!DOCTYPE html> <html lang="en"> <head> <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script type="text/javascript" s...
JQuery序列化表单值serializeToJson()、serialize()方法
最新发布
05-26
JQuery 提供了两种序列化表单值的方法：serializeToJson() 和 serialize()。 serializeToJson() 方法可以将表单中的所有字段值序列化为一个 JSON 对象，该方法需要依赖 jQuery 库和 json2 库。 示例代码： ```javascript $.fn.serializeToJson = function () { var serializeObj = {}; $(this.serializeArray()).each(function () { serializeObj[this.name] = this.value; }); return serializeObj; }; ``` 使用方式： ```javascript var formJson = $("#form").serializeToJson(); console.log(formJson); ``` serialize() 方法可以将表单中的所有字段值序列化为一个 URL 编码的字符串，该方法只需要依赖 jQuery 库。 示例代码： ```javascript var formStr = $("#form").serialize(); console.log(formStr); ``` 使用方式： ```html <form id="form" method="post"> <input type="text" name="name" value="" /> <input type="text" name="age" value="" /> <button type="button" onclick="submitForm()">提交</button> </form> <script> function submitForm() { var formData = $("#form").serialize(); console.log(formData); // ... } </script> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值