按下按钮时出现警报框并且有未保存的用户输入[重复]

Question

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

但是，当我按下一个或上一个时，我会收到一条警报：'用户输入尚未保存，直到您单击保存按钮。'按确定将转到下一个page 和 cancel 将使其停留在此页面上。这就是我想要的，但是当我按下下一个或上一个时，即使没有用户输入或在编辑用户输入没有改变的情况下，总是会弹出警报。因此，我不希望在没有任何更改或未填写任何内容时弹出警报。

这是我的 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 上。

我不知道如何做到这一点。

在我的情况下，如何检查用户输入（文本区域、文本字段）是否已更改或不为空？

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 "";
}