提交联系表单谷歌表后加载动画

问题描述 投票：0回答：1

这是不起作用的：

  • 我尝试在提交表单和显示成功消息之间的时间延迟期间显示加载动画（我正在使用 swal.fire() 显示成功消息）。但没有成功。

这是我成功编写的加载动画代码

它独立工作，我无法在应用程序脚本中添加此加载动画功能。

$(document).ready(function(){
  $("#myform").on("submit", function(){
    $("#preloder").fadeIn();
  });//submit
});//document ready

/* Preloder */

#preloder {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 999999;
    /* background: #000; */
    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: 4px solid #f44336; */
        border-left-color: transparent;
    }
    50% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
        border: 4px solid #056d4d;
        /* border: 4px solid #673ab7; */
        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;
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Page Preloder -->
<div id="preloder">
    <div class="loader"></div>
</div>

<form id="myform">
  <input type="text" name="fname" id="fname" value="" />
  <input type="submit" value="Submit" />
</form>

这是我尝试添加时间延迟加载动画功能的应用程序脚本。 {appscript 中制作的文件：（code.gs 和 index.html 以及库 ID）}.

图书馆编号 1CCBYkrGSeBRgphHUE92vWINyULOCJ1Ub6eFUR0_gI1h9I6whLjXtDA-P

代码.gs

function doGet() {
  return HtmlService.createTemplateFromFile('index').evaluate()
  .addMetaTag('viewport', 'width=device-width, initial-scale=1')
  .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
}

var url = '#'
var sh = 'file1'
var folderId = '#'

function processForm(formdata) {
  var superscript = SuperScript.initSuper(url, sh);
  var formObject = {};
  formdata.forEach(element => formObject[element.name] = element.value);
  formdata.forEach(element => formObject[element.message] = element.value);
  formdata.forEach(element => formObject[element.email] = element.value);
  formdata.forEach(element => formObject[element.phone] = element.value);

  var f = formdata.find(({ name }) => name == "myfile");
  var file = (f && f.value?.name && f.value?.data) ? superscript.uploadFile(folderId, formObject.myfile.data, formObject.myfilename) : "";
  var ss = SpreadsheetApp.openByUrl(url);
  var ws = ss.getSheets()[0];
  ws.appendRow([
    new Date(),
    formObject.name,
    "'" + formObject.message,
    formObject.email,
    formObject.phone,
    file && file.getUrl()
  ]);

}

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/[email protected]/dist/css/bootstrap.min.css"
        integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
  
  
</head>
<body>
    <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>
                        </div>
                    </div>
                </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() {
                var formdata = $('#myForm').serializeArray()
                formdata.push({
                  name: 'myfile',
                  value: myfile
                })
                google.script.run.withSuccessHandler(success).processForm(formdata);
            }
            function success(){
                 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>
  <script src="sweetalert2.all.min.js"></script>
</body>
</html>
javascript html forms google-apps-script sweetalert2
1个回答
0
投票

您是否尝试过在提交之前激活动画？还要确保您阻止默认的表单提交行为。

更改为：

<form id="myForm" onsubmit="handleFormSubmit(); return false">


function handleFormSubmit() {
  var formdata = $('#myForm').serializeArray()
  formdata.push({
    name: 'myfile',
    value: 12
  })

  // here
  $("#preloder").fadeIn();

  // just in case
  try {
    google.script.run.withSuccessHandler(success).processForm(formdata);
  } catch (ex) {
    console.error(ex.message)
  }

}
/* Preloder */

#preloder {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 999999;
  /* background: #000; */
  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: 4px solid #f44336; */
    border-left-color: transparent;
  }
  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    border: 4px solid #056d4d;
    /* border: 4px solid #673ab7; */
    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;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Page Preloder -->
<div id="preloder">
  <div class="loader"></div>
</div>

<form id="myform" onsubmit="handleFormSubmit(); return false">
  <input type="text" name="fname" id="fname" value="" />
  <input type="submit" value="Submit" />
</form>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.