[英]Display message from Lambda via Javascript after successful form submit
[英]Submit Form should display message after successful submit to Google Sheets
我正在嘗試向Google表格提交表單。 此步驟成功完成,我將獲得工作表中的所有數字。 現在,我想在提交表單並且Google表格的結果正常后顯示成功消息。 我該怎么做?
我已經在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>
現在,在腳本中對fetch函數進行以下更改:
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!")
})
如果您使用Google表單將數據提交到Google表格,則表單設置中有一個設置,您可以在其中顯示提交時的回復。 無需代碼。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.