javascript - 警报按钮在文本编辑器中有效，但在 s3 中部署到静态网站时不起作用

问题描述

我在 Amazon s3 上托管一个网站。我有一个简单的用户表单，当我使用像 Atom 这样的文本编辑器时它可以工作，当我通过 API 网关将表单提交到我的电子邮件时，它会发送通知。问题是当我深入归档到 s3 存储桶时，没有验证或提交通知。通知已启用，我在不同的浏览器中尝试过。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Flushing NY</title>
    <base href="/" />
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <!-- API Endpoint Access using API Gateway -->
    <script type="text/javascript">
    function submitToAPI(e) {
       e.preventDefault();
       var URL = "https://abc123.execute-api.us-east-1.amazonaws.com/Prod02";

            var Namere = /[A-Za-z]{1}[A-Za-z]/;
            if (!Namere.test($("#name-input").val())) {
                         window.alert ("Enter at least 2 initials");
                return;
            }
            var mobilere = /[0-9]{10}/;
            if (!mobilere.test($("#phone-input").val())) {
                window.alert ("Please enter valid mobile number");
                return;
            }
            if ($("#email-input").val()=="") {
                window.alert ("Please enter your email id");
                return;
            }

            var reeamil = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,6})?$/;
            if (!reeamil.test($("#email-input").val())) {
                window.alert ("Please enter valid email address");
                return;
            }

       var name = $("#name-input").val();
       var phone = $("#phone-input").val();
       var email = $("#email-input").val();
       var desc = $("#description-input").val();
       var data = {
          name : name,
          phone : phone,
          email : email,
          desc : desc
        };

       $.ajax({
         type: "POST",
         url : "https://abc123.execute-api.us-east-1.amazonaws.com/Prod02",
         dataType: "json",
         crossDomain: "true",
         contentType: "application/json; charset=utf-8",
         data: JSON.stringify(data),


         success: function () {
           // clear form and show a success message
           window.alert("Message Sent Successfully");
           document.getElementById("contact-form").reset();
       location.reload();
         },
         error: function () {
           // show an error message
           window.alert("UnSuccessfull");
         }});
     }
    </script>
    <script src="js/html5shiv.js"></script>
    <script src="js/selectivizr-min.js"></script>
  </head>
  <body>
<div class="container" style="font-family:corbel;">
  <img src="images/citifield.jpg" class="w3-margin-bottom" style="width:100%">
    <div class="content">
    <h3>Feedback to developer</h3>
    <h5>Lets get in touch and talk about your next neighborhood portfolio...</h5>
      <form id="contact-form" method="post">
      <h4>Name:</h4>
      <input type="text" id="name-input" placeholder="Enter name here…&quot; class="form-control" style="width:50%;height:35px;" />
      <h4>Phone:</h4>
      <input type="phone" id="phone-input" placeholder="Enter phone number" class="form-control" style="width:50%;height:35px;float:center;"/>
      <h4>Email:</h4>
      <input type="email" id="email-input" placeholder="Enter email here…&quot; class="form-control" style="width:50%;height:35px;"/>
      <h4>How can we help you?</h4>
      <textarea id="description-input" rows="3" placeholder="Enter your message…&quot; class="form-control" style="width:100%;"></textarea>
      <div class="g-recaptcha" data-sitekey="6Lc7cVMUAAAAAM1yxf64wrmO8gvi8A1oQ_ead1ys" class="form-control" style="width:100%;"></div>
      <button type="button" onClick="submitToAPI(event)" class="w3-light-grey w3-button">Submit</button><br/><br/>
</form>

  </div>
</div>

<!-- End page content -->
</div>
<div class="alert"></div>
<!-- SCRIPTS -->
<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.8.3.min.js"><\/script>')</script>
<script src="js/jquery.address-1.5.min.js"></script>
<script src="js/antiscroll.js"></script>
<script src="js/jquery.fittext.js"></script>
<script src="js/jquery.imagesloaded.min.js"></script>
<script src="js/jquery.isotope.min.js"></script>
<script src="js/jquery.fitvids.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script src="js/jquery.fancybox-1.3.4.pack.js"></script>
<script src="js/send-mail.js"></script>
<script src="js/twitterFetcher_v10_min.js"></script>
<script src="js/main.js"></script>

</body>
</html>

.container {
  position: relative;
  display: flex;
}


.container .content {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  background: rgb(0, 0, 0); /* Fallback color */
  padding-right: 30px;
  padding-left: 30px;
  background-color: rgba(0, 0, 0, 0.5);
  color: whitesmoke;
  border-radius: 25px;
  border-color: whitesmoke;
  border: 1px;
}


.button, button {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 2px;
  font-size: 14px;
  cursor: pointer;
  background-color: grey;
  color: whitesmoke;
  border: none;
}

标签： javascripthtmljquerycssamazon-s3

javascript - 警报按钮在文本编辑器中有效，但在 s3 中部署到静态网站时不起作用

问题描述

解决方案

推荐阅读