如何将HTML表单提交到Google表格...没有Google表单
我正在尝试按照规定创建表单,但我在表格字段的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>
欢迎来到*,
Welcome to *,
我不知道你是否错过了将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>