Question

我有多个输入字段的页面。在这个页面上，我有一个上一个和下一个按钮以及一个保存（提交）按钮。当我按下保存按钮时，它会将用户输入保存在数据库中。

但是，当我按下一个或上一个时，我会收到一条警告：'用户输入尚未保存，直到您点击保存按钮。'按OK即可转到下一个页面和取消将使其保持在此页面上。这就是我想要的，但是即使没有用户输入或编辑用户输入的情况没有改变，每当我按下一个或上一个按钮时，警报总会弹出。因此，我不希望在没有任何改变或没有任何内容填充时弹出警报。

这是我的javascript函数：

function something(evt) {
        if ( ! confirm("The user input is not saved yet, untill you click the save button.") ) evt.preventDefault();
}

按钮：

<a onclick="something(event)" href=""> </a>

同样在某些页面上，也有选择框。这些具有标准值，选择框不能为空，因此我无法检查选择框。检查应仅在textareas和textfield上。

我无法弄清楚如何做到这一点。

在我的情况下，我如何检查用户输入（textarea，textfield）是否已更改或不为空？

Answer 1

在something()函数中，首先检查输入字段是否为空：

function something(evt) {
  var input= document.getElementsByTagName('input')[0];
  if(input && input.value !=""){
    if ( ! confirm("The user input is not saved yet, untill you click the save button.") ) evt.preventDefault();
  }
}

Answer 2

您可以将输入更改保存在Cookie中，并在点击链接时检查它们是否已编辑。注意 - 包括jquery库

$('input').change(function(){
 document.cookie="input="+$(this).val();

});
$("a").click(function(e){
    var inputChange= getCookie('input');

    if(inputChange!=$('input').val()){
         var ask = confirm('The user input is not saved yet, untill you click the save button.');
         if(!ask){
             e.preventDefault();
         }
    }

});
function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1);
        if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
    }
    return "";
}

按下按钮时出现警告框，并且用户输入未保存

2 个答案: