Question

我有以下javascript来阻止用户重新提交相同的搜索条件而不更改文本（SearchString）或组合框（SearchType）。 EnableSubmit有效但存在一个问题，即当用户添加然后删除空格时，EnableSubmit会崩溃。

我尝试在LastChange变量中保留最后一个条件的值。然后，当他们再次提交时，会弹出警告框。警报关闭后，代码看起来就像是在提交，然后他们可以使用相同的先前标准重新提交提交。问题是，如何在警报框关闭后保持LastChange具有相同的值。

<script type="text/javascript">

    var LastChange;

    $("#SearchString").change(function () { EnableSubmit();});
    $("#SearchString").keyup(function () { EnableSubmit(); });
    $("#SearchType").change(function () { EnableSubmit(); })

    function EnableSubmit () { $("#SubmitButton").removeAttr("disabled"); $("#SubmitButton").attr("value", "Search"); }

    $(function () {

    $("#StarForm").submit(function (e) { 

        $("#SubmitButton").attr("disabled", true);
        $("#SubmitButton").attr("value", "Submit disabled until you change search criteria.");

        if (LastChange == ($("#SearchString").val())) {
            alert('Please change the search criteria before resubmitting.');
            LastChange = ($("#SearchString").val());

        }
        else {

            LastChange = ($("#SearchString").val());



            var FormData = '{ "SearchString": "' + $('#SearchString').val() + '",' +
                '"SearchType" : "' + $('#SearchType').val() + '"' +
                '}';
            e.preventDefault();

        }

    });

});
</script>

Answer 1

当您在此处添加听众时：

$("#SearchString").keyup(function () { EnableSubmit();});

首先需要检查文本是否不同之前调用EnableSubmit（）。您当前正在做的是每按一次键就调用该函数。在EnableSubmit（）之前添加if语句应该可以解决您的问题

Answer 2

或许将启用/禁用逻辑放在您的更改处理程序中，并仅在提交处理程序中设置最后一个搜索条件。

也许是这样的？

$(function () {
    var lastSearchText;
    var lastSearchType;

    $("#SearchString").change(function () { onSearchChanged();});
    $("#SearchString").keyup(function () { onSearchChanged(); });
    $("#SearchType").change(function () { onSearchChanged(); })

    function onSearchChanged () { 

        var searchText = $("#SearchString").val().trim();
        var searchType = $('#SearchType').val();

        if (searchText !== lastSearchText || searchType !== lastSearchType) {
            $("#SubmitButton").removeAttr("disabled");
            $("#SubmitButton").attr("value", "Search"); 
        }
        else {
            $("#SubmitButton").attr("disabled", true);
            $("#SubmitButton").attr("value", "Submit disabled until you change search criteria.");
        }
    }         

    $("#StarForm").submit(function (e) { 
        lastSearchText = $("#SearchString").val().trim();
        lastSearchType = $('#SearchType').val();
        onSearchChanged();
    });
});

Answer 3

替代解决方案：

如果当前搜索值等于上次提交的搜索值，则保持按钮被禁用。我将EnableSubmit函数更改为EnableDisableSubmit并添加了变量currentValue以获取搜索输入的当前值。

以下是代码：

var LastChange;
 var currentValue;

 $("#SearchString").change(function(e) {
   EnableDisableSubmit(currentValue);
 });
 $("#SearchString").keyup(function(e) {
   currentValue = $(this).val();
   EnableDisableSubmit(currentValue);
 });
 $("#SearchType").change(function(e) {
   EnableDisableSubmit(currentValue);
 })

 function EnableDisableSubmit(txt) {
   if (txt !== LastChange) {
     $("#SubmitButton").removeAttr("disabled");
     $("#SubmitButton").attr("value", "Search");
   } else {
     $("#SubmitButton").attr("disabled", true);
     $("#SubmitButton").attr("value", "Submit disabled until you change search criteria.");
   }
 }

 $(function() {

   $("#SubmitButton").click(function(e) {

     $("#SubmitButton").attr("disabled", true);
     $("#SubmitButton").attr("value", "Submit disabled until you change search criteria.");

     LastChange = ($("#SearchString").val());

     var FormData = '{ "SearchString": "' + $('#SearchString').val() + '",' +
       '"SearchType" : "' + $('#SearchType').val() + '"' +
       '}';
     e.preventDefault();


   });

 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' id="SearchString" />
<button id="SubmitButton">Submit</button>

如何阻止用户一次又一次地重新提交相同的搜索条件

3 个答案: