I am working on Create Your matrix | uw digitale sales- en marketingexpert website. On this page, in the Cases section, when the user clicks on View case, they get a modal popup. Now, when the user fills the form, I want to know which case they clicked on and filled the form. This is not in CMS and hence I cannot pull the data by adding a hidden field in the form. Can you please suggest solution here please?
Just an update to the above issue. I have now added the custom attribute to the button “data-case-id”. And in the form, I have added a hidden field “<input type="hidden" id="data-case-id" name="data-case-id" value="">”. In the body tag of this page, I have added the below js code.
<script>
// Function to open the modal and populate the hidden field
function openModal(caseId) {
const modal = document.getElementById('myModal'); // Change 'myModal' to match the actual ID of your modal
const caseStudyInput = modal.querySelector('#data-case-id'); // Change to match the input field ID
// Set the value of the hidden input field with the case ID
caseStudyInput.value = caseId;
// Open the modal
modal.style.display = 'flex'; // Change 'display' property if needed
}
// Attach click event listener to the "Bekijk de case" button
const viewCaseButton = document.querySelector('.view-case-button-nl');
viewCaseButton.addEventListener('click', (event) => {
event.preventDefault(); // Prevent the default behavior of the anchor tag
const caseId = viewCaseButton.getAttribute('data-case-id');
openModal(caseId);
});
// Close the modal when the user clicks the close button or outside the modal
const closeButton = document.querySelector('.close-button-wrapper');
closeButton.addEventListener('click', () => {
const modal = document.getElementById('myModal'); // Change 'myModal' to match the actual ID of your modal
modal.style.display = 'none'; // Change 'display' property if needed
});
</script>
However, this is not fetching the data-case-id once the form is filled. Can you please let me know where I am going wrong?
