`
小鸡啄米
  • 浏览: 38740 次
  • 性别: 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=”...

    input、button的不同type值在ajax提交表单时导致的陷阱

    "input、button的不同type值在ajax提交表单时导致的陷阱" 在前端开发中,我们经常遇到一些看似简单却隐藏着危险的陷阱,这篇文章就讲解了在AJAX提交表单时,input和button的不同type值可能导致的陷阱。 首先,让...

    learning extjs 中文版 表单提交

    EXTJS表单支持两种主要的提交方式:异步(Ajax)提交和传统(Standard)提交。异步提交是EXTJS常用的提交方式,通过Ajax发送JSON或URL编码的数据到服务器,无须页面刷新,能实现更好的用户体验。而传统提交则会创建...

    第七章 JavaScript表单编程

    - 使用`reset`按钮(type="reset")或调用`form.reset()`方法可以恢复表单到初始状态。 5. **脚本访问文本框**: - 单行文本框`&lt;input type="text"&gt;`和多行文本框`&lt;textarea&gt;`用于输入文本。 - 获取文本框的值,...

    一个完美的js表单验证案例

    8. **表单重置**:当用户修正错误并重新提交表单时,可以使用`$("#form").trigger("reset")`重置表单,清空输入框和错误提示。 9. **自定义插件**:更复杂的表单验证可能需要用到一些成熟的jQuery验证插件,如...

    简单的js快速预约表单信息提交代码

    // 提交后清空表单或显示成功提示 this.reset(); }); ``` `validateEmail`是一个简单的邮箱格式验证函数,可以使用正则表达式实现: ```javascript function validateEmail(email) { var regex = /^[^\s@]+@[^\...

    使用jQuery重置(reset)表单的方法

    此外,如果想要在某个特定事件(如按钮点击)后重置表单,可以将上述代码封装到一个函数中,然后绑定到对应的事件处理程序: ```javascript // 创建一个函数来重置表单 function resetForm() { var form = $('#...

    layui清空,重置表单数据的实例

    在网页开发中,经常需要处理用户输入的数据,例如在用户完成表单提交后清空表单,以便用户可以重新填写。layui 是一个流行的前端组件库,提供了丰富的UI元素和便捷的表单处理功能。本篇将详细介绍如何在layui中实现...

    JS动态表单

    4. **AJAX异步提交**:动态表单往往结合AJAX技术实现无刷新提交,使用`XMLHttpRequest`对象或者现代浏览器的`fetch` API,可以在后台处理数据,无需刷新整个页面。这提高了用户体验,使得表单提交更为流畅。 5. **...

    jquery动态表单

    jQuery的`$.ajax()`或`$.post()`、`$.get()`等方法使得动态表单的异步提交变得简单。这能提高用户体验,因为页面无需刷新即可完成数据的提交和处理。 6. **表单序列化**: jQuery的`serialize()`方法可以将表单的...

    js表单认证大全(js表单认证大全)

    `reset()`方法用于清空表单,`preventDefault()`用于阻止默认的表单提交行为,如跳转或提交数据。 九、表单验证库 许多库如jQuery Validation、Formik、Vuelidate等提供更强大的表单验证功能,简化开发流程。 十、...

    Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别

    - **表单重载**:提交过程中可以设置`reset`属性来决定是否在提交后清空表单。 示例代码: ```javascript Ext.getCmp('formPanelId').getForm().submit({ url: '......', params: { XX: xx }, success: ...

    动态控制js表单

    而非传统的表单提交方式,JS可以通过AJAX(Asynchronous JavaScript and XML)实现异步提交,这样不会刷新整个页面,提升用户体验。`XMLHttpRequest`对象或更现代的`fetch` API可用于发送HTTP请求,处理服务器返回...

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

    本文将深入探讨Ajax表单序列化的实现方法及其相关知识点。 首先,了解表单序列化的基本原理。当用户填写表单并点击提交按钮时,浏览器会自动将表单数据按照特定规则进行编码,并以键值对的形式发送给服务器。这些...

    表单JS例子

    6. **表单重置**:成功验证后,可以清空错误信息,或使用`form.reset()`方法重置表单状态。 7. **异步验证**:对于更复杂的验证,如检查用户名是否已存在,可以使用Ajax异步请求与服务器通信。 8. **HTML5内置验证...

    JS强大的表单+验证

    `form.reset()`方法可以清空表单所有字段,而`form.submit()`则可触发表单提交,但在此之前,我们可以添加验证逻辑以确保数据有效。 六、AJAX异步提交 为了提高用户体验,我们通常使用AJAX进行异步表单提交,避免...

    使用layui前端框架弹出form表单以及提交的示例

    在这个例子中,`lay-submit`和`lay-filter`属性用于指定表单的提交事件,当用户点击“立即提交”按钮时,layui会触发对应的Ajax请求,将表单数据发送到服务器。 总结,layui通过其强大的组件和简单易用的API,为...

Global site tag (gtag.js) - Google Analytics