成功提交到Google表格后，提交表单应显示消息

本文介绍了成功提交到Google表格后，提交表单应显示消息的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在尝试向Google表格提交表单.此步骤成功完成，我将获得工作表中的所有数字.现在，我想在提交表单后显示成功消息，并且来自Google表格的结果还可以.我该怎么办?

I am trying to submit a form to Google Sheets. This step is successful and I am getting all the numbers in the sheet. Now I want to display a success message after the form is submitted and the result from Google Sheets is ok. How do I do it?

我已经尝试过用javascript和ajax编写各种消息，但是对此并没有太多的了解.我在下面显示了我的代码，因此您可以看一下.

I have tried various messages in javascript and ajax, but don't have much understanding about it. I have shown my code below so you can have a look at it.

<form name="submit-to-google-sheet"> <select class="form-control custom-form" name="country_code" id="country_code"> <option name="country_code" value="+91">India 91</option> <option name="country_code" value="+93">Afghanistan 93</option> </select> </div> </div> <div class="row"> <div class="form-group spec-col col-md-8 col-lg-8 col-sm-12"> <input type="text" class="form-control custom-form" id="phone_no" name="phone_no" placeholder="Enter the Number"> </div> </div> <button class="btn btn-submit" id="submit" type="submit">Submit</button> </div> </form>

对于将内容提交到Google表格，这是代码

For Submitting the content to Google Sheets, here is the code

<script> const scriptURL = 'GOOGLE SHEETS URL' const form = document.forms['submit-to-google-sheet'] form.addEventListener('submit', e => { e.preventDefault() fetch(scriptURL, { method: 'POST', body: new FormData(form)}) .then(response => console.log('Success!', response)) .catch(error => console.error('Error!', error.message)) }) </script>

表单成功后，我可以在控制台中看到一条成功消息.相反，我想在HTML中显示一个简单的单字行，非常感谢.一旦Google表格的回复确定并隐藏表单，您的提交便成功了.

After the form is successful, I can see a success message in the console. Instead, I want to show a simple one-word line in HTML, that thanks a lot. Your submission is successful, once the response from Google Sheets is Ok and hide the form.

其余代码可从此处引用: github/jamiewilson/form-to-google-sheets

The rest of the code can be referenced from here: github/jamiewilson/form-to-google-sheets

推荐答案

在按钮下方创建一个空白响应消息

标签，就像这样

Bellow the button create a blank response message

tag just like this

<button class="btn btn-submit" id="submit" type="submit">Submit</button> <p id="response_message"></p>

现在，脚本中的访存功能进行了以下更改:

Now in the scripts make the following change in the fetch function:

form.addEventListener('submit', e => { e.preventDefault() var response_message = document.getElementById("response_message"); fetch(scriptURL, { method: 'POST', body: new FormData(form)}) .then(response => response_message.innerHTML = "Success!") .catch(error => response_message.innerHTML = "Error!") })