提问者:小点点

如何使用JavaScript根据http状态显示消息?


这是我的html代码,我想用google sheets将详细信息发送到我的邮件中,请帮助我更改javascript代码。

<form id="ajax-contact" method="post" action="https://script.google.com/macros/s/AKfycbz3apZ3HKNd_dqdaZSeemKcSEQVslwb8CCtHEFB/"> 
<div class="form-group">
<input type="text" class="form-control" placeholder="Name" id="name" name="name" required>
</div>
<div class="form-group">                
<input type="email" class="form-control" placeholder="Enter Email" id="email" name="email" required>
</div> 
<div class="form-group">                
<input type="tel" class="form-control" placeholder="Mobile Number" id="phone" name="phone" pattern="[0-9]{10}" required>
</div> 
<div class="form-group">
<textarea class="form-control" placeholder="Message" id="message" name="message" required></textarea>
</div>
<button type="submit" onclick="myFunction()" class="mu-send-msg-btn"><span>SUBMIT</span></button>
</form>
<p id="thank"></p>
 <script>
      function myFunction(){
          var xhttp = new XMLHttpRequest();
          xhttp.onreadystatechange = function() {
          if (this.readyState == 4 && this.status == 200) {
          document.getElementById("thank").innerHTML="Thankyou! for contacting us, will get back to you soon.";
           }
            else{
                  document.getElementById("thank").innerHTML="Sorry! please try again."
                 }
             }
            }
</script>

共1个答案

匿名用户

下面是一个jQuery AJAX示例。

null

$(function() {
  $("#ajax-contact").submit(function(e) {
    e.preventDefault();
    $.ajax({
      url: $(this).attr("action"),
      type: $(this).attr("method"),
      data: $(this).serialize(),
      success: function(results) {
        $("#thank").html("Thank you for contacting us! We will get back to you soon.");
      },
      error: function() {
        $("#thank").html("Sorry! Please try again.");
      }
    });
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="ajax-contact" method="post" action="https://script.google.com/macros/s/AKfycbz3apZ3HKNd_dqdaZSeemKcSEQVslwb8CCtHEFB/">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Name" id="name" name="name" required>
  </div>
  <div class="form-group">
    <input type="email" class="form-control" placeholder="Enter Email" id="email" name="email" required>
  </div>
  <div class="form-group">
    <input type="tel" class="form-control" placeholder="Mobile Number" id="phone" name="phone" pattern="[0-9]{10}" required>
  </div>
  <div class="form-group">
    <textarea class="form-control" placeholder="Message" id="message" name="message" required></textarea>
  </div>
  <button type="submit" class="mu-send-msg-btn"><span>SUBMIT</span></button>
</form>
<p id="thank"></p>