如何将HTML表单提交到Google表格...没有Google表单 [英] How to Submit an HTML Form to Google Sheets…without Google Forms

问题描述

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

我正在尝试按照规定创建表单，但我在表格字段的Google表格中未定义。这是我的代码

I am trying to create the form as they stipulated but I got undefined in the google sheets for the form fields. Here is my code

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>

推荐答案

欢迎来到Stackoverflow，

Welcome to Stackoverflow,

我不知道你是否错过了将JQuery Library仅包含在这篇文章中，但这是你的一个问题。首先，请参考Jquery库，如下所示：

I do not know if you missed to include JQuery Library only to this post, but it is one of your problems here. First, give reference to Jquery library, like so:

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

当你这样做时，会收到一条错误消息，说serializeObject不是一个函数。同样，您可以使用创建该函数的外部库或编写自己的函数：

And when you do, you get an error message, saying that serializeObject is not a function. Again, you can use an external library which creates that function or write your own like so:

$.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写这个函数，你可以从这里。

By the way thanks to @ravi_kant_dubey for writing this function, you can see the topic from here.

最后用这个做点什么代码，看看是否一切正常。

And finally do something with that code to see if everything works fine.

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

无论如何，如果你运行下面的脚本，你可以看到响应
返回没有任何问题。这意味着它正在工作。

Anyway, if you run the script below, you can see that the response returns without any problems. Which means that it is working.

$.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>

这篇关于如何将HTML表单提交到Google表格...没有Google表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！