没有提交表单的 CFSelect 框中的 jQuery 确认答案

【问题标题】：jQuery Confirm in CFSelect Box Without Submitting Form没有提交表单的 CFSelect 框中的 jQuery 确认
【发布时间】：2015-11-12 15:24:13
【问题描述】：

我正在尝试让表单在管理员从“您确定要处理吗？”的下拉菜单中选择“处理”时发出警报。还有一些代码可以验证是否选择了“处理”或“拒绝”。当管理员单击“拒绝”时，不应发生任何事情。这就是我目前所拥有的。

   <link href="Styles.css" rel="stylesheet" type="text/css">
   <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>

 <link rel="stylesheet" href="datatables.min.css">
 <script type="text/javascript" src="datatables.min.js"></script>
     <script>
$(document).Check(function () {

$("#ToBeProcessed").change(function () {

if ($(this).val() == "Process") {
   alert("Are you sure you want to process?");
}
elseif ($(this).val() == "") {
}
   alert("You must process or reject the changes to this invoice.");
   return false;
});
});
</script>    
</head>

<body>
<cfform name="ToBeProcessed" id="ToBeProcessed" action="ToBeProcessed.cfm?Invoice=#Invoice#" preservedata="yes" method="post">
<cfoutput>
<table>
    <tr>
        <td>
        Approved By: &nbsp;
        </td>
        <td>
        #qryGetToBeProcessed.Approved_Username#
        </td>
    </tr>
    <tr>
        <td>
        Approved Date: &nbsp;
        </td>
        <td>
        #DateFormat(qryGetToBeProcessed.Approved_Date,"MM/DD/YYYY")#
        </td>
    </tr>
    <tr>
        <td>
        To Be Processed: &nbsp;
        </td>
        <td>
        <cfselect name="ToBeProcessed" id="ToBeProcessed" style="Padding: 2px;" onchange="Check()">
            <option value="">Select</option>
            <option value="Process">Process</option>
            <option value="Rejected">Rejected</option>
        </cfselect>
    </td>
</tr>
<tr>
    <td align="right" colspan="2" style="Padding:3px;">
        <cfinput type="Submit" name="Submit" value="Save"> 
        <input type="Button" name="Back" value="Cancel" onclick="window.history.back()">
    </td>
</tr>
</table>
</cfoutput>
</cfform>

</body>

【问题讨论】：

运行上面的代码时实际发生了什么？
$(document).Check 是什么 - 这是 cfform 添加的内容吗？
与您的问题无关，但如果用户使用键盘而不是鼠标，则选择上的 onChange 事件可能无法按您预期的方式工作。

标签： jquery validation coldfusion

【解决方案1】：

你的问题在这里：

elseif ($(this).val() == "") {

Javascript 中没有elseif。您可能会遇到 JS 错误。检查您的控制台，然后将其更改为：

else if ($(this).val() == "") {

见https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else#Using_else_if

此外，您似乎在这里遇到了另一个语法错误，在 elseif 之后还有一个额外的关闭 }，这也会导致您出错：

elseif ($(this).val() == "") {
}  <--- WHAT'S THIS HERE FOR?
   alert("You must process or reject the changes to this invoice.");

这是一个应该有效的重写：

$(document).ready(function () {
    $("#ToBeProcessed").on('change', function () {
        if ($(this).val() == "Process") {
           alert("Are you sure you want to process?");
        }
        else if ($(this).val() == "") {
           alert("You must process or reject the changes to this invoice.");
        }
    });
});

...您应该能够从<cfselect> 中删除onchange="Check()"，因为jQuery .on('change') 应该涵盖了这一点。

【讨论】：

是的，我错过了最后那个括号。我一直在尝试不同的解决方案，并且必须保留它。我选择使用您的重写，并从 cfeselect 中删除了 onchange。它工作得很好。谢谢！