按钮点击必须在javascript中按顺序答案

【问题标题】：Button click has to be in order in javascript按钮点击必须在javascript中按顺序
【发布时间】：2017-08-18 03:50:15
【问题描述】：

我在同一个表单中有 2 个按钮，一个是提交，另一个是保存到 CM，如果用户只是单击保存到 CM 按钮而没有先单击搜索按钮，我想发出警报。我只是通过传递一个变量来为这两个 onclick 事件调用相同的 js 函数，该变量表示点击了什么

function setAction(var)
if (var == action)
{
}
else // save to cm 
{
}

我尝试了很多方法，但没有任何效果 1. 我尝试在表单中包含一个隐藏变量并更改了 if(var ==search) 中的隐藏变量值，但是当我再次单击保存到 cm 时，它会再次像新调用一样进入该函数并且将无法获取之前的函数调用值

  if (action == 'save to cm')
    {
        if(document.getElementById('searchButtonClicked').value==='notclicked')
            {
            alert(document.getElementById('searchButtonClicked').value);
            alert('Please search for the physician before saving to Content 
            Manager');
            return false;
            }
      }

上述条件始终为真

我最初尝试在页面加载时禁用该按钮

在搜索操作功能中，我尝试启用如下按钮 document.getElementById('saveToCm').removeAttribute("disabled");

但是这个按钮根本没有启用。任何帮助表示赞赏

以下是jsp，因为太大，我尝试删除一些代码

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE" />
<META HTTP-EQUIV="EXPIRES" CONTENT="-1" />
<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE" />

<title></title>

<link rel="stylesheet" href="<c:url value="/css/styles.css"/>" type="text/css"/>

<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
jQuery(document).ready(function() {
  var specialDates = {};
  var now = new Date();
  specialDates['10' + now.getMonth() + '' + now.getFullYear()] = [true, 'mg-special', 'By Manager'];
  specialDates['25' + now.getMonth() + '' + now.getFullYear()] = [true, 'as-special', 'By Associate'];
  var others = [true, '', ''];
  $("#dateOfSleepStudy").datepicker({

    'beforeShowDay': function(date) {
      var target = date.getDate() + '' + date.getMonth() + '' + date.getFullYear();
      return specialDates[target] || others;
    },
    'inline': true
  });
});
</script>


<script>



    if(typeof String.prototype.trim !== 'function') {
  String.prototype.trim = function() {
    return this.replace(/^\s+|\s+$/g, ''); 
  }
}





    function setAction(action) {

        var numbers = /^[0-9]+$/;  
         var letters = /[A-Za-z]+$/;  
          var datevalFormat =/^(0[1-9]|1[0-2])\/(0[1-9]|1\d|2\d|3[01])\/(19|20)\d{2}$/ ;

        if (action == 'SEARCH') {           
            document.getElementById('action').value = action;
            alert(  document.getElementById('saveToCm').disabled);


    //$("#saveToCm").prop("disabled",false);
      // document.getElementById('saveToCm').removeAttribute("disabled");

            //document.getElementById('saveToCm').disabled = false;
alert(document.getElementById('saveToCm').disabled);
            document.getElementById('searchButtonClicked').value = 'clicked';
             return checkMandatoryAttribute();      
    } else {
            alert(document.getElementById('saveToCm').disabled);alert('save to cm');

        }
        document.getElementById('action').value = action;
        return true;
    }




    function checkMandatoryAttribute()
    {
    var numbers = /^[0-9]+$/;  
         var letters = /[A-Za-z]+$/;  
          var datevalFormat =/^(0[1-9]|1[0-2])\/(0[1-9]|1\d|2\d|3[01])\/(19|20)\d{2}$/ ;

    if (document.getElementById('lastName').value.trim() == '') {
                alert('Last Name is required.');
                return false;
            } 
    return true;
    }
</script>

</head>
<body>
<DIV class=headerImg align=left></DIV>
<br/>
<table style="width:1200px" class="form">

    <tr>
        <td align="center" valign="top">
            <form:form name="SearchForm" commandName="searchForm" action="Search.do" method="post">
                <table style="width:100%;BORDER-BOTTOM: #6699cc 1px dotted">
                    <tr>
                        <td class="label" align="left"> Last Name</td>
                        <td><form:input  path="lastName" maxlength="50" cssClass="textBox"/></td>
                        <td class="label" align="left">First Name</td>
                        <td><form:input  path="firstName" maxlength="50"  cssClass="textBox"/></td>
                        <td class="label" align="left">State</td>
                        <td><form:input  path="state" maxlength="50" cssClass="textBox"/></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td class="label" align="left">NPI</td>
                        <td><form:input path="npi" maxlength="50" cssClass="textBox"/></td>
                        <td class="label" align="left">City</td>
                        <td><form:input path="city" maxlength="50" cssClass="textBox"/></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td class="label" align="left">Date </td>
                        <td><form:input  id ="dateOfSleepStudy" path="dateOfSleepStudy" cssClass="textBox" required pattern="\d{2}\/\d{2}\/\d{4}"/></td>                        
                    </tr>

                    <tr>
                        <td align="right">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;</td>
                    </tr>
                    <tr>
                        <td/>
                        <td/>
                        <td/>
                        <td><form:hidden path="action"/></td>
                        <td align="left"><input type="submit" value="search" id="physsearchBtn" name="physsearchBtn" class="buttonDis" onclick="return setAction('SEARCH')"></td>
                        <td><input type="button" value="Reset" class="buttonDis" onClick="doReset()"></td>

                    </tr>
                    <tr>
                        <td>&nbsp;</td>
                    </tr>
                </table>
                <br/>




                <table style="width:450px;">

                    <tr>
                        <td colspan="50" align="right">
                            <input type="button" name="saveToCm" id="saveToCm" value="Save To CM" class="buttonDis" disabled=true  onclick="return setAction('SAVETOCM')"/>
                        </td>
                    </tr>
                </table>
            </form:form>
        </td>
    </tr>
</table>

</body>
</html>

【问题讨论】：

“如果用户只是单击保存到 CM 按钮而没有先单击搜索按钮，我想发出警报”为什么你会允许用户首先犯这个错误？
你可以考虑发布html吗？？
在同一页面中显示按钮是业务需求，所以除了进行此验证外，我别无选择

标签： javascript jquery html

【解决方案1】：

您要做的是在您的函数之外定义一个设置为false 的变量。在单击搜索按钮的条件逻辑中，将此变量设置为true。然后简单地运行检查这个值是true 在你的save 按钮被点击的条件内。

这样，search 必须在save之前点击以触发save逻辑，如下例所示：

var search_clicked = false;

function setAction(action) {
  if (action == 'search') {
    search_clicked = true;
    console.log("Search was clicked");
  }
  if (action == 'save') {
    if (search_clicked == true) {
      // This will only trigger when search has already been clicked
      console.log("Both buttons were clicked");
    }
    else {
      console.log("You need to click search first");
    }
  }
}

<button onclick="setAction('search')">Search</button>
<button onclick="setAction('save')">Save</button>

希望这会有所帮助！ :)

【讨论】：

谢谢，但这在我的情况下不起作用，全局变量没有分配给 true 。我认为是因为函数像全新的一样被再次调用，并且它采用全局变量默认值。
您的按钮是动态生成的（在页面加载后创建）吗？您是否在函数中包含return？您可以编辑您的问题以包含您的 HTML 吗？该函数可能被错误地引用。只要变量在函数的外部，上面的代码就可以工作。我的示例代码正在运行，所以我建议从它开始，然后慢慢添加您的代码，直到它中断。然后你就会知道为什么它不适合你=]
是的，我的函数返回真或假，我试过这样。在分配之前和之后在搜索中给出警报，然后在 saveto cm 中给出警报值，它始终是我们在全局变量中设置的值
看看你添加的HTML代码，我想我已经破解了。您正在调用您的搜索功能setAction('SEARCH')。这不会触发if (action == 'search')，因为它区分大小写。尝试setAction('search')，确保参数与条件匹配完全。如果if (action == 'search') 内部的console.log() 没有触发，则表示条件不满足，因此该功能将不起作用。将SEARCH 设为小写应该可以解决此问题 =]
谢谢，但这不是问题，因为我到处都使用相同的案例，我从 Spring mvc 那里得到帮助，只是引入了一个新的模型属性，并在 java 脚本函数中将属性值保存为 true，最终它保留了该值，但是我仍然没有实现此目的的唯一 javascript 方法。

【解决方案2】：

我认为这三个措施都有效，但你的工具可能在细节上有一些错误。

例如，在您的第一个想法中，您是否使用全局变量记录了您的按钮状态？正确的处理程序是：单击第一个按钮 --> 使用全局变量签名 --> 单击第二个按钮 --> 检查全局变量 --> 如果全局变量已签名，则执行其功能

在您的第二个想法中，您是否将“输入”属性设置为 [type="submit"]？如果它的类型是提交，它会提交你的表单，所以你不能得到你的调用值。正确的类型是“按钮”。

您的描述不够准确。如果可能，请粘贴您的整个代码。

【讨论】：

谢谢，我要试试第二个，因为我指定为提交而不是按钮，让我试试。但是对于第一种情况，您所说的具有全局变化的符号是什么意思？您的意思是将变量分配给其他值，然后在保存到 cm 按钮中检查该值？
我认为@Obsidian Age 已经给出了正确答案。

【解决方案3】：

如果您使用 jQuery，这很容易。使用.data()

$(function() {
  $('#search').on('click', function() {
    console.log('Search button clicked');
    $('#search').data('clicked', true);
  });
  $('#save').on('click', function() {
    console.log('Save button clicked');
    if ($('#search').data('clicked')) {
      //  do something
      console.log('Success..!!!');
    } else {
      // do something
      console.log('Click on Search button to continue');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='search'>Search</button>
<button id='save'>Save</button>

【讨论】：