jquery.form插件中动态修改表单数据

jquery.form

jquery.form插件(http://malsup.com/jquery/form/)是大家经常会用到的一个jQuery插件,它可以很方便将表单转换为ajax的方式进行提交。以下是官网给出的一个栗子:

$(document).ready(function() {

var options = {

target: ‘#output1‘, // target element(s) to be updated with server response

beforeSubmit: showRequest, // pre-submit callback

success: showResponse // post-submit callback

};

$(‘#myForm1‘).ajaxForm(options);

});

function showRequest(formData, jqForm, options) {

var queryString = $.param(formData);

alert(‘About to submit: \n\n‘ + queryString);

return true;

}

function showResponse(responseText, statusText, xhr, $form) {

alert(‘status: ‘ + statusText + ‘\n\nresponseText: \n‘ + responseText +

‘\n\nThe output div should have already been updated with the responseText.‘);

}

再看以下需求:

假设我想在用户点击submit按钮的时候,对表单中的某些数据进行动态的修改,例如要对密码字段进行加密处理,然后才发送给服务器。这时候,我们可能想到可以在beforeSubmit的回调函数(showRequest)中进行处理,例如像这个样子:

function showRequest(formData, jqForm, options) {

var jform = jqForm[0];

var password= jform.password.value;

password=encrypt(password); //加密密码

$("#password").val(password);

alert($("#password").val()); //检验一下输入框的内容是否发生了改变

return true;

}

通过上面的代码,我们提交表单的时候很顺利弹出了我们期待的加密后的密码,表明表单内容已经被我们成功修改,但当我们以为一切都很顺利的时候,发现提交到服务器的密码依然是没有加密的密码?咋回事??

原因是:我们的修改晚了!!

因为,在执行beforeSubmit之前,jquery.form已经完成了表单数据的串行化处理,也就是说,你无论如何修改表单内容,其实都不影响串行化的结果。(就是jquery.ajax方法中的data数据)

那么,有没有办法呢?当然有啦,因为jquery.form早就为我们准备了另一个回调接口:beforeSerialize

我们只要将上述修改表单数据的过程挪到beforeSerialize的回调函数中,就可以在表单串行化之前对数据进行动态的修改。

看一下官网的表述:

  • beforeSerialize

    Callback function to be invoked before the form is serialized. This provides an opportunity to manipulate the form before it‘s values are retrieved.

  • beforeSubmit

    Callback function to be invoked before the form is submitted. The ‘beforeSubmit‘ callback can be provided as a hook for running pre-submit logic or for validating the form data. If the ‘beforeSubmit‘ callback returns false then the form will not be submitted.

很清楚看到,beforeSerialize可以在表单的数值被获取之前对数据进行处理。而beforeSubmit则是在提交之前对已经获取的数据进行校验。

时间: 2024-08-01 17:58:48

jquery.form插件中动态修改表单数据的相关文章

关于Artdialog插件中获取内部表单元素值的使用心得

在开发中既需要artdialog插件的美观大方,又需要自定义功能,所以就出现了以下情况(废话不多说,转入正题) 前台代码: 1 <input type="button" class="ontest" value="免费询盘"/> 2 <div style="display:none;clear:both;"> 3 <table> 4 <tr> 5 <td>姓名:<

Struts2中集合收集表单数据

收集表单的页面: 1 <form action="listAction1!insert" method="post"> 2 dog1:<input name="ulist[0].dog.did"/> 3 <input name="ulist[0].dog.dname"/><br> 4 dog2:<input name="ulist[1].dog.did"

jQuery验证插件的例子( 表单验证vs2013)

1 插件支持IE8及以上的版本,不再支持IE6.7: 2 使用范围:企业级别的系统开发(用户数目几十到几千人也行),统一安装IE8以上的浏览器即可: 3 如果是企业级宣传网站,则不能使用: html: <script src="js/jquery-1.11.3.js"></script> <script src="js/jquery.validate.js"></script> <!--<script sr

Django 使用 modelformset 组件批量修改表单数据

1.models.py: class StudentStudyRecord(models.Model): ''' 学生学习记录 ''' student = models.ForeignKey(verbose_name="学员", to='Student',on_delete=models.CASCADE) classstudyrecord = models.ForeignKey(verbose_name="第几天课程", to="ClassStudyRec

使用jQuery.form插件,实现完美的表单异步提交

示例下载:使用jQuery.form插件,实现完美的表单异步提交.rar 抓住6月份的尾巴,今天的主题是 今天我想介绍的是一款jQuery的插件:Jquery.form.js 官网. 通过该插件,我们可以非常简单的实现表单的异步提交,并实现文件上传.进度条显示等等. 现在我们从一个ASP.NET同步表单提交开始,然后再将其转化为异步的表单提交.我写了3种表单提交示例,并简单分析了各种方式的利弊. 当然主题还是使用jQuery表单插件轻松实现表单异步提交以及分析下该插件的源码. ASP.NET服务

jQuery form插件的使用--用 formData 参数校验表单,验证后提交(简单验证).

Form Plugin API 里提供了很多有用的方法可以让你轻松的处理表单里的数据和表单的提交过程. 测试环境:部署到Tomcat中的web项目. 一.引入依赖js <script src="jquery-1.3.1.js" type="text/javascript"></script> <script src="jquery.form.js" type="text/javascript"&g

使用jquery form插件进行异步带文件的表单提交

引入form插件与jquery 的js文件后 获取表单的jq对象 然后.ajaxSubmit提交表单即可 实现添加品牌的异步表单提交 function addBarandImg(formId) { $('#'+formId).ajaxSubmit({ url: '/ProductManage/AddBrand', //data: $("#" + formId).serialize(), type: 'post', dataType: "json", success:

jQuery form插件的使用--使用 fieldValue 方法校验表单

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>jQuery form插件的使用--使用 fieldValue 方法校验表单.</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-

使用jquery修改表单的提交地址

基本思路: 通过使用jquery选择器得到对应表单的jquery对象,然后使用attr方法修改对应的action 示例程序一: 默认情况下,该表单会提交到page_one.html 点击button之后,表单的提交地址就会修改为page_two.html <!doctype html> <html> <head> <meta charset="utf-8"> <title>jquery test</title> &