{"id":17548,"date":"2024-07-22T12:36:22","date_gmt":"2024-07-22T16:36:22","guid":{"rendered":"https:\/\/www.monitrol.ca\/soumissions\/"},"modified":"2025-10-29T15:42:35","modified_gmt":"2025-10-29T19:42:35","slug":"soumissions","status":"publish","type":"page","link":"https:\/\/www.monitrol.com\/en\/soumissions\/","title":{"rendered":"Quotes"},"content":{"rendered":"\n<style>\n\n.variation {\n    display: flex;\n    justify-content: center;\n    align-items: center; \n}\n.variation-Format {\n    padding-left: 0 !important;\n}\n\n.variation-Format p {\n    margin-left: 0 !important;\n\n}\n<\/style>\n   \n\t<div class=\"woocommerce\">\n\t\t<div class=\"woocommerce-notices-wrapper\">\n\t\t<\/div>\n\n       \t\n\n\n\n   <div class=\"add-to-quote-btn\">\n  <button type=\"button\" class=\"button add-order-item mt-2 ml-2 mb-2\"\n        onclick=\"window.location.href='https:\/\/www.monitrol.com\/en\/products\/'\">\n    Back to products ?<\/button>\n<\/div>\n\n<form novalidate id=\"yith-ywraq-default-form\" name=\"yith-ywraq-default-form\" class=\"woocommerce-cart-form wc-quote-form wc_quote_fields pb-2\" action=\"\" method=\"post\" enctype=\"multipart\/form-data\"> \n\n\t\n   <!--  <div class=\"wcquote woocommerce\"> \n\t\n\t\t<p class=\"cart-empty woocommerce-info\">Votre liste est vide, ajoutez des produits \u00e0 la liste pour envoyer une demande.<\/p>\n\t\t <\/div> -->\n\t \n<\/form>  \n <div class=\"wcquote woocommerce\"> \n\t\n\t\t<p class=\"cart-empty woocommerce-info\">Your quote is currently empty. Please add products to the list and send your quote request.<\/p>\n\t\t  <\/div> \n\n\n<script>\n    \/\/ JavaScript to fetch and display client details\n    jQuery(document).ready(function($) {\n\t\t\n\t\tvar selectElement = document.querySelector('#client_select');\n\n        $('#client_select').change(function() {\n\t\t\t\n            var clientId = $(this).val();\n\n                \n\n\t\t\t\t\/\/ Create a spinner element\n\t\t\t\tvar spinner = document.createElement('div');\n\t\t\t\tspinner.classList.add('spinner'); \/\/ Add a CSS class to style the spinner\n\n\t\t\t\t\/\/ Optionally, you can add additional styling or attributes to the spinner element here\n\t\t\t\tspinner.style.border = '4px solid rgba(0, 0, 0, 0.1)';\n\t\t\t\tspinner.style.borderLeftColor = '#333';\n\t\t\t\tspinner.style.borderRadius = '50%';\n\t\t\t\tspinner.style.width = '50px';\n\t\t\t\tspinner.style.height = '50px';\n\t\t\t\tspinner.style.animation = 'spin 1s linear infinite';\n\t\t\t\tspinner.style.margin = '0 auto'; \/\/ Center horizontally\n\n\t\t\t\t\/\/ Append the spinner element to a parent element in your HTML document\n\t\t\t\tvar parentElement = document.getElementById('customer_details_spiner'); \/\/ Replace 'parent_element_id' with the ID of the parent element\n\t\t\t\tparentElement.appendChild(spinner);\n\n\t\t\t\t\/\/ Define the spinning animation using CSS\n\t\t\t\tvar style = document.createElement('style');\n\t\t\t\tstyle.innerHTML = `\n\t\t\t\t@keyframes spin {\n\t\t\t\t\tto {\n\t\t\t\t\t\ttransform: rotate(360deg);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\t.spinner {\n\t\t\t\t\tanimation: spin 1s linear infinite;\n\t\t\t\t}\n\t\t\t\t`;\n\t\t\t\tdocument.head.appendChild(style);\n\n\n\n\n            $.ajax({\n                url: 'https:\/\/www.monitrol.com\/wp-admin\/admin-ajax.php',\n                type: 'POST',\n                data: {\n                    action: 'get_client_details',\n                    client_id: clientId\n                },\n                success: function(clientDetails) {\n\t\t\t\t\t\n\t\t\t\t\tvar inputs = document.querySelectorAll('#customer_details input');\n\/\/ prenom_representant nom_representant Courriel1_representant Compagnie_representant Telephone_representant Ville_representant  Province_representant  Pays_representant\n\t\t\t\tif (clientDetails) {\n\t\t\t\t\t\t\/\/ Assign values to input elements if clientDetails is not null or undefined\n\t\t\t\t\t\t\n\t\t\t\t\t\tinputs[0].value = clientDetails['Prenom'] || '';\n\t\t\t\t\t\tinputs[1].value = clientDetails['Nom'] || '';\n\t\t\t\t\t\tinputs[2].value = clientDetails['Courriel'] || '';\n\t\t\t\t\t\tinputs[4].value = clientDetails['Compagnie'] || '';\n\t\t\t\t\t\tinputs[5].value = clientDetails['Telephone'] || '';\n\t\t\t\t\t\tinputs[6].value = clientDetails['Ville'] || '';\n\t\t\t\t\t\tinputs[7].value = clientDetails['Province'] || '';\n\t\t\t\t\t\tinputs[8].value = clientDetails['Pays'] || '';\n\t\t\t\t\t\t\n\t\t\t\t\t\n                       inputs[0].dispatchEvent(new Event('blur'));\n\t\t\t\t\t   inputs[0].setAttribute(\"value\", clientDetails['Prenom']);\n\t\t\t\t\t   \n\t\t\t\t\t\tinputs[1].dispatchEvent(new Event('blur'));\n\t\t\t\t\t\tinputs[1].setAttribute(\"value\", clientDetails['Nom']);\n\t\t\t\t\t\t\n\t\t\t\t\t\tinputs[2].dispatchEvent(new Event('blur'));\n\t\t\t\t\t\tinputs[2].setAttribute(\"value\", clientDetails['Courriel']);\n\t\t\t\t\t\t\n\t\t\t\t\t\tinputs[4].dispatchEvent(new Event('blur'));\n\t\t\t\t\t\tinputs[4].setAttribute(\"value\", clientDetails['Compagnie']);\n\t\t\t\t\t\t\n\t\t\t\t\t\tinputs[5].dispatchEvent(new Event('blur'));\n\t\t\t\t\t\tinputs[5].setAttribute(\"value\", clientDetails['Telephone']);\n\t\t\t\t\t\t\n\t\t\t\t\t\tinputs[6].dispatchEvent(new Event('blur'));\n\t\t\t\t\t\tinputs[6].setAttribute(\"value\", clientDetails['Ville']);\n\t\t\t\t\t\t\n\t\t\t\t\t\tinputs[7].dispatchEvent(new Event('blur'));\n\t\t\t\t\t\tinputs[7].setAttribute(\"value\", clientDetails['Province']);\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\n                       inputs[8].dispatchEvent(new Event('blur'));\n\t\t\t\t\t   inputs[8].setAttribute(\"value\", clientDetails['Pays']);\n                        \/*\n\t\t\t\t\t\t\/\/ Pr\u00e9nom\n\t\t\t\t\t\tvar prenomRepresentantElements = document.querySelectorAll('.prenom_representant');\n\t\t\t\t\t\tprenomRepresentantElements.forEach(function(element) {\n\t\t\t\t\t\t\telement.value = clientDetails['Prenom'] || '';\n\t\t\t\t\t\t});\n\t\t\t\t\t\t\n\t\t\t\t\t\tvar nomRepresentantElements = document.querySelectorAll('.nom_representant');\n\t\t\t\t\t\tnomRepresentantElements.forEach(function(element) {\n\t\t\t\t\t\t\telement.value = clientDetails['Nom'] || '';\n\t\t\t\t\t\t});\n\n\t\t\t\t\t\t\/\/ Courriel\n\t\t\t\t\t\tvar courrielRepresentantElements = document.querySelectorAll('.Courriel1_representant');\n\t\t\t\t\t\tcourrielRepresentantElements.forEach(function(element) {\n\t\t\t\t\t\t\telement.value = clientDetails['Courriel'] || '';\n\t\t\t\t\t\t});\n\n\t\t\t\t\t\t\/\/ Compagnie\n\t\t\t\t\t\tvar compagnieRepresentantElements = document.querySelectorAll('.Compagnie_representant');\n\t\t\t\t\t\tcompagnieRepresentantElements.forEach(function(element) {\n\t\t\t\t\t\t\telement.value = clientDetails['Compagnie'] || '';\n\t\t\t\t\t\t});\n\n\t\t\t\t\t\t\/\/ T\u00e9l\u00e9phone\n\t\t\t\t\t\tvar telephoneRepresentantElements = document.querySelectorAll('.Telephone_representant');\n\t\t\t\t\t\ttelephoneRepresentantElements.forEach(function(element) {\n\t\t\t\t\t\t\telement.value = clientDetails['Telephone'] || '';\n\t\t\t\t\t\t});\n\n\t\t\t\t\t\t\/\/ Ville\n\t\t\t\t\t\tvar villeRepresentantElements = document.querySelectorAll('.Ville_representant');\n\t\t\t\t\t\tvilleRepresentantElements.forEach(function(element) {\n\t\t\t\t\t\t\telement.value = clientDetails['Ville'] || '';\n\t\t\t\t\t\t});\n\n\t\t\t\t\t\t\/\/ Province\n\t\t\t\t\t\tvar provinceRepresentantElements = document.querySelectorAll('.Province_representant');\n\t\t\t\t\t\tprovinceRepresentantElements.forEach(function(element) {\n\t\t\t\t\t\t\telement.value = clientDetails['Province'] || '';\n\t\t\t\t\t\t});\n\n\t\t\t\t\t\t\/\/ Pays\n\t\t\t\t\t\tvar paysRepresentantElements = document.querySelectorAll('.Pays_representant');\n\t\t\t\t\t\tpaysRepresentantElements.forEach(function(element) {\n\t\t\t\t\t\t\telement.value = clientDetails['Pays'] || '';\n\t\t\t\t\t\t});\n\t\t\t\t\t\t\n\t\t\t\t\t\t*\/\n\n\t\t\t\t\t} \n\t\t\t\t\t\n\t\t\t\t\t    parentElement.removeChild(spinner);\n\n                }\n            });\n        });\n\t\t\n\t\t  jQuery(selectElement).select2();\n    });\n<\/script>\n\n\n\n\n<script>\n    \/*    function validateField(input, message) {\n            const errorElement = document.getElementById(`${input.id}-error`);\n            if (!input.checkValidity()) {\n                errorElement.textContent = message;\n                return false;\n            } else {\n                errorElement.textContent = '';\n                return true;\n            }\n        }\n\n        function validateForm(event) {\n            let isValid = true;\n            const fields = [\n\t\t\t\t{ id: 'exjls9c-name', message: 'Please enter your first name.' },\n                { id: 'es5vbxi-textField', message: 'Please enter your last name.' },\n                { id: 'ef67pnk-email', message: 'Please enter a valid email address.' },\n            ];\n\n            \/\/ Validate each field\n            fields.forEach(field => {\n                const input = document.getElementById(field.id);\n                if (field.id === 'ef67pnk-email') {\n                    if (input.value.trim() === '') {\n                        document.getElementById(`${input.id}-error`).textContent = 'Please enter your email address.';\n                        isValid = false;\n                    } else if (!input.checkValidity()) {\n                        document.getElementById(`${input.id}-error`).textContent = field.message;\n                        isValid = false;\n                    } else {\n                        document.getElementById(`${input.id}-error`).textContent = '';\n                    }\n                } else {\n                    if (!validateField(input, field.message)) {\n                        isValid = false;\n                    }\n                }\n            });\n\n            \/\/ Prevent form submission if validation fails\n            if (!isValid) {\n                event.preventDefault();\n            }\n        }\n\n        function setupEventListeners() {\n            const fields = ['exjls9c-name', 'es5vbxi-textField', 'ef67pnk-email'];\n            fields.forEach(fieldId => {\n                const input = document.getElementById(fieldId);\n                input.addEventListener('input', function() {\n                    const field = fields.find(f => f === fieldId);\n                    if (fieldId === 'ef67pnk-email') {\n                        if (input.value.trim() === '') {\n                            document.getElementById(`${input.id}-error`).textContent = 'Please enter your email address.';\n                        } else if (!input.checkValidity()) {\n                            document.getElementById(`${input.id}-error`).textContent = 'Please enter a valid email address.';\n                        } else {\n                            document.getElementById(`${input.id}-error`).textContent = '';\n                        }\n                    } else {\n                        validateField(input, field.message);\n                    }\n                });\n            });\n        }\n\n        document.querySelector('#yith-ywraq-default-form').addEventListener('submit', validateForm);\n\n        \/\/ Setup event listeners for real-time validation\n        setupEventListeners();\n\t\t*\/\n    <\/script>\n\n<script>\n        function validateField(input, message) {\n            const errorElement = document.getElementById(`${input.id}-error`);\n            if (!input.checkValidity()) {\n                errorElement.textContent = message;\n                return false;\n            } else {\n                errorElement.textContent = '';\n                return true;\n            }\n        }\n\n        function validateForm(event) {\n            let isValid = true;\n            const fields = [\n\t\t\t\t{ id: 'exjls9c-name', message: 'Please enter your first name.' },\n                { id: 'es5vbxi-textField', message: 'Please enter your last name.' },\n                { id: 'ef67pnk-email', message: 'Please enter a valid email address.' },\n\t\t\t\t{ id: 'epqxq5-phoneNumber', message: 'Please enter a valid phone number.' },\n            ];\n\n            fields.forEach(field => {\n                const input = document.getElementById(field.id);\n                if (field.id === 'ef67pnk-email') {\n                    if (input.value.trim() === '') {\n                        document.getElementById(`${input.id}-error`).textContent = 'Please enter your email address.';\n                        isValid = false;\n                    } else if (!input.checkValidity()) {\n                        document.getElementById(`${input.id}-error`).textContent = field.message;\n                        isValid = false;\n                    } else {\n                        document.getElementById(`${input.id}-error`).textContent = '';\n                    }\n                } else {\n                    if (!validateField(input, field.message)) {\n                        isValid = false;\n                    }\n                }\n            });\n\n            if (!isValid) {\n                event.preventDefault();\n            }\n        }\n\n        function setupEventListeners() {\n            const fields = [\n\t\t\t\t{ id: 'exjls9c-name', message: 'Please enter your first name.' },\n                { id: 'es5vbxi-textField', message: 'Please enter your last name.' },\n                { id: 'ef67pnk-email', message: 'Please enter a valid email address.' },\n\t\t\t\t{ id: 'epqxq5-phoneNumber', message: 'Please enter a valid phone number.' },\n            ];\n\n            fields.forEach(field => {\n                const input = document.getElementById(field.id);\n                input.addEventListener('input', function() {\n                    if (field.id === 'ef67pnk-email') {\n                        if (input.value.trim() === '') {\n                            document.getElementById(`${input.id}-error`).textContent = 'Please enter your email address.';\n                        } else if (!input.checkValidity()) {\n                            document.getElementById(`${input.id}-error`).textContent = 'Please enter a valid email address.';\n                        } else {\n                            document.getElementById(`${input.id}-error`).textContent = '';\n                        }\n                    } else {\n                        validateField(input, field.message);\n                    }\n                });\n            });\n        }\n\n        document.querySelector('#yith-ywraq-default-form').addEventListener('submit', validateForm);\n        setupEventListeners();\n    <\/script>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":16,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"templates\/quotes.php","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-17548","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.monitrol.com\/en\/wp-json\/wp\/v2\/pages\/17548","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.monitrol.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.monitrol.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.monitrol.com\/en\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/www.monitrol.com\/en\/wp-json\/wp\/v2\/comments?post=17548"}],"version-history":[{"count":0,"href":"https:\/\/www.monitrol.com\/en\/wp-json\/wp\/v2\/pages\/17548\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.monitrol.com\/en\/wp-json\/wp\/v2\/media?parent=17548"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}