取消时隐藏输入元素

hiding an input element on cancel

本文关键字：元素 输入 隐藏 取消      更新时间：2023-09-26

Ι 有一个表单，其中有一个输入元素，用户可以在其中输入 url - 当他单击编辑按钮时，就会发生这种情况，此时输入字段出现。

如果用户开始键入 url 并单击取消按钮，则他键入的内容将变为 null，并且输入字段将再次从视图中隐藏（使用 display：none 将类添加到元素中）。

这就是问题出现的地方：如果用户键入内容并单击保存按钮，则数据（url）将随ajax请求一起发送到服务器。这意味着下次加载表单时，用户将看到提交的 URL。如果此时选择编辑表单，然后按取消按钮，则提交的网址将从视图中隐藏...当然，这是不可取的，因为我们在这里谈论的是提交的数据。

我如何区分一个与另一个，提交的数据和未提交的数据取消。

下面是一些代码，首先与单击取消按钮有关，其次与将类添加到输入元素的函数有关：

$('#canceladrs').click(function() {  
var urlcancel=$.trim($('input#wwwaddress').val());
save=2;
close_url(save,urlcancel);       
closeaddress(); 
});
here is the close_url() function
function close_url(savearg,urlarg,cancelarg)
{
console.log(urlarg);
if(savearg===1)// save button clicking here
    { if(urlarg==='')
            {
              $('input#wwwaddress').addClass('hideurl');
              $('label[for=url]').addClass('hideurl');
              $('input#wwwaddress').val(null);
            } 
       else if(urlarg!=='')
           {
              $('input#wwwaddress').removeClass('hideurl');
              $('label[for=url]').removeClass('hideurl');
              $('input#wwwaddress').val(urlarg);
           }
    }
else if(savearg===2)//cancel button clicking here
{if((urlarg!=='')||(urlarg===''))
        {
            $('input#wwwaddress').addClass('hideurl');
              $('label[for=url]').addClass('hideurl');
        }
}

}
}

正如您在上面看到的，我正在尝试标记取消按钮设置的单击保存= 2。

好的，根据您的评论，如果输入中包含文本，您不想隐藏输入。在这种情况下，请允许我参考您提供的代码片段：

if((urlarg!=='')||(urlarg==='')){
            $('input#wwwaddress').addClass('hideurl');
            $('label[for=url]').addClass('hideurl');
}

这里的逻辑是urlarg没有值，或者如果urlarg有值，则添加一个隐藏输入和标签的类。

因此，您在所有情况下都隐藏了输入和标签。

如果不想在输入元素包含内容时隐藏它们，请不要添加urlarg !== ''条件。

我还建议为取消和保存事件添加一个单独的事件处理程序，这样您就不必向函数发送特殊信号，例如save。

另外，正如我所提到的，jquery已经有一个hide，没有必要自己做。

最后，您可能希望修剪 urlarg 字符串，因为如果用户只输入一个空格，则基本没有值，但您的脚本会将其视为具有值。

相关文章：