如何在沒有Google表單的情況下向Google表格提交HTML表單

Question

我找到了這個網站： https : //medium.com/@dmccoy/how-to-submit-an-html-form-to-google-sheets-without-google-forms-b833952cc175

我正在嘗試按照規定創建表單，但是我在Google表單中未定義表單字段。 這是我的代碼

 var $form = $('form#test-form'), url = 'https://script.google.com/macros/s/AKfycbxLarVG8hcqD6DTXAd5FITK9lZhy_zF-DsBtEVCdAOfah5yT04/exec' $('#submit-form').on('click', function(e) { e.preventDefault(); var jqxhr = $.ajax({ url: url, method: "GET", dataType: "json", data: $form.serializeObject() }).success( // do something ); }) 

 <div> <label>Field 1</label> <input type="text" name="form_field_1" placeholder="Field 1"/> </div> <div> <label>Field 2</label> <input type="text" name="form_field_2" placeholder="Field 2"/> </div> <div> <label>Field 3</label> <input type="text" name="form_field_3" placeholder="Field 3"/> </div> <div> <label>Field 4</label> <input type="text" name="form_field_4" placeholder="Field 4"/> </div> <div> <button type="submit"id="submit-form">Submit</button> </div> </form> 

Answer 1

歡迎使用Stackoverflow，

我不知道您是否錯過了僅將JQuery庫包括在本文中，但這是您遇到的問題之一。 首先，對Jquery庫進行引用，如下所示：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

並且當您這樣做時，您會收到一條錯誤消息，指出serializeObject不是函數。 同樣，您可以使用創建該函數的外部庫，也可以這樣編寫自己的函數：

$.fn.serializeObject = function() {
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name]) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

順便說一下，感謝@ravi_kant_dubey編寫了此函數，您可以從此處查看主題。

最后，對該代碼進行處理，看一切是否正常。

function(e){console.log(e);}

無論如何，如果您運行下面的腳本，您可以看到響應返回沒有任何問題。 這意味着它正在工作。

 $.fn.serializeObject = function() { var o = {}; var a = this.serializeArray(); $.each(a, function() { if (o[this.name]) { if (!o[this.name].push) { o[this.name] = [o[this.name]]; } o[this.name].push(this.value || ''); } else { o[this.name] = this.value || ''; } }); return o; }; var $form = $('form#test-form'), url = 'https://script.google.com/macros/s/AKfycbxLarVG8hcqD6DTXAd5FITK9lZhy_zF-DsBtEVCdAOfah5yT04/exec' $('#submit-form').on('click', function(e) { e.preventDefault(); var jqxhr = $.ajax({ url: url, method: "GET", dataType: "json", data: $form.serializeObject() }).success(function(e){console.log(e);} // do something ); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <label>Field 1</label> <input type="text" name="form_field_1" placeholder="Field 1"/> </div> <div> <label>Field 2</label> <input type="text" name="form_field_2" placeholder="Field 2"/> </div> <div> <label>Field 3</label> <input type="text" name="form_field_3" placeholder="Field 3"/> </div> <div> <label>Field 4</label> <input type="text" name="form_field_4" placeholder="Field 4"/> </div> <div> <button type="submit"id="submit-form">Submit</button> </div> </form>