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.
submitForm(). Is it submitSUForm()?submitForm() was submitSUForm(), there is no Position of var position = document.getElementById("Position").value;.email.section is not declared.signupUser at Google Apps Script, 7 arguments are prepared like signupUser(signupName, signupEmail, position, strand, section, password, confirmPassword). But, in your Javascript, 6 arguments are prepared like google.script.run.signupUser(mame, email, position, strand, section, password);. In this case, if (password === confirmPassword) { is always false.if (data[i][1] === email) { might be if (data[i][1] === signupEmail) {.I guessed that those issues might be the reason for your current issue of 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..
In order to remove this issue, how about the following modification?
dbpage.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 section = 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(name, email, position, strand, section, password, confirmPassword);
}
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
submitSUForm(); // 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>
Code.gsfunction 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] === signupEmail) {
return false;
}
}
if (password === confirmPassword) {
sheet.appendRow([signupName, signupEmail, position, strand, section, password]);
return true;
} else {
return false;
}
}
When I tested the above modified script and HTML, I confirmed that when "Signup" is run, the inputted values are put into the sheet "Login".
When you modify the Google Apps Script of Web Apps, please modify the deployment as a new version. By this, the modified script is reflected in Web Apps. Please be careful about this.
You can see the details of this in my report "Redeploying Web Apps without Changing URL of Web Apps for new IDE (Author: me)".