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

【问题标题】：I want to Customise the Message Shown when Form Submitted in html. How to to do it?我想自定义在 html 中提交表单时显示的消息。怎么做？
【发布时间】：2019-06-10 13:36:39
【问题描述】：

我使用 Google Apps Mail 从静态 HTML 表单构建了发送电子邮件。问题是，当我提交表单时，我会看到一条确认消息，如下所示：

{"result":"success","data":"{\"firstname\":[\"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>

【问题讨论】：

您是否尝试过开发自己的 Google Apps 脚本来管理这方面的邮件，而不是使用第 3 方脚本？
不，@ross，我没有！并感谢您的编辑。

标签： javascript html google-apps-script

【解决方案1】：

您可以发出 ajax 请求，而不是直接提交 from。

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

【讨论】：

非常感谢 Rahul 的帮助。你已经解决了我的一半问题，不显示像这样的糟糕消息：{"result":"success","data":"{\"firstname\":[\"Abhay\"]}"} 但我想要一个代码，当用户提交他的名字时，页面会显示感谢信息。
Andrew 在您进行直接表单发布时，它导航（新页面，url 将更改）到（script.google.com/macros/s/…），因此您在页面上看到了原始 json。但是当使用 fetch 时，您仍然会在同一页面上，document.getElementById('thankyou_message').style.display = 'block'; 行会显示感谢信息。