我正在尝试向 Google 表格提交表单。这一步成功了,我得到了表中的所有数字。现在我想在提交表单后显示一条成功消息,并且 Google Sheets 的结果没问题。我该怎么做?
我尝试过javascript和ajax中的各种消息,但对此没有太多了解。我在下面展示了我的代码,以便您可以查看。
<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 表格,代码如下
<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 表格的响应为“确定”并隐藏表单,您的提交就成功了。
编辑:其余代码可以从这里引用:https://github.com/jamiewilson/form-to-google-sheets
最佳答案
在按钮下方创建一个空白响应消息
标签就像这样
<button class="btn btn-submit" id="submit" type="submit">Submit</button>
<p id="response_message"></p>
现在在脚本中对获取函数进行以下更改:
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!")
})
关于javascript - 成功提交到 Google 表格后,提交表单应显示消息,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56831426/