reset引起的问题,字段太多jquey快速清空表单内容
分类:美高梅游戏官网网站

做了个复杂查询的页面,字段太多了,填了一次,想清空挺麻烦的

最近朋友使用了form的一个表单命名为关键词引起了无法reset和提交.原来是这个问题“调用document.forms[0].reset()报错?”,马上问他:“页面有表单吗?”,回答:“有”。“你alert一下document.forms[0]”,“弹出object”。那就怪了,form啥时候没有reset方法了?
过去看了一下,alert(document.forms[0].reset)发现弹出object这就不对对了,应该是弹出reset本地方法的。搜索一下reset发现原来的reset按钮name为reset,怪不得出错了,document.forms[0].reset指向的是那个reset按钮,而不是表单的reset接口。

在做图片编辑器的实验时,涉及到了表单重置的问题,而我使用的是jQuery实现的,HTML的代码如下:

最近朋友使用了form的一个表单命名为关键词引起了无法reset和提交.原来是这个问题“调用document.forms[0].reset()报错?”,马上问他:“页面有表单吗?”,回答:“有”。“你alert一下document.forms[0]”,“弹出object”。那就怪了,form啥时候没有reset方法了?
过去看了一下,alert(document.forms[0].reset)发现弹出object这就不对对了,应该是弹出reset本地方法的。搜索一下reset发现原来的reset按钮name为reset,怪不得出错了,document.forms[0].reset指向的是那个reset按钮,而不是表单的reset接口。

$('#myform')[0].reset();

把name="reset"去掉,一切OK!

<form id="imageEditor">
            <p>
              <label for="gs">Grayscale</label>
              <input id="gs" name="gs" type="range" min=0 max=100 value=0>
            </p>
            <p>
                <label for="blur">Blur</label>
                <input id="blur" name="blur" type="range" min=0 max=10 value=0>
            </p>
            <p>
                <label for="br">Brightness</label>
                <input id="br" name="br" type="range" min=0 max=200 value=100>
            </p>
            <p>
                <label for="ct">Contrast</label>
                <input id="ct" name="ct" type="range" min=0 max=200 value=100>
            </p>
            <p>
                <label for="huer">Hue Rotate</label>
                <input id="huer" name="huer" type="range" min=0 max=360 value=0>
            </p>
            <p>
                <label for="opacity">Opacity</label>
                <input id="opacity" name="opacity" type="range" min=0 max=100 value=100>
            </p>
            <p>
                <label for="invert">Invert</label>
                <input id="invert" name="invert" type="range" min=0 max=100 value=0>
            </p>
            <p>
                <label for="sepia">Sepia</label>
                <input id="sepia" name="sepia" type="range" min=0 max=100 value=0>
            </p>
            <p>
                <label for="saturate">Saturate</label>
                <input id="saturate" name="saturate" type="range" min=0 max=500 value=100>
            </p>
            <input type="reset" form="imageEditor" id="reset" value="Reset" />
          </form>

把name="reset"去掉,一切OK!

虽然reset方法可以做到一部分,但是如果你有个元素是这样的

其实当时还发现它的submit按钮的name是submit,估计调submit方法也会出错!
汗一下:不知道是软件生成还是他自己写上的,反正要注意千万不要用这些关键字命名了,很容易出现意外错误!

一开始我用的是以下这样的方法来重置的同时执行一个恢复函数:

其实当时还发现它的submit按钮的name是submit,估计调submit方法也会出错!
汗一下:不知道是软件生成还是他自己写上的,反正要注意千万不要用这些关键字命名了,很容易出现意外错误!

<input name="percent" value="50"/>
$("#imageEditor").on('reset',function(){
    setTimeout(function(){
       editImage();
    },0);
});

...

那么点击reset只会还原成50

运行之后发现表单上的数据重置了,但是里面的函数并没有执行。我上网查了,发现在input中设置了type为reset,就创建了一个Reset对象,只要点击一下input,就会执行重置函数reset()。
经过修改我将input里面的type改为button,然后为button绑定一个点击事件,这样就可以同时执行两个函数了,代码如下:

于是乎,有了以下方法,网上浏览过来,

$("#reset").click(function(){
    $("#imageEditor").reset();
    editImage();
});
$(':input','#myform') 
.not(':button, :submit, :reset, :hidden') 
.val('') 
.removeAttr('checked') 
.removeAttr('selected');

需要注意的是reset()方法只使用于表单对象form。
结果浏览器报出的错误是:

("#imageEditor").reset() is not a function;

我上网查了一下reset()方法的使用,发现reset()方法只有在javascript中才有效的,在jQuery里面是没有这个方法,所以我做了以下改变:

$("#reset").click(function(){
    document.getElementById("imageEditor").reset();
    editImage();
});

结果出现了这样的错误:

reset() is not a function

我再次上stackoverflow查询了同样的问题,他们的答案是:

the reason might be an element which has reset as name or id. I faced same issue.
Naming any element as reset overrides reset() function.

就是有元素的名字或者id取为了reset,经过我的修改,以下代码:

$("#reset1").click(function(){
    console.log("111");
    document.getElementById("imageEditor").reset();
    editImage();
});

这次在重置按钮的同时,就可以执行后面定义的函数了。

本文由美高梅网址发布于美高梅游戏官网网站,转载请注明出处:reset引起的问题,字段太多jquey快速清空表单内容

上一篇:没有了 下一篇:没有了
猜你喜欢
热门排行
精彩图文