Kirim data ke google spreadsheet javascript

Jika Anda ingin lebih memahami apa yang dilakukan skrip ini, periksa file

  
  Send



  const scriptURL = ''
  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]]
  }]

2 di repo untuk penjelasan terperinci

3. Jalankan fungsi pengaturan

• Selanjutnya, buka

  
    
    Send
  
  
  
    const scriptURL = ''
    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]]
    }]
  

  _3 untuk menjalankan fungsi ini
• Dalam dialog

  
    
    Send
  
  
  
    const scriptURL = ''
    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]]
    }]
  

  4, klik

  
    
    Send
  
  
  
    const scriptURL = ''
    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]]
    }]
  

  5
• Masuk atau pilih akun Google yang terkait dengan proyek ini
• Anda akan melihat dialog yang mengatakan

  
    
    Send
  
  
  
    const scriptURL = ''
    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]]
    }]
  

  6,

  
    
    Send
  
  
  
    const scriptURL = ''
    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]]
    }]
  

  7
• Klik

  
    
    Send
  
  
  
    const scriptURL = ''
    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]]
    }]
  

  _8

4. Tambahkan pemicu proyek baru

• Klik pada

  
    
    Send
  
  
  
    const scriptURL = ''
    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]]
    }]
  

  _9
• Dalam dialog klik

  
    
    
    
    Send
  

  0
• Di dropdown pilih

  
    
    
    
    Send
  

  _1
• Setel bidang acara ke

  
    
    
    
    Send
  

  2 dan

  
    
    
    
    Send
  

  3
• Kemudian klik

  
    
    
    
    Send
  

  _4

5. Publikasikan proyek sebagai aplikasi web

• Klik pada

  
    
    
    
    Send
  

  _5
• Setel

  
    
    
    
    Send
  

  6 ke

  
    
    
    
    Send
  

  7 dan masukkan

  
    
    
    
    Send
  

  8 di kolom input di bawah
• Biarkan

  
    
    
    
    Send
  

  _9 diatur ke

  
  
  
  
  
    const scriptURL = ''
    const form = document.forms['submit-to-google-sheet']
    ...
  

  0
• Untuk

  
  
  
  
  
    const scriptURL = ''
    const form = document.forms['submit-to-google-sheet']
    ...
  

  1 pilih

  
  
  
  
  
    const scriptURL = ''
    const form = document.forms['submit-to-google-sheet']
    ...
  

  2
• Klik

  
  
  
  
  
    const scriptURL = ''
    const form = document.forms['submit-to-google-sheet']
    ...
  

  _3
• Di munculan, salin

  
  
  
  
  
    const scriptURL = ''
    const form = document.forms['submit-to-google-sheet']
    ...
  

  _4 dari dialog
• Dan klik

  
  
  
  
  
    const scriptURL = ''
    const form = document.forms['submit-to-google-sheet']
    ...
  

  _5

PENTING. Jika Anda memiliki domain khusus dengan Gmail, Anda mungkin perlu mengeklik

  const scriptURL = ''
  const form = document.forms['submit-to-google-sheet']
  ...

5, menyegarkan laman, lalu membuka

  
  
  
  Send

5 lagi untuk mendapatkan URL aplikasi web yang sesuai. Seharusnya terlihat seperti

  const scriptURL = ''
  const form = document.forms['submit-to-google-sheet']
  ...

_8

6. Masukkan URL aplikasi web Anda

Buka file bernama

  const scriptURL = ''
  const form = document.forms['submit-to-google-sheet']
  ...

9. Pada baris 12 ganti Start a new spreadsheet_0 dengan url skrip Anda

  
  Send



  const scriptURL = ''
  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]]
  }]

Seperti yang Anda lihat, skrip ini menggunakan API Ambil, mekanisme berbasis janji yang cukup baru untuk membuat permintaan web. Itu membuat permintaan "POST" ke URL skrip Anda dan menggunakan FormData untuk meneruskan data kami sebagai parameter URL

Karena Fetch dan FormData tidak sepenuhnya didukung, Anda mungkin ingin menyertakan polyfillnya masing-masing.

Fakta menyenangkan. Tag Start a new spreadsheet1, Start a new spreadsheet2, dan Start a new spreadsheet3 sebenarnya adalah beberapa tag opsional, tetapi karena , Anda mungkin tidak ingin menghilangkannya di situs web nyata

7. Menambahkan data formulir tambahan

Untuk mengambil data tambahan, Anda hanya perlu membuat kolom baru dengan judul yang sama persis dengan nilai Start a new spreadsheet4 dari input formulir Anda. Misalnya, jika Anda ingin menambahkan input nama depan dan belakang, Anda akan memberi mereka Start a new spreadsheet4 nilai seperti itu

  
  
  
  Send

_

Kemudian buat header baru dengan nilai Start a new spreadsheet4 yang tepat dan peka huruf besar-kecil

ABCD. 1timestampemailfirstNamelastName

8. Polyfill terkait

Beberapa hal ini belum sepenuhnya didukung oleh browser atau tidak berfungsi pada browser lama. Berikut adalah beberapa opsi polyfill untuk digunakan untuk dukungan yang lebih baik

• Janji Polyfill
• Ambil Polyfill
• Polyfill FormData

Karena polyfill FormData diterbitkan sebagai paket Node dan perlu dikompilasi agar browser dapat bekerja dengannya, opsi yang baik untuk memasukkan ini menggunakan CDN Browserify yang disebut wzrd. di dalam. Layanan ini mengkompilasi, mengecilkan, dan menyajikan versi terbaru dari skrip ini untuk kami

Anda ingin memastikan ini dimuat sebelum skrip utama menangani pengiriman formulir. e. g

  const scriptURL = ''
  const form = document.forms['submit-to-google-sheet']
  ...

Punya umpan balik/permintaan/masalah?

Harap buat masalah baru. PR pasti diterima, tapi tolong jalankan ide Anda dengan saya sebelum melakukan banyak pekerjaan. terima kasih

Bagaimana cara mengirim data dari JavaScript ke Google Sheets?

Bagaimana cara mengirim data ke Google Sheets?

Bagaimana cara menghubungkan JavaScript ke Google Sheets?

Bagaimana cara mengirim data ke Google Sheets API?