jq表单：阻止默认提交，获取属性值

最新推荐文章于 2025-10-19 20:54:06 发布

原创最新推荐文章于 2025-10-19 20:54:06 发布 · 2.9k 阅读

1 ·

CC 4.0 BY-SA版权

jQuery 专栏收录该内容

41 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现表单序列化的技巧，通过阻止表单的默认提交行为，并利用serializeArray()方法来序列化表单值。需要注意的是，禁用的元素和提交按钮的值不会被序列化。

$('.submit').click(function(e){
    e.preventDefault();   //阻止默认提交
    var $this = $(this);
    var form = $this.parents('form');
    var data = form.serializeArray();     //输出以数组形式序列化表单值的结果：
});

特别说明，元素不能被禁用（禁用的元素不会被包括在内），并且元素应当有含有 name 属性。提交按钮的值也不会被序列化。文件选择元素的数据也不会被序列化。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

大洋PHP

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

jquery实现表单验证并阻止非法提交

10-23

本文给大家分享的是使用jquery实现表单验证并阻止非法提交的代码，思路非常不错，这里推荐给小伙伴们参考下。

jQuery实现提交表单时不提交隐藏div中input的方法

10-16

jQuery的form操作技巧汇总专题中，还包括了各种其他与表单相关的功能，如序列化表单数据、阻止默认的表单提交行为、添加自定义验证规则等。对于JSON数据的处理，jQuery提供了$.parseJSON()方法解析JSON字符串，$.get...

参与评论您还未登录，请先登录后发表或查看评论

Jquery阻止表单提交

经验在于积累而不在于年限---dreamboycx

11-29

486

$(document).ready(function(){ $("form").submit(function(e){ e.preventDefault(); alert("表单阻止提交了"); }); });

jQuery 禁用表单提交按钮，防止用户请求重复提交

沉默王二

11-29

4707

当页面上有表单的时候，为了防止用户等不及服务器端响应重复点击提交按钮向服务器端发送重复请求，我们通常需要在请求提交之前将提交按钮禁用。先来看一下页面。当用户点击提交申请这个按钮时，我们需要将其禁用。 $("button.btn-submit", $form).attr("disabled","true"); 一般请求结束会遇到两种情况，一种是 success，一种是 error，如果要在这...

jQuery submit() 方法完全指南：掌握表单提交的精髓

weixin_42107409的博客

10-19

369

jQuery的方法用于处理表单提交事件。当用户点击提交按钮或通过JavaScript代码触发表单提交时，会触发submit事件。关键概念：是 jQuery 提供的事件处理方法，用于监听或触发表单提交事件。当用户点击提交按钮（或）或调用表单的方法时，会触发该事件。 ⚡ 实际演示 submit() 方法的两种用途在jQuery中，方法有两种主要用途：绑定事件处理函数和触发事件。 2. 触发submit事件表单数据的获取与处理在表单提交前，我们通常需要获取和处理表单数据。深入理解 {#深入理解

jquery原生如何特定的条件里面阻止form表单提交

熟悉 vue2 vue3 jquery js echarts

12-26

683

【代码】jquery原生如何特定的条件里面阻止form表单提交。

获取＜form＞表单的数据、阻止默认行为

03-28

238

获取表单的数据、阻止默认行为

JS和jQuery使用submit方法无法提交表单的原因分析及解决办法

10-22

当点击这类a标签时，实际上触发的是href属性指定的链接，若未指定，则默认行为是重新加载当前页面，这将导致原本应触发的表单提交事件被中断。针对这种情况，解决办法是在a标签的href属性中添加"javascript:void(0);...

jquery 构造函数在表单提交过程中修改数据

12-11

// 阻止默认的表单提交行为 appendText(); // 调用我们的函数 // 在这里可以添加额外的验证或处理 // ... // 最后，手动触发异步提交或恢复默认的提交 }); ``` 这种模式下，我们可以更方便地管理表单提交过程...

利用AjaxSubmit()方法实现Form提交表单后回调功能

10-18

// 阻止默认表单提交 $(this).ajaxSubmit(options); }); }); ``` 在这个例子中，表单ID为`myForm`，当用户点击提交按钮时，会触发异步提交，服务器返回的数据将通过`showResponse`回调函数处理。总之，...

使用jquery提交form表单并自定义action的实现代码

11-22

如果输入为空，我们会弹出警告并阻止表单的默认提交行为。如果验证通过，我们将自定义`action`属性，这里我们将其设置为`/index/Search?u=`，后面接上`usercode`的编码值，这样就可以在URL中携带这个参数。最后，...

jQuery防止表单提交

筱筱的专栏

09-20

443

当表单中间只有一个元素时，按enter键时，表单会自动提交。如果不想提交 jQuery(function($){ $('#form').keypress(function(e){ if(e.keyCode == 13) { e.preventDefault(); } }); }) form为表单的id，keydown和keypress事件可以 key

jQuery 阻止表单提交

卩杉的博客笔记

11-18

4516

1. 利用 onsubmit="return false" 阻止表单提交 <form action="" method="get" onsubmit="return false"> <input type="text" name="name" value=""> <button

js、jQuery阻止表单提交

Areom个人博客

08-04

378

<form action="yourURL" id="form" method="post"> <input name="title" value=""> <input name="nickname" value=""> <button id="submit" onclick="checked()">提交</button></form><script type="text/java

在JQuery中阻止表单的提交动作

最新发布

10-29

以下是几种使用 jQuery 进行自定义表单提交的方法： ### 自定义 action 提交表单通过点击按钮，设置表单的 action 属性并提交表单。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Custom Form Submit</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <form id="SearchForm" name="SearchForm" method="post"> <input type="text" id="UserCode" placeholder="客户号"> <input type="text" id="Verifycode" placeholder="验证码"> <button id="btn">提交</button> </form> <script> $(function () { $("#btn").click(function () { var usercode = $("#UserCode").val(); var verifycode = $("#Verifycode").val(); if ($.trim(usercode) == "" || $.trim(verifycode) == "") { alert(" 您的[客户号]或者[验证码]必须填写！"); return false; } else { document.SearchForm.action = '/index/Search?u=' + usercode; document.SearchForm.submit(); } }); }); </script> </body> </html> ``` 此方法先获取输入框的值，进行简单验证，若验证通过则设置表单的 action 属性并提交表单[^1]。 ### 利用 AJAX 自定义表单提交使用 AJAX 提交表单数据，可灵活传参并处理响应。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>AJAX Form Submit</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <form id="form_comment"> <input type="text" id="comment" placeholder="请输入评论"> <button type="submit">提交评论</button> </form> <script> $(document).ready(function () { function decodeQuery() { var search = window.location.href; return search.split('=')[1].split('?')[0]; } var taskId = decodeQuery(); $("#form_comment").submit(function (event) { event.preventDefault(); var comment = $('#comment').val(); var data = { "comment": comment }; $.ajax({ url: "/task_mgm/taskinfo_comment=" + taskId, type: "POST", data: JSON.stringify(data), contentType: "application/json", dataType: "json", success: function (resp) { if (resp.error == 'OK') { alert('评论成功'); $('#comment').val(''); } else { alert('评论失败'); } } }); }); }); </script> </body> </html> ``` 该方法通过阻止表单的默认提交行为，使用 AJAX 发送表单数据到指定 URL，并根据响应结果给出提示[^2]。 ### 将表单转为 AJAX 提交将表单数据转换为键值对，使用 AJAX 提交。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>AJAX Form Submit</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <form id="myForm" action="/submit" method="post"> <input type="text" name="name" placeholder="姓名"> <input type="email" name="email" placeholder="邮箱"> <button type="submit">提交</button> </form> <script> function ajaxSubmit(frm, fn) { var dataPara = getFormJson(frm); $.ajax({ url: frm.action, type: frm.method, data: dataPara, success: fn }); } function getFormJson(frm) { var o = {}; var a = $(frm).serializeArray(); $.each(a, function () { if (o[this.name] !== undefined) { if (!o[this.name].push) { o[this.name] = [o[this.name]]; } o[this.name].push(this.value || ''); } else { o[this.name] = this.value || ''; } }); return o; } $(document).ready(function () { $('#myForm').submit(function (event) { event.preventDefault(); ajaxSubmit(this, function (response) { console.log(response); }); }); }); </script> </body> </html> ``` 此方法定义了 `ajaxSubmit` 和 `getFormJson` 函数，将表单数据转换为 JSON 对象，使用 AJAX 提交表单，并在成功时执行回调函数[^4]。