首页 / 技术问答 / Javascript问答列表 / 问答详情

Javascript 在我的html表单中的用户输入没有被传送到我的google表单中

我在应用程序脚本中运行这个程序，我不知道问题出在哪里. 当我try 填写注册表并提交它时，我输入的值没有一个进入我的谷歌Electron 表格.

下面是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;
  }
}

我添加的EventListener有问题吗？我是业余的.非常感谢.

推荐答案

修改点:

  • 在你的 playbook 里，没有submitForm().是submitSUForm()吗？
  • 如果submitForm()是submitSUForm()，那么就没有var position = document.getElementById("Position").value;中的Position.
  • 有2email人.
  • section没有宣布.
  • 在你的signupUser at Google Apps Script中，有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 Script方面，我猜测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 Script: 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;
  }
}

注:

  • 当我测试上面修改的脚本和HTML时，我确认当"Signup"运行时，输入值被放入工作表"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.

  • 你可以在我的报告"Redeploying Web Apps without Changing URL of Web Apps for new IDE (Author: me)"中看到这个细节.

Javascript相关问答推荐

在JS中获取名字和姓氏的首字母

当promise 在拒绝处理程序被锁定之前被拒绝时，为什么我们会得到未捕获的错误？

微软Edge Select 间隙鼠标退出问题

TypScript界面中的Infer React子props

类型自定义lazy Promise. all

浮动Div的淡出模糊效果

加载背景图像时同步旋转不显示的问题

编辑文本无响应.onClick(扩展脚本)

为什么我的自定义元素没有被垃圾回收？

Angular 形式，从DOM中删除不会删除指定索引处的内容，但会删除最后一项

创建以键值对为有效负载的Redux Reducer时，基于键的类型检测

如果一个字符串前面有点、空格或无字符串，后面有空格、连字符或无字符串，则匹配正则表达式

使用父标签中的Find函数查找元素

如何使用<；Link>；执行与JS Reaction中的"；window.Location=/GameOverDied；"；类似的操作？

图表4-堆叠线和条形图之间的填充区域

使用RxJS from Event和@ViewChild vs KeyUp事件和RxJS主题更改输入字段值

在Java脚本中录制视频后看不到曲目

Next.js无法从外部本地主机获取图像

如何修复错误&语法错误：不能在纯react 项目中JEST引发的模块&之外使用导入语句？

重新渲染过多(&Q).REACT限制渲染次数以防止无限循环.使用REACT下拉菜单时

实用课程推荐
相关教程推荐
休闲君评测 |  TOOLFK工具网 |  古诗文网 |  良许Linux教程网 |  Python之禅 |  红色石头 |  入党申请书 | 

© 2020 Hi LearnFk 意见反馈 免责声明 关于我们 桂ICP备11002319号-3 友链&广告位+QQ: 1963612630