Pop-up notice when value is changed using drop-down menu

[DavidBRX]

Greetings all.

I'm trying to send a courtesy pop-up notice for uses who change the status of a project by way of the drop-down menu (e.g. Active | Closed | Pending), etc. This notice should pop-up before the record is saved with the new status.

I've researched online, and came up with the following (added to the footer of the details data-page), but it's sadly not working :-(

**********************************************************************************

;({var dropdown = document.getElementById("status");
dropdown.addEventListener("change", function() {
    var popupContent = "Dropdown value changed to: " + dropdown.value;
    alert(hello);
});

**********************************************************************************

Am I missing something?

Thanks in advance for your help.

David

[kpcollier]

Try something like this:

document.getElementById("status").addEventListener('change', function(){
  alert("Dropdown value changed to: " + document.getElementById("status").value);
})

One thing to note is that you'll want to double check to make sure your dropdown's ID is really 'status'. If this is a dropdown that you created using HTML, and you actually gave it an ID of status, then you should be fine. But, if this is a Caspio element, it is most likely not the correct ID.

When previewing the datapage with the dropdown, right click and select 'Inspect'. This will pull up the devtools. Then, click on the icon with an arrow pointing at a dashed box on the top left corner of devtools. This will let you select an element. Finally, click on the dropdown itself. This will pull up the dropdown element on devtools and will show you the ID you need to use. It is most likely going to be 'EditRecordstatus' or 'InsertRecordstatus', if the name of your dropdown is status.

Or, you could just try getting the ID yourself. If this is a submission form, use 'InsertRecord' + the table name of your dropdown field. If it is an Update Form or Details page, then use 'EditRecord' + the table name of your dropdown. If your dropdown is cascading, then we will need to make some changes to the script.

[CoopperBackpack]

Hello @DavidBRX,

As for me, I don`t like basic browser alerts.

You can utilize the 'sweetalert' popup boxes.

This code should work on the Submission form if you add it in the Footer:

<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
document.addEventListener('DataPageReady', notificationHandler)

function notificationHandler(){
    const statusField = document.getElementById("InsertRecordstatus");
    statusField.addEventListener("change", function(event) {
       const statusFieldValue = event.target.value;
       Swal.fire( '', `Dropdown value changed to:  ${statusFieldValue}`, 'info' );
    })

    document.removeEventListener('DataPageReady', notificationHandler)
}
</script>

 

For the Details page just change the dropdown ID:

 const statusField = document.getElementById("EditRecordstatus");

 

Please note that for the Cascading Dropdown, the ID is slightly different as mentioned in the previous post. 

[DavidBRX]

This is awesome guys!  Thank you soooooo much.  I'll try it this afternoon as I', heading out to the office. 

I'll keep you posted.

Best,
David

[DavidBRX]

Thank you both for your time and code.

Cooper, I tried yours first and it worked exactly as you show in your sample. Here's the code I entered in the footer. And so, it shows what the status was changed to, which is great. However, if there a way to also show a message with the status confirmation which reads, "Please update the last update date field, and enter a comment in the review section. Thank you."

I'm afraid to touch your code for fear of messing it up. :-(

<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
document.addEventListener('DataPageReady', notificationHandler)

function notificationHandler(){
    const statusField = document.getElementById("EditRecordstatus");
    statusField.addEventListener("change", function(event) {
       const statusFieldValue = event.target.value;
       Swal.fire( '', `Dropdown value changed to:  ${statusFieldValue}`, 'info' );
    })

    document.removeEventListener('DataPageReady', notificationHandler)
}
</script>

[DavidBRX]

Figured it out guys. Thank you much for this most valued and helpful assistance. How on earth you guys know this coding stuff is beyound me, it makes my brain melt! :-)

Thank you again, it works like a charm!! % STARS!!

Best,
David