how to show the message according to the http status using javascript?

user_12204388 0
Viewed 172

this is my html code and i want to send the details to my mail using google sheets please help me to change the javascript code.

<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>
css html jquery javascript
1 Answers

Here is a jQuery AJAX example.

$(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>

Normally, the HTML Form would be submitted directly to the action attribute. We create a submit callback and prevent the default event. We can then program the actions that are desired.

AJAX will still need to know the URL, Method Type, and Data that is to be sent to the Action. We can then handle success or error callbacks.

See more:

user_4633190
Related