CODEWITHSUNDEEP
jqueryvalidationcoldfusion
FSUKXAZ
FSUKXAZ

Reputation: 93

jQuery Confirm in CFSelect Box Without Submitting Form

I'm trying to get the form to throw an alert when the admin selects 'Process' from the drop down that reads "Are you sure you want to process?". There is also code to verify that either 'Process' or 'Reject' has been selected. Nothing is supposed to happen when the admin clicks 'Reject'. This is what I have thus far.

   <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>

Upvotes: 0

Views: 63

Answers (1)

duncan
duncan

Reputation: 31912

Your problem is here:

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

There is no elseif in Javascript. You're probably getting a JS error. Check your console, and then change it to:

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

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

Also it looks like you've got another syntax error here with an additional closing } after that elseif which will also cause you an error:

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

Here's a rewrite that should work:

$(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.");
        }
    });
});

... and you should be able to remove the onchange="Check()" from the <cfselect> as the jQuery .on('change') should cover that.

Upvotes: 1

Related Questions