I am running this program in app script and I am not sure where the problem is. When I try to fill up the sign up form and submit it, none of the values that I enter gets into my google spread sheet.
Here’s the html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Login & Registration Form</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap">
<style>
/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
min-height: 100vh;
width: 100%;
background: #009579;
}
.container{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
max-width: 430px;
width: 100%;
background: #fff;
border-radius: 7px;
box-shadow: 0 5px 10px rgba(0,0,0,0.3);
}
.container .registration{
display: none;
}
#check:checked ~ .registration{
display: block;
}
#check:checked ~ .login{
display: none;
}
#check{
display: none;
}
.container .form{
padding: 2rem;
}
.form header{
font-size: 2rem;
font-weight: 500;
text-align: center;
margin-bottom: 1.5rem;
}
.form input{
height: 60px;
width: 100%;
padding: 0 15px;
font-size: 17px;
margin-bottom: 1.3rem;
border: 1px solid #ddd;
border-radius: 6px;
outline: none;
}
.form input:focus{
box-shadow: 0 1px 0 rgba(0,0,0,0.2);
}
.form a{
font-size: 16px;
color: #009579;
text-decoration: none;
}
.form a:hover{
text-decoration: underline;
}
.form input.button{
color: #fff;
background: #009579;
font-size: 1.2rem;
font-weight: 500;
letter-spacing: 1px;
margin-top: 1.7rem;
cursor: pointer;
transition: 0.4s;
}
.form input.button:hover{
background: #006653;
}
.signup{
font-size: 17px;
text-align: center;
}
.signup label{
color: #009579;
cursor: pointer;
}
.signup label:hover{
text-decoration: underline;
}
</style>
</head>
<body>
<div class="container">
<input type="checkbox" id="check">
<div class="login form">
<header>Login</header>
<form id="loginForm">
<input type="email" placeholder="Enter your email" id="loginEmail">
<input type="password" placeholder="Enter your password" id="loginPassword">
<input type="button" class="button" value="Login" id="loginButton">
</form>
<div class="signup">
<span class="signup">Don't have an account?
<label for="check">Signup</label>
</span>
</div>
</div>
<div class="registration form">
<header>Create an account</header>
<form id="signupForm">
<input type="text" placeholder="Enter your full name" id="signupName">
<input type="text" placeholder="Enter your email" id="signupEmail">
<label for="position">Position:</label>
<select name="Position" id="position">
<option value="student">Student</option>
<option value="teacher">Teacher</option>
</select> <br>
<label for="strand">Strand:</label><br>
<select name="Strand" id="Strand">
<option value="">--Please select your strand below:--</option>
<option value="abm">ABM</option>
<option value="ESTEM-C">ESTEM-C</option>
<option value="ESTEM-E">ESTEM-E</option>
<option value="ESTEM-H">ESTEM-H</option>
<option value="HUMSS">HUMSS</option>
<option value="TVL">TVL</option>
</select>
<input type="text" placeholder="Section" id="Section">
<input type="password" placeholder="Create a password" id="signupPassword">
<input type="password" placeholder="Confirm your password" id="confirmPassword">
<input type="button" class="button" value="Signup" id="signupButton">
</form>
<div class="signup">
<span class="signup">Already have an account?
<label for="check">Login</label>
</span>
</div>
</div>
</div>
<script>
function submitSUForm() {
var name = document.getElementById("signupName").value;
var email = document.getElementById("signupEmail").value;
var position = document.getElementById("Position").value;
var strand = document.getElementById("Strand").value;
var email = document.getElementById("Section").value;
var password = document.getElementById("signupPassword").value;
var confirmPassword = document.getElementById("confirmPassword").value;
if (password !== confirmPassword) {
alert("Passwords do not match.");
return; // Stop further execution
}
google.script.run.signupUser(mame, email, position, strand, section, password);
}
document.addEventListener('DOMContentLoaded', function() {
const loginButton = document.getElementById('loginButton');
const signupButton = document.getElementById('signupButton');
loginButton.addEventListener('click', function() {
console.log("Login button clicked");
alert("Login button clicked"); // For testing purposes
const email = document.getElementById('loginEmail').value;
const password = document.getElementById('loginPassword').value;
google.script.run.withSuccessHandler(onLoginSuccess).loginUser(email, password);
});
signupButton.addEventListener('click', function() {
console.log("Signup button clicked");
alert("Signup button clicked"); // For testing purposes
submitForm(); // Call the submitForm function here
// Remaining signup button logic
});
function onLoginSuccess(result) {
if (result) {
// Redirect to the specified URL upon successful login
window.location.href = 'https://www.astoecompany.com';
} else {
alert('Login failed');
}
}
function onSignupSuccess(result) {
if (result) {
alert('Signup successful');
window.location.href = 'https://www.astoecompany.com';
} else {
alert('Signup failed');
}
}
});
</script>
</body>
</html>
and here’s the gs code:
function doGet() {
return HtmlService.createHtmlOutputFromFile('dbpage');
}
function loginUser(loginEmail, loginPassword) {
var sheet = SpreadsheetApp.openById('***').getSheetByName('Login');
var data = sheet.getDataRange().getValues();
for (var i = 1; i < data.length; i++) {
if (data[i][1] === email && data[i][5] === password) {
return false;
}
}
}
function signupUser(signupName, signupEmail, position, strand, section, password, confirmPassword) {
if (signupName === '' || signupEmail === '' || position === '' || strand === '' || section === '' || password === '' || confirmPassword === '') {
return false; // Empty fields are not allowed
}
var sheet = SpreadsheetApp.openById('**').getSheetByName('Login');
var data = sheet.getDataRange().getValues();
for (var i = 1; i < data.length; i++) {
if (data[i][1] === email) {
return false;
}
}
if (password === confirmPassword) {
sheet.appendRow([signupName, signupEmail, position, strand, section, password]);
return true;
} else {
return false;
}
}
Is there any problem with the eventlistener that I added? Amateur here. Thank you so much.
