我在Google表格的背面有一张表格，并在其中一个div上创建了一个点击事件。出于某种原因，当我单击div时它正确执行，显示部分内容但立即将我重定向到另一个URL。知道为什么吗？
Google Script：
function doGet(e) {
return HtmlService
.createTemplateFromFile('index')
.evaluate()
.setSandboxMode(HtmlService.SandboxMode.NATIVE);
}
function writeForm(form) {
try {
var companyName = form.companyName; //these match to the named
fields in your form
var ss = SpreadsheetApp.openById('126iD9i-
KH_aV2WDUcwpUB52CS43rMxXklQjYz4HgPjM'); //the ID of the
spreadsheet you want to write to
var sheet = ss.getActiveSheet();
var newRow = sheet.getLastRow()+1;//go to the first blank row
var range = sheet.getRange(newRow, 1);
range.setValue(companyName);
} catch (error) {
return error.toString();
}
}
HTML：
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<meta charset="utf-8">
<!-- Mobile First -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Styles -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,600" rel="stylesheet">
<!-- Scripts -->
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(document).ready(function() {
$('#accordion1').hover(function() {
if($('#panel1').css("display") === 'none'){
$('#acc1Button').attr("src", "http://smart-hr.com/img/DataGather_circle_btn_red.png");
$('#accordion1').css("background", "#ac0002");
$('#acc1Header').css("color", "#fff");
}
else{
$('#acc1Button').attr("src", "http://smart-hr.com/img/DataGather_circle_btn_red_up.png");
$('#accordion1').css("background", "#ac0002");
$('#acc1Header').css("color", "#fff");
}
}, function() {
if($('#panel1').css("display") === 'none'){
$('#acc1Button').attr("src", "http://smart-hr.com/img/DataGather_circle_btn_gray.png");
$('#accordion1').css("background", "#eeeeee");
$('#acc1Header').css("color", "#545454");
}
else{
$('#acc1Button').attr("src", "http://smart-hr.com/img/DataGather_circle_btn_red_up.png");
$('#accordion1').css("background", "#ac0002");
$('#acc1Header').css("color", "#fff");
}
});
});
</script>
<style>
.container-fluid {
padding-right: 0;
padding-left: 0;
margin-right: auto;
margin-left: auto;
}
body,
html {
background-color: white;
margin: 0;
padding: 0;
}
h1 {
text-align: center;
}
h2 {
text-align: center;
}
table {
border: solid 1px black;
border-collapse: collapse;
width: 100%;
}
th,
tr td {
border: solid 1px black;
padding: 5px;
}
hr {
border-color: black;
}
.select-menu {
width: 25%;
height: 30px;
border: 1px solid #ccc;
border-radius: 2px;
background-color: #ded9db;
}
legend {
border-bottom: 1px solid black;
}
.btn span.glyphicon {
opacity: 0;
}
.btn.active span.glyphicon {
opacity: 1;
}
.tableCheck {
text-align: center;
vertical-align: middle;
}
.fixed-dialog {
position: fixed;
top: 50px;
left: 50px;
}
.plusBtn {
background-color: #edecde;
border: none;
}
#tableDiv {
overflow-x: auto;
}
#tableDiv2 {
overflow-x: auto;
}
#tableDiv3 {
overflow-x: auto;
}
#radioBtn .notActive {
color: #000000;
background-color: #fff;
}
#filePop1 {
width: 25%;
display: inline;
}
#filePop2 {
width: 25%;
display: inline;
}
#filepop3 {
width: 25%;
display: inline;
}
#confirmation p {
font-size: 20px;
font-style: oblique;
width: 80%;
margin: 0 auto;
}
#heading {
text-align: center;
}
#divHead {
height: 191px;
width: 100%;
margin: 0 !important;
padding: 0 !important;
background-image: url('http://smart-hr.com/img/DataGather_header.jpg');
background-repeat: no-repeat;
text-align: center;
white-space: nowrap;
-moz-box-shadow: 0 20px 20px -20px #000000;
-webkit-box-shadow: 0 20px 20px -20px #000000;
box-shadow: 0 20px 20px -20px #000000;
position: relative;
z-index: 10;
}
#grayHead {
height: 95px;
width: 100%;
margin-top: 0 !important;
margin-right: 0 !important;
margin-left: 0 !important;
margin-bottom: 5px !important;
padding: 0 !important;
background-image: url('http://smart-hr.com/img/DataGather_gray_header.jpg');
background-repeat: no-repeat;
text-align: center;
white-space: nowrap;
position: relative;
z-index: 0;
}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
.headImg {
vertical-align: middle;
}
#dataGather {
font-family: 'Open Sans', sans-serif;
font-weight: 600;
font-size: 48px;
color: #b5242b;
vertical-align: middle;
margin: 0px;
display: inline-block;
}
.subButton{
width: 12em;
height: 3.5em;
background-color: #d5d4d4;
color: white;
border: 0 none;
font-family: 'Open Sans', sans-serif;
font-weight: 600;
font-size: 14px;
text-transform: uppercase;
}
#subDiv{
text-align: center;
}
button.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: center;
outline: none;
transition: 0.4s;
}
.accordion h1 {
font-family: 'Open Sans', sans-serif;
font-weight: 300;
font-size: 55px;
margin-top: 8px;
padding-bottom: 50px;
text-align: center;
z-index: 2;
position: relative;
color: #545454;
}
button.accordion.active,
button.accordion:hover {
background-color: #ac0002;
}
button.accordion.active h1 {
color: #fff;
}
#panel1 {
background-color: white;
display: none;
color: black;
font-size: 12px;
}
#panel2 {
background-color: white;
display: none;
color: black;
font-size: 12px;
}
#panel3 {
background-color: white;
display: none;
color: black;
font-size: 12px;
}
#panel4 {
background-color: white;
display: none;
color: black;
font-size: 12px;
}
#panel5 {
background-color: white;
display: none;
color: black;
font-size: 12px;
}
</style>
</head>
<body>
<form class="form-horizontal" id="form" name="form" onsubmit="google.script.run.withSuccessHandler(formSubmitted) .writeForm(this); return false;">
<button class="accordion" id="accordion1" name="accordion1">
<h1 id="acc1Header">Company Basics</h1>
<img id="acc1Button" src ="http://smart-hr.com/img/DataGather_circle_btn_gray.png">
</button>
<div class="panel" id="panel1">
<br>
<fieldset>
<br>
<br>
<hr>
<br>
<br>
<div class="form-group" id="group1">
<label class="control-label col-sm-4" for="companyName">1. Company Name:</label>
<div class="col-sm-5">
<input type="text" name="companyName" class="form-control" id="companyName">
</div>
</div><br>
</fieldset>
</div>
<script>
//Script for clicking each section
function clicked1() {
console.log("clicked");
if (!($('#panel1').css("display") == 'none')) {
console.log("not showing");
$('#acc1Button').attr("src", "http://smart-hr.com/img/DataGather_circle_btn_red.png");
$('#panel1').hide();
} else {
console.log("showing");
$('#acc1Button').attr("src", "http://smart-hr.com/img/DataGather_circle_btn_red_up.png");
$('#panel1').show();
}
}
document.getElementById("accordion1").addEventListener("click", clicked1);
</script>
<!--<div id="subDiv">
<input class="subButton" type="submit" onclick="return validateForm()">
</div>-->
</form>
</body>
</html>
我为大量的代码道歉，并感谢任何花时间去看它的人，请告诉我这里是否有太多或者你需要一个特定的信息而不是所有的代码。非常感谢任何帮助。
答案 0 :(得分：1)
如果我理解正确，问题与此按钮有关：
<button class="accordion" id="accordion1" name="accordion1">
<h1 id="acc1Header">Company Basics</h1>
<img id="acc1Button" src ="http://smart-hr.com/img/DataGather_circle_btn_gray.png">
</button>
在这里你没有设置type属性，因此它将继承W3C规范的默认值＆＃34;提交＆＃34;，因为你在表单中，它将导致刷新，防止您看到面板（开头隐藏）。
尝试将类型设置为＆＃34;按钮＆＃34; ，这将覆盖默认类型，并应阻止您的代码命中服务器
<button class="accordion" type="button" id="accordion1" name="accordion1">
<h1 id="acc1Header">Company Basics</h1>
<img id="acc1Button" src ="http://smart-hr.com/img/DataGather_circle_btn_gray.png">
</button>