{"id":379,"date":"2024-05-04T16:02:45","date_gmt":"2024-05-04T10:32:45","guid":{"rendered":"https:\/\/pushnifty.com\/mojoomla\/extend\/wordpress\/spicy-form\/?page_id=379"},"modified":"2024-05-04T18:39:34","modified_gmt":"2024-05-04T13:09:34","slug":"multiple-rate-review","status":"publish","type":"page","link":"https:\/\/pushnifty.com\/mojoomla\/extend\/wordpress\/spicy-form\/multiple-rate-review\/","title":{"rendered":"Multiple Rate &amp; Review"},"content":{"rendered":"\r\n\t\t\t<script src=\"https:\/\/pushnifty.com\/mojoomla\/extend\/wordpress\/spicy-form\/wp-content\/plugins\/spicy-form\/libs\/validationEngine\/js\/jquery-1.8.2.min.js\"><\/script>\r\n\t\t\t\t\r\n\t\t\t<script src=\"https:\/\/pushnifty.com\/mojoomla\/extend\/wordpress\/spicy-form\/wp-content\/plugins\/spicy-form\/libs\/validationEngine\/js\/jquery.validationEngine.min.js\"><\/script>\r\n\r\n\t\t\t\t\t\t<script src=\"https:\/\/pushnifty.com\/mojoomla\/extend\/wordpress\/spicy-form\/wp-content\/plugins\/spicy-form\/assets\/css\/accordian\/jquery-ui.min.js\"><\/script>\r\n\r\n\t\t<script type=\"text\/javascript\">\r\n\r\n\t\tjQuery(document).ready(function () {\r\n\r\n\t\t\t$('#spcf_form').validationEngine({ promptPosition: \"bottomLeft\", maxErrorsPerField: 1 });\r\n\r\n\r\n\t\t\tsetTimeout(function () {\r\n\r\n\t\t\t\t$('#successMessage').fadeOut('fast');\r\n\r\n\t\t\t}, 10000); \/\/ <-- time in milliseconds\r\n\r\n\t\t\t\/\/ datepicket script\r\n\r\n\t\t\t$('.birth_date').datepicker({\r\n\t\t\t\tchangeMonth: true,\r\n\t\t\t\tchangeYear: true,\r\n\t\t\t\t\/\/ maxDate: 0,\r\n\t\t\t\tyearRange:'-65:+25',\r\n\t\t\t\tbeforeShow: function (textbox, instance)\r\n\t\t\t\t{\r\n\t\t\t\t\tinstance.dpDiv.css({\r\n\t\t\t\t\t\tmarginTop: (-textbox.offsetHeight) + 'px'\r\n\t\t\t\t\t});\r\n\t\t\t\t}\r\n\t\t\t});\r\n\r\n\r\n\r\n\t\t});\r\n\t\tfunction spicy_fileCheck(obj)\r\n\t\t{\r\n\t\t\/\/ \"use strict\";\r\n\t\tvar fileExtension = $(obj).attr('file_type');\r\n\r\n\t\t\tvar fileExtensionArr = fileExtension.split(',');\r\n\t\t\tvar file_size = $(obj).attr('size');\r\n\r\n\t\t\tvar sizeInkb = obj.files[0].size\/1024;\r\n\r\n\t\t\tif ($.inArray($(obj).val().split('.').pop().toLowerCase(), fileExtensionArr) == -1)\r\n\t\t\t{\r\n\t\t\t\talert(\"Only \"+fileExtension+\" formats are allowed.\");\r\n\t\t\t\t$(obj).val('');\r\n\t\t\t}\r\n\t\t\telse if(sizeInkb > file_size)\r\n\t\t\t{\r\n\t\t\t\talert(\"Only \"+file_size+\" kb size is allowed.\");\r\n\t\t\t\t$(obj).val('');\r\n\t\t\t}\r\n\t\t}\r\n\t\t<\/script>\r\n\t\t<div class=\"spcf-form-content\"><div id=\"spcf-erroe-block\"><\/div>\r\n\r\n\r\n\r\n\r\n\t\t<form name='spcf-form' class='spcf_form' method='post' id='spcf_form' enctype='multipart\/form-data'>\r\n\r\n\t\t<input type=\"hidden\" name=\"form_id\" value=\"395\" id=\"form_id\"><input type=\"hidden\" name=\"MJ_spcf_form_submit\" value=\"yes\"><input type=\"hidden\" name=\"spcf_post_type\" value=\"spcf_rate_review\">\t\t<div class=\"row\">\r\n\t\t\r\n\t\t\t\t    <script src=\"https:\/\/pushnifty.com\/mojoomla\/extend\/wordpress\/spicy-form\/wp-content\/plugins\/spicy-form\/assets\/js1\/popup.js\"> <\/script>\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/>\r\n\r\n    <!-- <link rel=\"stylesheet\" href=\"https:\/\/pushnifty.com\/mojoomla\/extend\/wordpress\/spicy-form\/wp-content\/plugins\/spicy-form\/admin\/bootstrap-5.0.2\/css\/bootstrap.min.css\"> -->\r\n\r\n    <link rel=\"stylesheet\" href=\"https:\/\/pro.fontawesome.com\/releases\/v5.10.0\/css\/all.css\" integrity=\"sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p\" crossorigin=\"anonymous\"\/>\r\n\r\n\r\n    \r\n        <div class=\"col-md-12 mt-3\">\r\n            <label for=\"spcf_custom_label\" class=\"\">\r\n                How often do you use our products? <span class=\"spcf_required\">*<\/span>            <\/label><br>\r\n            <input type=\"hidden\" name=\"How_often_do_you_use_our_products?\" class=\"rating_data_0\" value=\"\">\r\n                            <!-- Append $field_id to make each element's ID unique -->\r\n                <i class=\"fas fa-star star-light submit_star_0 mr-1\" id=\"submit_star_0_1\" data-rating=\"1\" value=\"\" data-label=\"How often do you use our products? \" style=\"width:20px;\"><\/i>\r\n                                <!-- Append $field_id to make each element's ID unique -->\r\n                <i class=\"fas fa-star star-light submit_star_0 mr-1\" id=\"submit_star_0_2\" data-rating=\"2\" value=\"\" data-label=\"How often do you use our products? \" style=\"width:20px;\"><\/i>\r\n                                <!-- Append $field_id to make each element's ID unique -->\r\n                <i class=\"fas fa-star star-light submit_star_0 mr-1\" id=\"submit_star_0_3\" data-rating=\"3\" value=\"\" data-label=\"How often do you use our products? \" style=\"width:20px;\"><\/i>\r\n                                <!-- Append $field_id to make each element's ID unique -->\r\n                <i class=\"fas fa-star star-light submit_star_0 mr-1\" id=\"submit_star_0_4\" data-rating=\"4\" value=\"\" data-label=\"How often do you use our products? \" style=\"width:20px;\"><\/i>\r\n                                <!-- Append $field_id to make each element's ID unique -->\r\n                <i class=\"fas fa-star star-light submit_star_0 mr-1\" id=\"submit_star_0_5\" data-rating=\"5\" value=\"\" data-label=\"How often do you use our products? \" style=\"width:20px;\"><\/i>\r\n                            <textarea name=\"Share Your Feedback_0\" type=\"text\" placeholder=\"Share Your Feedback...\" class=\"validate[custom[address_description_validation]] mt-1\"><\/textarea>\r\n\r\n            <!-- multiple attachment -->\r\n            <div class=\"rating_image_main mt-3\">\r\n                <div id=\"imagePreview_0\" class=\"imagePreview\"><\/div>\r\n                <div class=\"rating_set\">\r\n                    <input type=\"file\" name=\"fileField_0[]\" class=\"fileField\" id=\"fileField_0\" accept=\"image\/*, .pdf, .mp4\" multiple>\r\n                    <label for=\"fileField_0\" class=\"file_img\"><\/label>\r\n                <\/div>\r\n            <\/div>\r\n\r\n        <\/div>\r\n    \r\n            <script>\r\n            document.addEventListener(\"DOMContentLoaded\", function() {\r\n                \/\/ Find the form element\r\n                var form = document.getElementById('spcf_form');\r\n\r\n                \/\/ Add event listener for form submission\r\n                form.addEventListener('submit', function(event) {\r\n                    \/\/ Prevent the default form submission\r\n                    event.preventDefault();\r\n\r\n                    \/\/ Find the hidden input element\r\n                    var hiddenInput = document.querySelector('.rating_data_0');\r\n\r\n                    \/\/ Check if the value is blank\r\n                    if (hiddenInput.value.trim() === '') {\r\n                        \/\/ If it's blank, show an alert message\r\n                        alert('Please select a rating!');\r\n                    } else {\r\n                        \/\/ If it's not blank, submit the form\r\n                        form.submit();\r\n                    }\r\n                });\r\n            });\r\n        <\/script>\r\n    \r\n    <script>\r\n\r\n        \/\/ file select message\r\n        document.getElementById('fileField_0').addEventListener('change', function(event) {\r\n            const files = event.target.files;\r\n            const allowedTypes = ['image\/jpeg', 'image\/png', 'application\/pdf', 'video\/mp4'];\r\n\r\n            for (let i = 0; i < files.length; i++) {\r\n                if (!allowedTypes.includes(files[i].type)) {\r\n                    alert('Please select only image, PDF, or MP4 files.');\r\n                    \/\/ Clear the selected files from the input field\r\n                    document.getElementById('fileField_0').value = '';\r\n                    return;\r\n                }\r\n            }\r\n        });\r\n\r\n        const imageInput_0 = document.getElementById('fileField_0');\r\n        const imagePreview_0 = document.getElementById('imagePreview_0');\r\n\r\n        \/\/ Function to handle image preview\r\n        function previewImages_0() {\r\n            const files = Array.from(imageInput_0.files);\r\n            files.forEach(file => {\r\n                const reader = new FileReader();\r\n                reader.onload = function(e) {\r\n                    const imgContainer = document.createElement('div');\r\n                    imgContainer.classList.add('img-container');\r\n\r\n                    const img = document.createElement('img');\r\n                    img.src = e.target.result;\r\n\r\n                    const deleteSpan = document.createElement('span');\r\n                    deleteSpan.textContent = 'x';\r\n                    deleteSpan.classList.add('delete-icon');\r\n                    deleteSpan.addEventListener('click', function() {\r\n                    imgContainer.remove();\r\n                    });\r\n\r\n                    imgContainer.appendChild(img);\r\n                    imgContainer.appendChild(deleteSpan);\r\n                    imagePreview_0.appendChild(imgContainer);\r\n                };\r\n                reader.readAsDataURL(file);\r\n            });\r\n        }\r\n\r\n        \/\/ Event listener for image input change\r\n        imageInput_0.addEventListener('change', previewImages_0);\r\n\r\n        const imageForm_0 = document.getElementById('imageForm_0');\r\n        imageForm_0.addEventListener('submit', function(event) {\r\n            event.preventDefault();\r\n            const formData_0 = new FormData(imageForm_0);\r\n            console.log(event.preventDefault())\r\n            \/\/ Here you can handle the form submission, for example, send the formData to the server using fetch or submit it via AJAX\r\n            console.log('Form submitted with the following data:');\r\n            for (let pair of formData_0.entries()) {\r\n                console.log(pair[0] + ': ' + pair[1]);\r\n            }\r\n        });\r\n    <\/script>\r\n\r\n    <script>\r\n        jQuery(document).ready(function($)\r\n        {\r\n            var rating_data_0 = 0;\r\n\r\n\r\n            $(document).on('mouseenter', '.submit_star_0', function() {\r\n                var rating = $(this).data('rating');\r\n\r\n                \/\/ alert(rating);\r\n\r\n                reset_background_0();\r\n\r\n                for(var count = 1; count <= rating; count++)\r\n                {\r\n                    $('#submit_star_0_'+count).addClass('text-warning');\r\n                }\r\n            });\r\n\r\n            function reset_background_0()\r\n            {\r\n                for(var count = 1; count <= 5; count++)\r\n                {\r\n                    $('#submit_star_0_'+count).addClass('star-light');\r\n                    $('#submit_star_0_'+count).removeClass('text-warning');\r\n                }\r\n            }\r\n\r\n            $(document).on('mouseleave', '.submit_star_0', function(){\r\n                reset_background_0();\r\n                for(var count = 1; count <= rating_data_0; count++)\r\n                {\r\n                    $('#submit_star_0_'+count).removeClass('star-light');\r\n                    $('#submit_star_0_'+count).addClass('text-warning');\r\n                }\r\n            });\r\n\r\n            $(document).on('click', '.submit_star_0', function(){\r\n                rating_data_0 = $(this).data('rating');\r\n                jQuery('.rating_data_0').val(rating_data_0);\r\n            });\r\n        });\r\n    <\/script>\r\n\r\n    \r\n\t\t\t\t\r\n\t\t\t\t    <script src=\"https:\/\/pushnifty.com\/mojoomla\/extend\/wordpress\/spicy-form\/wp-content\/plugins\/spicy-form\/assets\/js1\/popup.js\"> <\/script>\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/>\r\n\r\n    <!-- <link rel=\"stylesheet\" href=\"https:\/\/pushnifty.com\/mojoomla\/extend\/wordpress\/spicy-form\/wp-content\/plugins\/spicy-form\/admin\/bootstrap-5.0.2\/css\/bootstrap.min.css\"> -->\r\n\r\n    <link rel=\"stylesheet\" href=\"https:\/\/pro.fontawesome.com\/releases\/v5.10.0\/css\/all.css\" integrity=\"sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p\" crossorigin=\"anonymous\"\/>\r\n\r\n\r\n    \r\n        <div class=\"col-md-12 mt-3\">\r\n            <label for=\"spcf_custom_label\" class=\"\">\r\n                Which features are most valuable to you <span class=\"spcf_required\">*<\/span>            <\/label><br>\r\n            <input type=\"hidden\" name=\"Which_features_are_most_valuable_to_you\" class=\"rating_data_1\" value=\"\">\r\n                            <!-- Append $field_id to make each element's ID unique -->\r\n                <i class=\"fas fa-star star-light submit_star_1 mr-1\" id=\"submit_star_1_1\" data-rating=\"1\" value=\"\" data-label=\"Which features are most valuable to you \" style=\"width:20px;\"><\/i>\r\n                                <!-- Append $field_id to make each element's ID unique -->\r\n                <i class=\"fas fa-star star-light submit_star_1 mr-1\" id=\"submit_star_1_2\" data-rating=\"2\" value=\"\" data-label=\"Which features are most valuable to you \" style=\"width:20px;\"><\/i>\r\n                                <!-- Append $field_id to make each element's ID unique -->\r\n                <i class=\"fas fa-star star-light submit_star_1 mr-1\" id=\"submit_star_1_3\" data-rating=\"3\" value=\"\" data-label=\"Which features are most valuable to you \" style=\"width:20px;\"><\/i>\r\n                                <!-- Append $field_id to make each element's ID unique -->\r\n                <i class=\"fas fa-star star-light submit_star_1 mr-1\" id=\"submit_star_1_4\" data-rating=\"4\" value=\"\" data-label=\"Which features are most valuable to you \" style=\"width:20px;\"><\/i>\r\n                                <!-- Append $field_id to make each element's ID unique -->\r\n                <i class=\"fas fa-star star-light submit_star_1 mr-1\" id=\"submit_star_1_5\" data-rating=\"5\" value=\"\" data-label=\"Which features are most valuable to you \" style=\"width:20px;\"><\/i>\r\n                            <textarea name=\"Share Your Feedback_1\" type=\"text\" placeholder=\"Share Your Feedback...\" class=\"validate[custom[address_description_validation]] mt-1\"><\/textarea>\r\n\r\n            <!-- multiple attachment -->\r\n            <div class=\"rating_image_main mt-3\">\r\n                <div id=\"imagePreview_1\" class=\"imagePreview\"><\/div>\r\n                <div class=\"rating_set\">\r\n                    <input type=\"file\" name=\"fileField_1[]\" class=\"fileField\" id=\"fileField_1\" accept=\"image\/*, .pdf, .mp4\" multiple>\r\n                    <label for=\"fileField_1\" class=\"file_img\"><\/label>\r\n                <\/div>\r\n            <\/div>\r\n\r\n        <\/div>\r\n    \r\n            <script>\r\n            document.addEventListener(\"DOMContentLoaded\", function() {\r\n                \/\/ Find the form element\r\n                var form = document.getElementById('spcf_form');\r\n\r\n                \/\/ Add event listener for form submission\r\n                form.addEventListener('submit', function(event) {\r\n                    \/\/ Prevent the default form submission\r\n                    event.preventDefault();\r\n\r\n                    \/\/ Find the hidden input element\r\n                    var hiddenInput = document.querySelector('.rating_data_1');\r\n\r\n                    \/\/ Check if the value is blank\r\n                    if (hiddenInput.value.trim() === '') {\r\n                        \/\/ If it's blank, show an alert message\r\n                        alert('Please select a rating!');\r\n                    } else {\r\n                        \/\/ If it's not blank, submit the form\r\n                        form.submit();\r\n                    }\r\n                });\r\n            });\r\n        <\/script>\r\n    \r\n    <script>\r\n\r\n        \/\/ file select message\r\n        document.getElementById('fileField_1').addEventListener('change', function(event) {\r\n            const files = event.target.files;\r\n            const allowedTypes = ['image\/jpeg', 'image\/png', 'application\/pdf', 'video\/mp4'];\r\n\r\n            for (let i = 0; i < files.length; i++) {\r\n                if (!allowedTypes.includes(files[i].type)) {\r\n                    alert('Please select only image, PDF, or MP4 files.');\r\n                    \/\/ Clear the selected files from the input field\r\n                    document.getElementById('fileField_1').value = '';\r\n                    return;\r\n                }\r\n            }\r\n        });\r\n\r\n        const imageInput_1 = document.getElementById('fileField_1');\r\n        const imagePreview_1 = document.getElementById('imagePreview_1');\r\n\r\n        \/\/ Function to handle image preview\r\n        function previewImages_1() {\r\n            const files = Array.from(imageInput_1.files);\r\n            files.forEach(file => {\r\n                const reader = new FileReader();\r\n                reader.onload = function(e) {\r\n                    const imgContainer = document.createElement('div');\r\n                    imgContainer.classList.add('img-container');\r\n\r\n                    const img = document.createElement('img');\r\n                    img.src = e.target.result;\r\n\r\n                    const deleteSpan = document.createElement('span');\r\n                    deleteSpan.textContent = 'x';\r\n                    deleteSpan.classList.add('delete-icon');\r\n                    deleteSpan.addEventListener('click', function() {\r\n                    imgContainer.remove();\r\n                    });\r\n\r\n                    imgContainer.appendChild(img);\r\n                    imgContainer.appendChild(deleteSpan);\r\n                    imagePreview_1.appendChild(imgContainer);\r\n                };\r\n                reader.readAsDataURL(file);\r\n            });\r\n        }\r\n\r\n        \/\/ Event listener for image input change\r\n        imageInput_1.addEventListener('change', previewImages_1);\r\n\r\n        const imageForm_1 = document.getElementById('imageForm_1');\r\n        imageForm_1.addEventListener('submit', function(event) {\r\n            event.preventDefault();\r\n            const formData_1 = new FormData(imageForm_1);\r\n            console.log(event.preventDefault())\r\n            \/\/ Here you can handle the form submission, for example, send the formData to the server using fetch or submit it via AJAX\r\n            console.log('Form submitted with the following data:');\r\n            for (let pair of formData_1.entries()) {\r\n                console.log(pair[0] + ': ' + pair[1]);\r\n            }\r\n        });\r\n    <\/script>\r\n\r\n    <script>\r\n        jQuery(document).ready(function($)\r\n        {\r\n            var rating_data_1 = 0;\r\n\r\n\r\n            $(document).on('mouseenter', '.submit_star_1', function() {\r\n                var rating = $(this).data('rating');\r\n\r\n                \/\/ alert(rating);\r\n\r\n                reset_background_1();\r\n\r\n                for(var count = 1; count <= rating; count++)\r\n                {\r\n                    $('#submit_star_1_'+count).addClass('text-warning');\r\n                }\r\n            });\r\n\r\n            function reset_background_1()\r\n            {\r\n                for(var count = 1; count <= 5; count++)\r\n                {\r\n                    $('#submit_star_1_'+count).addClass('star-light');\r\n                    $('#submit_star_1_'+count).removeClass('text-warning');\r\n                }\r\n            }\r\n\r\n            $(document).on('mouseleave', '.submit_star_1', function(){\r\n                reset_background_1();\r\n                for(var count = 1; count <= rating_data_1; count++)\r\n                {\r\n                    $('#submit_star_1_'+count).removeClass('star-light');\r\n                    $('#submit_star_1_'+count).addClass('text-warning');\r\n                }\r\n            });\r\n\r\n            $(document).on('click', '.submit_star_1', function(){\r\n                rating_data_1 = $(this).data('rating');\r\n                jQuery('.rating_data_1').val(rating_data_1);\r\n            });\r\n        });\r\n    <\/script>\r\n\r\n    \r\n\t\t\t\t\r\n\t\t\t\t\t\t\t<script src=\"https:\/\/www.google.com\/recaptcha\/api.js\" async defer><\/script>\r\n\t\t\t\r\n\t\t\t\t\t\t<div class=\"col-md-12 mt-3\" data-callback='recaptchacallback'\r\n\t\t\t\t\t\t\tid=\"recaptcha_show\">\r\n\t\t\t\t\t\t\t<div class=\"g-recaptcha\" data-sitekey=\"6LfJjGMlAAAAAHWAAfWi1lwkKLsIaoS9fYPnfuBG\"><\/div>\r\n\t\t\t\t\t\t<\/div>\r\n\r\n\t\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t        <div class=\"col-md-12 mt-3\">\r\n            <input type=\"hidden\" name=\"contact_form\" value=\"contact_yes\" \/>\r\n            <button type=\"submit\" name=\"Submit\"\r\n                class=\"submit_button_set \"\r\n                id=\"spcf-submit\"\r\n                style=\"color: white; background: #375699;\">\r\n                Submit            <\/button>\r\n        <\/div>\r\n    \r\n\t\t\t\t\t\t<\/div>\r\n\t\t<\/form><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"template\/my-account.php","meta":{"footnotes":""},"class_list":["post-379","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/pushnifty.com\/mojoomla\/extend\/wordpress\/spicy-form\/wp-json\/wp\/v2\/pages\/379","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pushnifty.com\/mojoomla\/extend\/wordpress\/spicy-form\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/pushnifty.com\/mojoomla\/extend\/wordpress\/spicy-form\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/pushnifty.com\/mojoomla\/extend\/wordpress\/spicy-form\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pushnifty.com\/mojoomla\/extend\/wordpress\/spicy-form\/wp-json\/wp\/v2\/comments?post=379"}],"version-history":[{"count":2,"href":"https:\/\/pushnifty.com\/mojoomla\/extend\/wordpress\/spicy-form\/wp-json\/wp\/v2\/pages\/379\/revisions"}],"predecessor-version":[{"id":396,"href":"https:\/\/pushnifty.com\/mojoomla\/extend\/wordpress\/spicy-form\/wp-json\/wp\/v2\/pages\/379\/revisions\/396"}],"wp:attachment":[{"href":"https:\/\/pushnifty.com\/mojoomla\/extend\/wordpress\/spicy-form\/wp-json\/wp\/v2\/media?parent=379"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}