我正在尝试将HTML表单数据发送到Google工作表。这是我的jquery代码：
$.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 v = $("#postStatus").serializeObject();
console.log(v);
function hideValidate(input) {
var thisAlert = $(input).parent();
$(thisAlert).removeClass('alert-validate');
$(thisAlert).find('.btn-hide-validate').remove();
}
var $form = $('form#data-entry'),
url = 'https://script.google.com/macros/s/AKfycbwuKy3XaIDoidAuP75V3Vs8QpDucbra5gjPCXEMe3HxIsJ/exec'
$('#submit-form').on('click', function(e) {
e.preventDefault();
var jqxhr = $.ajax({
url: url,
method: "GET",
dataType: "json",
data: $form.serializeObject()
})
})
在我检查工作表时提交表单后，只有第一列被填写，其余列显示为未定义。
我不确定问题是否在上面的代码中或其他地方。仅供参考，以下是HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Siti - Agent Entry Form</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--===============================================================================================-->
<link rel="icon" type="image/png" href="images/icons/favicon.ico"/>
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="fonts/iconic/css/material-design-iconic-font.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor/animate/animate.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor/css-hamburgers/hamburgers.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor/animsition/css/animsition.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor/select2/select2.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor/daterangepicker/daterangepicker.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor/noui/nouislider.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="css/util.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<!--===============================================================================================-->
<meta name="Siti Collection Entry Web Application" content="A data entry form for Siti Communications Group Agents">
</head>
<body>
<div class="container-contact100">
<div class="wrap-contact100">
<form action="agent.html" method="GET" id="data-entry" class="contact100-form validate-form" target="_blank">
<span class="contact100-form-title">
Agent Entry
</span>
<form>
<div class="wrap-input100 bg1 rs1-wrap-input100 validate-input" data-validate = "Enter VC Number">
<span class="label-input100">VC Number</span>
<input class="input100" type="number" name="vc_no" id="vc_no" placeholder="Enter VC Number" required>
</div>
</form>
<div class="container-contact100-form-btn">
<button class="contact100-form-btn">
<span>
<a onclick='customerSearch()' id="search">Validate VC</a>
<i class="fa fa-long-arrow-right m-l-7" aria-hidden="true"></i>
</span>
</button>
</div>
<form>
<div class="wrap-contact100">
<span id="customer_details">
<div class="">
<ul class="label-input100">
<p>Customer VC -</p>
<li id="c_vc" class="input100"></li>
<p>Customer Name -</p>
<li id="c_name" class="input100"></li>
<p>Customer Phone -</p>
<li id="c_phone" class="input100"></li>
<p>Due Date -</p>
<li id="d_d" class="input100"></li>
</ul>
</div>
</span>
</div>
</form>
<div class="wrap-input100 validate-input bg1" data-validate="Please Type Receipt Number">
<span class="label-input100">Receipt Number *</span>
<input class="input100" type="number" name="receipt" placeholder="Enter Receipt Number" required>
</div>
<div class="wrap-input100 validate-input bg1 rs1-wrap-input100" data-validate = "Enter Amount Paid by Customer">
<span class="label-input100">Amount *</span>
<input class="input100" type="number" name="amount" placeholder="Enter Amount Paid " required>
</div>
<div class="wrap-input100 input100-select bg1 validate-input" data-validate = "Select a Package">
<span class="label-input100">Needed Services</span>
<div>
<select class="js-select2" name="package">
<option value="" disabled selected>Select Package</option>
<option value=300>PKG 300</option>
<option value=250>PKG 250</option>
<option value=230>PKG 230</option>
<option value=200>PKG 200</option>
</select>
<div class="dropDownSelect2"></div>
</div>
</div>
<div>
</div>
<div class="wrap-input100 bg0 rs1-alert-validate">
<span class="label-input100">Remarks</span>
<textarea class="input100" name="remarks" placeholder="Your message here..."></textarea>
</div>
<div class="wrap-input100 validate-input bg1 rs1-wrap-input100" data-validate = "Enter PIN to submit">
<span class="label-input100">PIN *</span>
<input class="input100" type="number" id="password-3" pattern="[0-9]*" name="pin" placeholder="Enter Your PIN " required>
</div>
<div class="container-contact100-form-btn">
<button class="contact100-form-btn">
<span>
<input id="submit-form" type="button" onclick="return agentAuth()" href="agent.html" value = "Submit" />
<!-- <a id="next" onclick="return agentAuth()">Submit Entry</a> -->
<i class="fa fa-long-arrow-right m-l-7" aria-hidden="true"></i>
</span>
</button>
</div>
<div>
</div>
</form>
</div>
</div>
<!--===============================================================================================-->
<script src="vendor/jquery/jquery-3.2.1.min.js"></script>
<!--===============================================================================================-->
<script src="vendor/animsition/js/animsition.min.js"></script>
<!--===============================================================================================-->
<script src="vendor/bootstrap/js/popper.js"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<!--===============================================================================================-->
<script src="vendor/select2/select2.min.js"></script>
<script>
$(".js-select2").each(function(){
$(this).select2({
minimumResultsForSearch: 20,
dropdownParent: $(this).next('.dropDownSelect2')
});
$(".js-select2").each(function(){
$(this).on('select2:close', function (e){
if($(this).val() == "Please chooses") {
$('.js-show-service').slideUp();
}
else {
$('.js-show-service').slideUp();
$('.js-show-service').slideDown();
}
});
});
})
</script>
<!--===============================================================================================-->
<script src="vendor/daterangepicker/moment.min.js"></script>
<script src="vendor/daterangepicker/daterangepicker.js"></script>
<!--===============================================================================================-->
<script src="vendor/countdowntime/countdowntime.js"></script>
<!--===============================================================================================-->
<!--===============================================================================================-->
<script type="text/javascript" src="js/data.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
还有我的javascript：
function customerSearch(){
var customer;
var due_date;
var phone;
var vcid=document.getElementById('vc_no').value;
// var today = Utilities.formatDate(new Date(), "GMT+5", "dd/MM/yyyy")
for (var x in cust_DB){
if (cust_DB[x]["VC No"]==vcid){
customer = cust_DB[x]["Subscriber Name"];
due_date = cust_DB[x]["Due Date"];
phone = cust_DB[x]["Cel 1"];
}
}
if (customer==null){
alert("Customer not found!");
return false;
}
else {
alert("Customer found!\nCustomer Name: " +customer)
// location.reload(true);
document.getElementById("c_vc").innerHTML = vcid;
document.getElementById("c_name").innerHTML = customer;
document.getElementById("c_phone").innerHTML = phone;
document.getElementById("d_d").innerHTML = due_date;
return [vcid, customer, phone, due_date];
}
}
function agentAuth() {
var agent=document.getElementById('password-3').value;
for (var x in agent_DB){
if (agent_DB[x]["FIELD2"]==agent) {
var agent_found=agent_DB[x]["FIELD1"];
}
}
{if (customerSearch()==false) {
alert("Enter customer details first!!")
return false;
}
else if (agent_found==null){
alert("Invalid PIN!");
return false;
}
else {
alert("Agent verification successful!");
return true;
}}
}
PS：我对编程和HTML还很陌生。