我的 html 表单中的用户输入未传送到我的 google 工作表

问题描述 投票：0回答：1

我正在应用程序脚本中运行这个程序，我不确定问题出在哪里。当我尝试填写注册表单并提交时，我输入的任何值都不会进入我的谷歌电子表格。

这是 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>

这是 gs 代码：

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;
  }
}

我添加的事件监听器有问题吗？这里是业余爱好者。非常感谢。

javascript google-sheets google-apps-script web-applications
1个回答
0
投票

修改要点：

  • 在你的脚本中，没有
    submitForm()
    。是
    submitSUForm()
    吗？
  • 如果 
    submitForm()
    是 
    submitSUForm()
    ，则 
    Position
    中没有 
    var position = document.getElementById("Position").value;
    。
  • 有2个
    email
    。
  • section
    未声明。
  • 在 Google Apps 脚本的 
    signupUser
    中，准备了 7 个参数，如 
    signupUser(signupName, signupEmail, position, strand, section, password, confirmPassword)
    。但是，在 Javascript 中，准备了 6 个参数，如 
    google.script.run.signupUser(mame, email, position, strand, section, password);
    。在这种情况下，
    if (password === confirmPassword) {
    始终是
    false
    。
  • 在 Google Apps 脚本方面，我猜测 
    if (data[i][1] === email) {
    可能是 
    if (data[i][1] === signupEmail) {
    。

我猜这些问题可能是您当前问题

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.
的原因。

为了解决这个问题，下面的修改如何？

修改后的脚本：

HTML 和 JavaScript：
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>

Google Apps 脚本：
Code.gs

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] === signupEmail) {
      return false;
    }
  }
  if (password === confirmPassword) {
    sheet.appendRow([signupName, signupEmail, position, strand, section, password]);
    return true;
  } else {
    return false;
  }
}

注：

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.