Caspio How To: Add Reset Button in Forms - working in Report but oddly - adds 2 reset buttons

[roattw]

Greetings

Used the How To Add Reset Button To Forms

I realize its for FORMS, not Reports, thus the odd behavior.  But it comes so close to working.  Adds a reset button to Search (A below).  However, it add a second RESET button after you hit search (B below).  The original RESET button (C) does nothing though.

Can this script be made to work with Report Search?  I like it because the reset button is adjacent to search button, and dispalys the same CSS design.

 

<script> 

if(document.mainDataPageReadyHandler == undefined) { 

/*resetInputs function reset all but radio button type of input*/ 

const resetInputs = () => { 
document.querySelectorAll('[action*="[@cbAppKey]"] input[type="text"], [action*="[@cbAppKey]"] textarea').forEach(input => { 
input.value = '' 
}) 
document.querySelectorAll('[action*="[@cbAppKey]"] select').forEach(select=>{ 
select.value='' 
}) 

document.querySelectorAll('[action*="[@cbAppKey]"] input[type="checkbox"]:checked').forEach(input=>{ 
input.click() 
}) 

document.querySelectorAll('[action*="[@cbAppKey]"] .cbComboBoxContainer').forEach(comboBox=>{ 
if (comboBox.querySelector('[type="hidden"]')!=null) { 
  comboBox.querySelector('[type="hidden"]').value = ''} 
else if (comboBox.nextElementSibling !=null) { 
  comboBox.nextElementSibling.value = ''} 
}) 
} 

/*function takes either submit or search button and adds reset button before it*/ 
const addBtn = (HTMLBtn) => { 
HTMLBtn.insertAdjacentHTML('beforebegin', `<input type="reset" id="resetAllBtn" value="Reset" class="cbSearchButton" style="margin-top: 5px;">`) 
} 

/*function that checks whether reset button should be added and if so, it adds it and assignes respective event listener */ 
const addResetAllBtn = () => { 
let resetAllBtn = document.querySelector('#ResetAllBtn') 
let searchBtn = document.querySelector('[action*="[@cbAppKey]"] [id^="searchID"]') 
let submitBtn = document.querySelector('[action*="[@cbAppKey]"] [id^="Submit"]') 
if (resetAllBtn!=null || (searchBtn == null && submitBtn == null)) {return} 
if (searchBtn!=null) { 
addBtn(searchBtn) 
}  
else if (submitBtn!=null) { 
addBtn(submitBtn) 

}  
document.querySelector('#resetAllBtn').addEventListener('click', (e)=>{ 
e.preventDefault() 
resetInputs() 
}) 
} 

const mainDataPageReadyHandler = ()=> { 
addResetAllBtn() 
}  

/*mutation observer is needed specifically for list string/number/date multiselect drop down to reset selected options */ 

const addObserver = () => { 

new MutationObserver((mutations)=>{ 

if(mutations[0].addedNodes.length>0) { 

  if (mutations[0].addedNodes[0].classList.contains('cbFormMultiSelectText')) { 

    let inputIDRaw = mutations[0].addedNodes[0].querySelector('input').getAttribute('id') 

    let inputID =  inputIDRaw.split('_')[0]+'_'+ inputIDRaw.split('_')[1] 

    if (document.querySelector(`.cbComboBoxContainer input[id^=${inputID}]`).value == '') { 

    mutations[0].addedNodes[0].parentElement.querySelectorAll('input:checked').forEach(chbx=>{chbx.click()}) 
  } 
} 
}}).observe(document.querySelector('body'), {childList: true, subtree: true}) 
} 

document.addEventListener('DataPageReady', mainDataPageReadyHandler) 
addObserver() 

/* Adding custom property to document object that communicates that DataPageReady event listener is added. 
   this flag is used in the beginning of the script to avoid adding the same mainDataPageReadyHandler event handler multiple times.  
 */ 

document.mainDataPageReadyHandler = 'enabled' 
} 

</script> 

[Volomeister]

Hello @roattw

There is a small typo in the code in the line
 

let resetAllBtn = document.querySelector('#ResetAllBtn') 

ResetAllBtn is supposed to start with a small letter r so it should be like this instead:
 

let resetAllBtn = document.querySelector('#resetAllBtn') 

 

[roattw]

Um, thank you!   And I have no recollection of touching anything - 

[roattw]

Interestingly, the code doesn't actually clear the cascading dropdowns.   Any idea what to add to make it affect a Cascading drop box based on the field above?

System is an AutoComplete (Contains/Begins with)

Site is cascading dropdown based on System.

After a search the Site cascading dropdown remains from the previous search.

 

[Volomeister]

Hi @roattw

You can add the following line:

input.dispatchEvent(new Event('change'))

Right after this line
 

input.value = '' 

 

[roattw]

Thank you!  Can you just export your knowledge into my head?!?!?