ส่งข้อมูลไปบันทึกยัง Google sheets ด้วย doPost

bysemicon -
0

ส่งข้อมูลแบบฟอร์ม HTML ไปบันทึกยัง Google sheet โดยใช้ doPost

1. สร้างไฟล์  index.html

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML form to Google Sheet</title>
</head>
 
<body>
    <h1 id="msg"></h1>
    <form>
        <input type="text" name="name" placeholder='Name'><br><br>
        <input type="email" name="email" placeholder='Email'><br><br>
        <input type="tel" name="phone" placeholder='Phone'><br><br>
        <input type="submit" id="sub">
    </form>
    <script>
        let form = document.querySelector("form");
        form.addEventListener('submit', (e) => {
            e.preventDefault();
            document.querySelector("#sub").value = "Submiting..";
            let data = new FormData(form);
            
            //Your_Api_EndPoint_Url
            fetch('Paste_Your_Api_EndPoint_Url', {
                    method: "POST",
                    body: data
                })
                .then(res => res.text())
                .then(data => {
                    document.querySelector("#msg").innerHTML = data;
                    document.querySelector("#sub").value = "Submit"
                });
        })
    </script>
</body>
 
</html>


2. ไปที่ https://google.com/sheets แล้วสร้างสเปรดชีตเปล่า

3. คลิกที่ส่วนขยาย จากนั้นคลิกที่ Apps Script

4. โปรเจ็กต์ใหม่จะเปิดขึ้นในแท็บใหม่ วางโค้ดด้านล่าง และกลับไปที่แท็บสเปรดชีต จากนั้นคัดลอก url ของสเปรดชีต นำ URL ไปวางในโค้ด SpreadsheetApp.openByUrl()

//Your spreadsheet url
const sheets = SpreadsheetApp.openByUrl("Paste your spreadsheet url here");

//if you have changed your sheet name then replace the below Sheet1 with your sheet name
const sheet = sheets.getSheetByName("Sheet1");

function doPost(e){
  let data = e.parameter;
  sheet.appendRow([data.name,data.email,data.phone]);
  return ContentService.createTextOutput("Success");
}

5. คลิก การทำให้ใช้งานได้ จากนั้นคลิกที่ การทำให้ใช้งานได้รายการใหม่ 

6. หลังจากดำเนินการเสร็จสิ้น คุณจะได้รับ URL ของ API คัดลอก URL จากนั้นไปที่โปรแกรมแก้ไขโค้ดของคุณ และนำ URL วางในโค้ดจาวาสคริปต์ fetch() ของไฟล์ index.html 

7. เรียกใช้ไฟล์ index.html


Tags:
แสดงความคิดเห็น (0)
ใหม่กว่า เก่ากว่า