这是我的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>
下面是一个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>