我想自定义在html中提交表单时显示的消息。怎么做呢?

时间:2019-06-10 13:36:39

标签: javascript html google-apps-script

我已经使用Google Apps Mail从静态HTML表单构建了“发送电子邮件”。问题在于,当我提交表单时,我看到一条确认消息,其发送方式如下:

  

{“ result”:“成功”,“ data”:“ {\” first \“:[\” Abhay \“]}”}

我要删除该内容,此外,我还希望在提交表单后输入干净的文本,例如“感谢提交”。请更正我的代码以删除此输出。

<!DOCTYPE HTML>
    <html>
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title> contact form </title>
    </head>
    <body>
    <div>
    <form id="gform" method="POST" 
    action="https://script.google.com/macros/s/AKfycbwlSM9z9ELHa1- 
    X6C_srRrB0j7FUlGgevJw7w7M/exec" >
    <label for="fname">First Name</label>
    <input type="text" id="fname" name="firstname" placeholder="Your name.." 
    required oninvalid="this.setCustomValidity('Put  here custom message')"/>
    <input type="submit" value="Submit"/>
    </form>

    <div style="display: none;" id="thankyou_message">
    <h2> <em>Thanks</em>xfn</h2>
    </div>

    <script data-cfasync="false" type="text/javascript"
    src="https://cdn.rawgit.com/dwyl/html-form-send-email-via-google-script- 
    without-server/master/form-submission-handler.js"></script>
    
    </body>
    </html>

1 个答案:

答案 0 :(得分:0)

您可以发出Ajax请求,而不是直接提交。

 <form id="gform" onsubmit="return postMessage()">

在下面

<script>
    function PostMessage() {
        var form = document.getElementById('gform')

        fetch('"https://script.google.com/macros/s/AKfycbwlSM9z9ELHa1- 
       X6C_srRrB0j7FUlGgevJw7w7M/exec', {
        method: 'POST',
        body: new URLSearchParams(new FormData(a)).toString()
     }).then(function(res){ return res.json(); })
    .then(function(data){
        if(data.result == "success") {
            document.getElementById('thankyou_message').style.display = 'block';
        }
     });
     return false;
  }
</script>