我对编码有点陌生。我必须制作一些东西，将HTML表单中的数据提交到谷歌表单中。我启用了API并遵循了所有步骤。现在，我尝试使用变量firstName、lastName、phoneNumber和电子邮件，以允许在单击提交按钮时提交输入。我没有使用表格，但如果需要，我愿意使用它。再次澄清：当你把文本输入到输入框中时，它应该在点击提交时将其附加到谷歌表单中。您需要一个端口为8000的python本地服务器，并运行html文件使其工作。
这里的问题是，我无法使用变量(firstName、lastName、email和phoneNumber(来代替execute函数中"values"部分的字符串。每当我单击execute按钮时，它都会附加诸如"Place_Holder"之类的字符串，但当我输入firstName时，它不会附加。抱歉解释这么长。这是我第一次在这里发帖。
<!DOCTYPE html>
<html>
<head>
<title>googleapi</title>
</head>
<body>
<h1>Information Form</h1>
<div>
<p>First Name:</p>
<input type="text" id="firstNameInput">
</div>
<div>
<p>Last Name:</p>
<input type="text" id="lastNameInput">
</div>
<div>
<p>Email:</p>
<input type="text" id="emailInput">
</div>
<div>
<p>Phone Number:</p>
<input type="number" id="phoneNumberInput">
</div>
<button id="submitButton">Submit</button>
<p id="submitMessage"></p>
<script>
document.getElementById("submitButton").addEventListener("click", displayMessage );
function displayMessage() {
var firstName = document.getElementById('firstNameInput').value;
var lastName = document.getElementById('lastNameInput').value;
var email = document.getElementById('emailInput').value;
var phoneNumber = document.getElementById('phoneNumberInput').value;
document.getElementById("submitMessage").innerHTML = "Hello " + firstName + " " + lastName + " your information has been submitted";
}
</script>
</body>
</html>
<script src="https://apis.google.com/js/api.js"></script>
<script>
/**
* Sample JavaScript code for sheets.spreadsheets.values.append
* See instructions for running APIs Explorer code samples locally:
* https://developers.google.com/explorer-help/guides/code_samples#javascript
*/
function authenticate() {
return gapi.auth2.getAuthInstance()
.signIn({scope: "https://www.googleapis.com/auth/drive https://www.googleapis.com/auth/drive.file https://www.googleapis.com/auth/spreadsheets"})
.then(function() { console.log("Sign-in successful"); },
function(err) { console.error("Error signing in", err); });
}
function loadClient() {
return gapi.client.load("https://content.googleapis.com/discovery/v1/apis/sheets/v4/rest")
.then(function() { console.log("GAPI client loaded for API"); },
function(err) { console.error("Error loading GAPI client for API", err); });
}
</script>
<script>
// Make sure the client is loaded and sign-in is complete before calling this method.
function execute() {
return gapi.client.sheets.spreadsheets.values.append({
"spreadsheetId": "*removed*",
"range": "A1:D2",
"includeValuesInResponse": "false",
"insertDataOption": "INSERT_ROWS",
"responseDateTimeRenderOption": "SERIAL_NUMBER",
"valueInputOption": "USER_ENTERED",
"resource": {
"values": [
[
"Place_Holder",
"Place_Holder",
"Place_Holder",
"Place_Holder"
]
]
}
})
.then(function(response) {
// Handle the results here (response.result has the parsed body).
console.log("Response", response);
},
function(err) { console.error("Execute error", err); });
}
gapi.load("client:auth2", function() {
gapi.auth2.init({client_id: '*removed*'});
});
</script>
<button onclick="authenticate().then(loadClient)">authorize and load</button>
<button onclick="execute()">execute</button>
<script src="main.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css">`
我了解您的情况以及您想做的事情，如下所示。
- 在您当前的情况下，您可以使用Sheets API将字符串放入电子表格
- 您希望使用工作表API的
append()将firstName, lastName, email, and phoneNumber放置到电子表格中
如果我的上述理解是正确的，那么这次修改怎么样？
修改点：
我认为变量不能放入Sheet的原因是在运行execute()时没有检索到变量。因此，当运行execute()时，它会进行修改以检索变量。
修改的脚本：
请修改如下。运行此脚本时，请按下浏览器上的执行按钮。
发件人：function execute() {
return gapi.client.sheets.spreadsheets.values.append({
"spreadsheetId": "*removed*",
"range": "A1:D2",
"includeValuesInResponse": "false",
"insertDataOption": "INSERT_ROWS",
"responseDateTimeRenderOption": "SERIAL_NUMBER",
"valueInputOption": "USER_ENTERED",
"resource": {
"values": [
[
"Place_Holder",
"Place_Holder",
"Place_Holder",
"Place_Holder"
]
]
}
})
function execute() {
var firstName = document.getElementById('firstNameInput').value;
var lastName = document.getElementById('lastNameInput').value;
var email = document.getElementById('emailInput').value;
var phoneNumber = document.getElementById('phoneNumberInput').value;
return gapi.client.sheets.spreadsheets.values.append({
"spreadsheetId": "*removed*",
"range": "A1:D2",
"includeValuesInResponse": "false",
"insertDataOption": "INSERT_ROWS",
"responseDateTimeRenderOption": "SERIAL_NUMBER",
"valueInputOption": "USER_ENTERED",
"resource": {
"values": [
[
firstName,
lastName,
email,
phoneNumber
]
]
}
})
注：
- 这是一个简单的修改。因此，请根据您的环境对此进行修改
如果我误解了你的问题，而这不是你想要的，我很抱歉。