JS to change style/value of Update Button on click - multiple on webpage

[kpcollier]

I have a couple of SRU forms embedded on my web page. These forms have 'Same Form' selected for Destination After Submit, so when the user clicks the Update button, it just refreshes the form with the updated information. The problem is, it is difficult to understand if the form was actually updated or not. There is a just a quick flash for the refresh and that is it. I am trying to add some styling to the button to help the user understand the change was recorded.

I was able to get this to work for one of the Update buttons, but I can't get it to work for the other. The unique suffix at the end of the button's ID is making it difficult to select the correct button out of the 2 forms. Sometimes, when click update on form A, the script runs for Form B. 

document.addEventListener('BeforeFormSubmit', function(event) {
  if (event.detail.appKey == 'my app key') {
    document.querySelector("input[id*='Mod0EditRecord']").style.backgroundColor = 'green';
    document.querySelector("input[id*='Mod0EditRecord']").style.color = 'white';
    document.querySelector("input[id*='Mod0EditRecord']").value = '✔';
  }
});

 

So, I tried using the uniqesuffix function that Caspio provides, and this is saying it can't find the object variable:

document.addEventListener('BeforeFormSubmit', function(event) {
 if (event.detail.appKey == 'my app key') {
 //get the unique id for DOM element
 var elementID = event.detail.uniqueSuffix; 
 var object = document.getElementById('Mod0EditRecord' + elementID);
    
  object.style.backgroundColor = 'green';
  object.style.color = 'white';
  object.value = '✔';
  }
});

 

Any idea?

[futurist]

Hi @kpcollier,

Can you try using this when referring to the Update button:
document.querySelector("form[action*='your app key here'] input[id*='Mod0EditRecord']")

 

What that pertains to is the Update button (input[id*='Mod0EditRecord']) that is within a form whose action is equal to the AppKey of the DataPage. That way, the script would know which DataPage to apply the script to, because as you mentioned, your current code doesn't really know which Update button to apply the script to, since both Update buttons have an ID that starts with Mod0EditRecord. Using the code I provided, you'll be able to separate those two together based on which DataPage they belong to (through the AppKey)

 

Hope that works for you!

 

 

[DesiLogi]

This might help--it's a solution that will, when the Bulk Edit Update button is clicked, disable it and then change the label to 'Please wait...' so the user knows what's going on (you can change the label to anything, of course). 

This code goes in the footer of the Results page and NOT the Bulk Edit form. 

<script>
document.addEventListener('DataPageReady', function (event) {
const target = document.querySelector('body');
const observer = new MutationObserver(mutations => {
const updateBtn = document.querySelector('input[value="Update"]');
if(updateBtn){
updateBtn.addEventListener('click',function(){
disable(this);
redirectToDP(this);
});
}
});
const config = {subtree:true, childList:true};
observer.observe(target, config);

function disable(btn){
btn.disabled = true;
btn.style.background="grey";
btn.value = 'Please Wait';
btn.removeEventListener('click',disable);
}
});
</script>