Why am I being redirected after clicking on my div element?
Question
I have a form I'm building on the back of a Google Sheet, and have created a click event on one of the divs. For some reason, when I click the div it executes properly, showing the section content but immediately redirects me to another URL. Any idea why?
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>
I apologise for the extensive amount of code, and appreciate anyone taking the time to look at it, please tell me if there is too much here or you need a particular piece of information instead of all the code. Any assistance is greatly appreciated.
1 answers
solution1
1 ACCPTED 2018-05-16 16:47:21
If i understood correctly the problem is related to this button:
<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>
Here you're not setting the type attribute, hence it will inherit the default one that for W3C specification is "submit", and since you're inside a form it will cause a refresh preventing you from seeing the panel (that at the beginning is hidden).
try just to set the type to "button" , this will override the default type and should prevent your code to hit the server
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Why am I being redirected to my php file in this contact form?
Why am I not being redirected to a new page?
Why am I not being redirected when I should
Why am I not able to revive the colour of my div element?
Why i am getting multiple element appended while clicking the button?
How can I achieve an autoclick with Javascript / Jquery after being redirected to my homepage url?
I am using Firebase authentication for my application. There seems to be an infinite loop where the page keeps being redirected over and over again
Div hides after clicking on any child of this element
I am trying to arrange my html/css/jquery so I can toggle the visibility of a div by double clicking on it
Why am I not being redirect to my selected path? React Router
Related Tags