Google Apps Script表单提交后加载动画集成问题求助

问题说明 #

我需要在Google Apps Script的index.html中，实现表单提交后到Swal.fire成功提示弹出的延迟阶段显示加载动画，但尝试集成自己编写的独立加载动画代码后未成功。

解决方案 #

只需对现有index.html进行以下3处修改，即可完成加载动画的集成：

1. 插入加载动画样式 #

在<head>标签内添加加载动画的CSS代码：

/* Preloder */
#preloder {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 999999;
    background: #ffffff;
}

.loader {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -20px;
    margin-left: -20px;
    border-radius: 60px;
    animation: loader 0.8s linear infinite;
    -webkit-animation: loader 0.8s linear infinite;
}

@keyframes loader {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        border: 4px solid #056d4d;      
        border-left-color: transparent;
    }
    50% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
        border: 4px solid #056d4d;
        border-left-color: transparent;
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        border: 4px solid #056d4d;
        border-left-color: transparent;
    }
}

@-webkit-keyframes loader {
    0% {
        -webkit-transform: rotate(0deg);
        border: 4px solid #056d4d;
        border-left-color: transparent;
    }
    50% {
        -webkit-transform: rotate(180deg);
        border: 4px solid #056d4d;
        border-left-color: transparent;
    }
    100% {
        -webkit-transform: rotate(360deg);
        border: 4px solid #056d4d;
        border-left-color: transparent;
    }
}

2. 添加加载动画DOM元素 #

在<body>标签的最顶部插入加载动画的HTML结构：

<!-- Page Preloder -->
<div id="preloder">
    <div class="loader"></div>
</div>

3. 修改表单提交与成功回调函数 #

更新<script>中的handleFormSubmit和success函数，控制加载动画的显示与隐藏：

function handleFormSubmit() {
    // 提交时显示加载动画
    $("#preloder").fadeIn();
    
    var formdata = $('#myForm').serializeArray()
    formdata.push({
      name: 'myfile',
      value: myfile
    })
    google.script.run.withSuccessHandler(success).processForm(formdata);
}

function success(){
     // 处理完成后隐藏加载动画
     $("#preloder").fadeOut();
     
     document.getElementById("myForm").reset()
     Swal.fire({
      position: 'center',
      icon: 'success',
      title: '发送成功！我们会尽快联系你',
      showConfirmButton: true,
    })
}

完整修改后的index.html #

<!DOCTYPE html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
        integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
        integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
  
    <!-- 加载动画样式 -->
    <style>
        /* Preloder */
        #preloder {
            display: none;
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 999999;
            background: #ffffff;
        }

        .loader {
            width: 50px;
            height: 50px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -20px;
            margin-left: -20px;
            border-radius: 60px;
            animation: loader 0.8s linear infinite;
            -webkit-animation: loader 0.8s linear infinite;
        }

        @keyframes loader {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
                border: 4px solid #056d4d;      
                border-left-color: transparent;
            }
            50% {
                -webkit-transform: rotate(180deg);
                transform: rotate(180deg);
                border: 4px solid #056d4d;
                border-left-color: transparent;
            }
            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
                border: 4px solid #056d4d;
                border-left-color: transparent;
            }
        }

        @-webkit-keyframes loader {
            0% {
                -webkit-transform: rotate(0deg);
                border: 4px solid #056d4d;
                border-left-color: transparent;
            }
            50% {
                -webkit-transform: rotate(180deg);
                border: 4px solid #056d4d;
                border-left-color: transparent;
            }
            100% {
                -webkit-transform: rotate(360deg);
                border: 4px solid #056d4d;
                border-left-color: transparent;
            }
        }
    </style>
</head>
<body>
    <!-- 加载动画元素 -->
    <div id="preloder">
        <div class="loader"></div>
    </div>

    <div class="container py-5">
        <div class="row">
            <div class="col-lg-5 col-md-8 mx-auto shadow border bg-white p-4 rounded">
                <nav class="navbar navbar-dark bg-primary">
                    <a class="navbar-brand" href="#" fw-bold mb-3>WRITE YOUR QUERY / MESSAGE</a>
                </nav>
                <br>
                <form id="myForm" onsubmit="handleFormSubmit()">
                    <div id="form_alerts"></div>
                    <div class="form-group mb-3">
                        <label for="name">Name</label>
                        <input type="text" class="form-control" id="name" placeholder="Enter your Name here|" name="name"required>
                    </div>

                    <div class="form-group mb-3">
                        <label for="email" >Email</label>
                        <input type="email"  class="form-control" id="email" placeholder="Enter your email address here|" name="email" required>
                    </div>

                    <div class="form-group mb-3">
                        <label for="phone">phone number</label>
                        <input type="tel" id="phone" class="form-control" name="phone" placeholder="Enter your phone number here with country code|" pattern="[+]{1}[0-9]{2}[0-9]{10}" required>
                        <small>requested example Format: +919263943858</small>
                    </div>

                    <div class="form-group mb-3">
                        <label for="message">Message</label>
                        <textarea class="form-control" id="message" placeholder="Write your message here|" name="message" required ></textarea>
                    </div>

                    <div class="form-group mb-3">
                        <label for="uploadFile">Upload File</label>
                        <input type="file" class="form-control" File="file" id="file">
                        <small>For multiple/bigger file size please attach/share via google drive link in message section.</small>
                    </div>

                    <button type="submit" class= "btn btn-primary btn-block">SEND</button>
                </form>
            </div>
        </div>
    </div>

    <script>
        function preventFormSubmit() {
                var forms = document.querySelectorAll('form');
                for (var i = 0; i < forms.length; i++) {
                    forms[i].addEventListener('submit',
                     function (event) {
                        event.preventDefault();
                    });
                }
            }
            window.addEventListener('load', preventFormSubmit);
            
            function handleFormSubmit() {
                // 显示加载动画
                $("#preloder").fadeIn();
                
                var formdata = $('#myForm').serializeArray()
                formdata.push({
                  name: 'myfile',
                  value: myfile
                })
                google.script.run.withSuccessHandler(success).processForm(formdata);
            }
            
            function success(){
                 // 隐藏加载动画
                 $("#preloder").fadeOut();
                 
                 document.getElementById("myForm").reset()
                 Swal.fire({
                  position: 'center',
                  icon: 'success',
                  title: 'Sended successfully! Be ready we will contact you shortly',
                  showConfirmButton: true,
                })
            }
            
        var myfile ={},file, reader = new FileReader();
        reader.onloadend = function(e) {
            myfile.data = e.target.result
            myfile.name = file.name
            console.log(myfile)
        };
        $('#file').change(function(){
            file = $('#file')[0].files[0]
            reader.readAsDataURL(file);
        })
    </script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
</body>
</html>

内容的提问来源于stack exchange，提问作者ankit