2

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>
Rohit Ambre
  • 628
  • 1
  • 5
  • 18
shivaan
  • 67
  • 6
  • Welcome to Stack Overflow. Your AJAX call does not appear to have a URL to send to. You also tagged this question with `jQuery`, are you looking for a JavaScript answer or jQuery answer? – Twisty Jun 12 '20 at 14:58

1 Answers1

1

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:

Twisty
  • 23,484
  • 1
  • 22
  • 40