`
小鸡啄米
  • 浏览: 38266 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

关于ajax提交后表单的reset

阅读更多

背景:
    产品要求提供ajax交互的体验方式,然后一张页面有那么多的表单,每个表单还有那么多的字段,而且当前页面只能显示一个form(其他form隐藏)所有的form表单的修改,添加都是在当前的页面内完成。

   一个字段一个字段去找太麻烦了,就采用了这个jquery插件jquery form plugin(http://jquery.malsup.com/form/),很好用,不用一个字段一个字段的去找了(重复劳动,一团代码什么的最讨厌了。。),然而悲剧就此发生了。。。

   因为当前页面同时只能显示一个form,但如果用户修改了,但没有提交,这时候的业务需求就是,将当前的表单reset的前一次状态,似乎没什么问题,挺简单的,把隐藏的时候将当前的form RESET到“页面渲染”的时候的状态(所有的表单都是在请求当前页面后将所有的字段赋值,没有通过js来做)。问题就出在这里,表单reset后始终记录的是请求后初始化的值。

解决方法:

     既然reset()方法记录的是页面初始化的值,将这个值修改就行了,直接修改表单的value还是不可以的,不信的可以去试试,反正我是试过了,其实原理很简单,给value赋值其实就是在表单上填值。如果这个有用,reset还有什么用呢?

    终归有方法的,公司牛人告诉我可以通过javascript setAttibute来做,果断试一下,过然可以。通用代码如下:

 

  //改变Select控件的值  
  function changeSelectValAttr(helement) {
        var j = 0, options = helement.options, t, selVal;
        selVal = helement.value;
        for ( ; j< options.length; j++) {
            if (selVal == options[j].value) {
                options[j].setAttribute("selected", "selected");
            } else {
                options[j].removeAttribute("selected");
            }
        }
    }  
 

 

 

   //改变checkbox控件的值 
   function changeCheckValAttr(helement) {
        var checks = helement.checked;
        if (checks) {
            helement.setAttribute("checked", "checked");
        }
        else {
            helement.removeAttribute("checked");
        }
    }

 

  function changeCommonTextValAttr(helement) {
        helement.setAttribute("value", helement.value);
    }

 

    function changeRadioValAttr(helement) {
        if (helement.checked) {
            helement.setAttribute("checked", "checked");
        } else {
            helement.removeAttribute("checked");
        }
    }

 

 

    function resetElementValAttr(helement) {
        var tagName = helement.tagName, tagType = helement.type;
        if (tagName.toUpperCase() == "INPUT" && tagType == "text") {
            changeCommonTextValAttr(helement);
        } 
        else if (tagName.toUpperCase() == "SELECT") {
            changeSelectValAttr(helement);
        } 
        else if (tagName.toUpperCase() == "INPUT" && tagType == "checkbox") {
            changeCheckValAttr(helement);
        } 
        else if (tagName.toUpperCase() == "INPUT" && tagType == "radio") {
            changeRadioValAttr(helement);
        }          
    }

    function resetFormAttrs(aform) {
        $.map(aform[0].elements, resetElementValAttr);
    }

 

结束...

这是一篇忽悠人的文章。。。因为在IE中是无效的。。 我也很悲剧的,换了种解决方法,稍后。。

 

 

 

0
0
分享到:
评论

相关推荐

    jQuery实现form表单reset按钮重置清空表单功能

    有时候可能需要实现这样的效果:使用ajax提交表单,成功提交表单之后清空表单,如下代码: 代码如下: &lt;form&gt; &lt;input name=”name1″ /&gt; &lt;input name=”name1″ /&gt; &lt;textarea name=”...

    简单了解Ajax表单序列化的实现方法

    随着Ajax的出现,表单序列化已经成为一种需求,在学习原生Ajax时,若用POST方法向后台提交数据时,就需要将表单序列化 在JavaScript中可以利用表单字段的type属性,连同name和value属性,一起实现表单的序列化。 在进行...

    Javascript表单序列化原理及实现代码详解

    随着 Ajax 的出现,表单序列化已经成为一种常见需求。在 JavaScript 中,可 以利用表单字段的 type 属性,连同 name 和 value 属性一起实现对表单的序列化。在编写代码之前, 有必须先搞清楚在表单提交期间,浏览器...

    Validform表单验证总结篇

    近期项目里用到了表单的验证,选择了Validform_v5.3.2。 先来了解一下一些基本的参数: 通用表单验证方法: Demo: $(".demoform").Validform({//$(".demoform")指明是哪一表单需要验证,名称需加在form表单上; ...

    RegistrationForm:用户注册和授权表格,MySQL,JS,PHP,AJAX

    文件结构: CSS / -样式文件reset.css-重置所有标准元素样式style.css-用户表单和页面的主要样式文件img / ico-使用过的图标js / -Java脚本文件main.js-包含用于控制注册表单JavaScript php /语言/ -包含语言配置的...

    下拉框的表单美化插件,mSelect.js源代码.rar

    下拉框的表单美化插件,mSelect.js源代码,mSelect 是一个含有漂亮下拉框、漂亮按钮的表单美化插件,支持下拉框的滑动展开、折叠,原下拉的onchange事件,selected/disabled属性,支持上下键选择,支持表单的reset,...

    jQuery Form 表单提交插件之formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的应用

    将表单序列化成查询串。这个方法将返回一个形如: name1=value1&name2=value2的字符串。 是否可以连环调用: 否, 这个方法返回的是一个字符串。 例子: var queryString = $('#myFormId').formSerialize(); // the ...

    JavaScript详解(第2版)

     11.4.4 提交填写完成的表单   11.4.5 this关键字   11.4.6 submit()及reset()方法   11.5 输入设备(控件)编程   11.6 应知应会   练习   第12章 图片与链接   12.1 图片简介   12.1.1 ...

    ExtAspNet_v2.3.2_dll

    -在AJAX回发后确保Asp.net的按钮控件仍然具有AJAX的特性。 -更新/basic/login.aspx示例,使用验证图片(feedback:kedee)。 -为Grid增加AutoPostBack属性和RowClick事件,示例在/data/grid_autopostback.aspx...

    my-home-work

    我的作业 切尔瓦·阿列克谢·尼古拉耶维奇 域名: : 来源 - 基本难度(+ IE8 和更高级别的几个...联系表单上的按钮应该重置表单而不是重新加载页面(使用 type = "" reset "") 没有用于添加项目的表单的弹出窗口

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -在AJAX回发后确保Asp.net的按钮控件仍然具有AJAX的特性。 -更新/basic/login.aspx示例,使用验证图片(feedback:kedee)。 -为Grid增加AutoPostBack属性和RowClick事件,示例在/data/grid_autopostback.aspx...

    struts2 标签库 帮助文档

    token标签:防用户多次提交表单。 textarea标签:文本域。 updownselct标签:支持选项内容的上下移动。 password表单:密码表单域。 textfield标签:单行文本输入框。 非表单标签: actionerror标签:输出...

    Jquery 1.3 简体中文手册

    核心 jQuery 核心函数 jQuery(expr, [context]) ...jQuery(elements) jQuery(callback) jQuery 对象访问 each(callback) size() length selector ...表单 ...:reset ...表单对象属性 ...提交bug及获取更新

    JQuery 1.3 中文参考手册

    核心 jQuery 核心函数 jQuery(expr, [context]) ...jQuery(elements) jQuery(callback) jQuery 对象访问 each(callback) size() length selector ...表单 ...:reset ...表单对象属性 ...提交bug及获取更新

    html入门到放弃笔记

    1、提交用户请求 (UA : User Agent) 2、作为HTML 以及 脚本执行的 解释器 3、以图形化的方式显示web页面 2、主要浏览器产品 1、Microsoft Internet Explorer (IE) 2、Mozilla Firefox 3、Google Chrome 4、...

Global site tag (gtag.js) - Google Analytics