Jquery将文本框还原为原始值

Jquery revert textboxes back to their original values

本文关键字:原始 还原 文本 Jquery      更新时间:2023-09-26

我有一个带有4个文本框的弹出式表单,所有这些文本框在页面加载时都具有默认值。

场景是这样的…用户已经用他们的详细信息填写了表单,但决定不提交表单并关闭弹出窗口。我希望文本框的值在用户关闭弹出窗口时恢复为默认值。

这是我到目前为止的代码。

$(".close").click( function() {
    $(".popup").find("input").val("Default value of textbox");
});

与其插入"Default value of textbox"作为值,我希望它是实际的默认值

你可以在元素本身的'data属性'中设置默认值…我将创建一个小提琴来展示这个…如下所示jsFiddle

我还应该注意,您可以将数据属性放在来自服务器的元素上…我只是在展示如何从客户端完成所有这些…

                // First store all the default values
                var def_vals = [];
                jQuery('#popup input[type="text"]').each(
                    function () {
                        def_vals[jQuery(this).attr('name')] = jQuery(this).val();
                    }
                );
                alert(def_vals['test']);
            // Restore defaults on close

            jQuery('#popup .closeButton').click( function () {
                jQuery('#popup input[type=text]').each(
                    function() {
                        jQuery(this).val(def_vals[jQuery(this).attr('name')]);
                    }
                );
            });

通过闭包

// add to the place that opens the popup
$(".popup input").one(function(){
   var value = $(this).val();
   var that = this;
   $(".close").one(function(){
      $(that).val(value);
   });
});