App script form submits to an unknown address after submit-CodePudding

I wanted to created a simple login form. But whenever the form is submitted, it goes to an address of https://n-hb3iawsdao7vaebunzezdpvnz2lfhrti7vfmd3a-0lu-script.googleusercontent.com/userCodeAppPanel? with an error of

Uncaught NetworkError: Connection failure due to HTTP 0

Everything works if I don't enclose it in a form tag but I need to because of the required attribute for the input tags.

Code.GS:

function checkLogin(username, password) {
var url = '';

var ss= SpreadsheetApp.openByUrl(url);
var webAppSheet = ss.getSheetByName("users");
var getLastRow =  webAppSheet.getLastRow();
var found_record = '';
for(var i = 1; i <= getLastRow; i  )
{
  if(webAppSheet.getRange(i, 2).getValue() == username && 
  webAppSheet.getRange(i, 4).getValue() == password)
{
  found_record = 'TRUE';
}    
}
if(found_record == '')
{
found_record = 'FALSE'; 
}

return found_record;

}

JavaScript:

     function loginUser() {

   var username = document.getElementById("username").value;
   var password = document.getElementById("password").value;
   
   google.script.run.withSuccessHandler(function(output) 
     {
      if(output == 'TRUE')
      {
       // console.log("Success");
      }
      else if(output == 'FALSE')
      {
       // console.log("Denied");
      }).checkLogin(username, password);
     }

HTML:

    <div >
     <div  style="background-color: slategrey;">
       <div >
         <form onsubmit="loginUser()">

                <span >
                    <img src="sample.png" border="0">
                </span>

                <span >
                    Intranet
                </span>

                <div  data-validate = "Enter username">
                    <!-- <input  type="text" name="username" placeholder="Username"> -->
        <input  type="text" id="username" placeholder="Username" required>
                    <span  data-placeholder="&#xf207;"></span>
                </div>

                <div  data-validate="Enter password">
                    <!-- <input  type="password" name="pass" placeholder="Password"> -->
        <input  type="password" id="password" placeholder="Password" required>
                    <span  data-placeholder="&#xf191;"></span>
                </div>

                <div >
                    <button type="submit" >
                        Login
                    </button>
                </div>

         </form>
       </div>
     </div>
   </div>

CodePudding user response：

Modification points:

When I saw your script, loginUser() is required to be modified. Because, } is required to be added. So, when your script is run by clicking the button of "Login", an error occurs beccause loginUser() has an issue. So, I'm worried that your showing script might be different from your tested script that occurred the error of Uncaught NetworkError: Connection failure due to HTTP 0.
In this modification, in order to correctly run the script of withSuccessHandler, <form onsubmit="loginUser()"> is modified to <form onsubmit="loginUser(); return false;">.
In your script, I thought that the process cost of checkLogin might be able to be reduced.

When these points are reflected in your showing script, how about the following modification?

Modified script:

Google Apps Script side:

function checkLogin(username, password) {
  var url = '';
  var ss = SpreadsheetApp.openByUrl(url);
  var webAppSheet = ss.getSheetByName("users");
  var find = webAppSheet.getDataRange().getDisplayValues().find(([, b, , d]) => b == username && d == password);
  return find ? 'TRUE' : 'FALSE';
}

Javascript side:

function loginUser() {
  var username = document.getElementById("username").value;
  var password = document.getElementById("password").value;
  google.script.run.withSuccessHandler(function (output) {
    if (output == 'TRUE') {
      console.log("Success");
    } else if (output == 'FALSE') {
      console.log("Denied");
    }
  }).checkLogin(username, password);
}

HTML side:

<div >
  <div  style="background-color: slategrey;">
    <div >
      <form onsubmit="loginUser(); return false;"> <!-- Modified -->

        <span >
          <img src="sample.png" border="0">
        </span>

        <span >
          Intranet
        </span>

        <div  data-validate="Enter username">
          <!-- <input  type="text" name="username" placeholder="Username"> -->
          <input  type="text" id="username" placeholder="Username" required>
          <span  data-placeholder="&#xf207;"></span>
        </div>

        <div  data-validate="Enter password">
          <!-- <input  type="password" name="pass" placeholder="Password"> -->
          <input  type="password" id="password" placeholder="Password" required>
          <span  data-placeholder="&#xf191;"></span>
        </div>

        <div >
          <button type="submit" >
            Login
          </button>
        </div>

      </form>
    </div>
  </div>
</div>

Note:

In this modification, it supposes that the files of Javascript, HTML and Google Apps Script are put in the same Google Apps Script project. Please be careful about this.
If you are using Web Apps, when you modified the script, please reflect the latest script to the Web Apps. Please be careful about this.