How do I choose a modal to display my form and redirect to an external URL on submit form?-CodePudding

I have started to create a form with Apps Script, using materializecss to create a menu with 3 different layouts.

when I embed my URL to the New Google Sites, it doesn't use the layout (modal), I need to know how to select one of the 3 sidebar options.
After submit, the form data is posted to the spreadsheet, but it doesn't redirect to a different page.
it seems it will redirect without validating data, the if sentence is not connected to the redirect function.

function doGet(request) {
return HtmlService.createTemplateFromFile(`form`).evaluate().setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}
function include(filename){
var url="https://docs.google.com/spreadsheets/d/1sRKhZY27YVY4xMLJs9qAn_lAumaUKT1AH1SgeBrKk_E/edit#gid=0";
var ss= SpreadsheetApp.openByUrl;
var ws=ss.getSheetByName("data");
}
function onOpen(){
  var ui=SpreadsheetApp.getUi();
  ui.createMenu("My Menu")
  .addItem("Sidebar form", "showInsidebarform")
  .addItem("Modal Dialog form", "showInmodaldialogform")
  .addItem("Modeless Dialog form", "showInmodelessdialog")
  .addToUi();
}
//OPEN THE FORM IN SIDEBAR
function showInsidebarform() {
var userform=HtmlService.createTemplateFromFile("form").evaluate().setTitle("Subscribe");
SpreadsheetApp.getUi().showSidebar(userform); 
}
//OPEN THE FORM IN MODAL DIALOG
function showInmodaldialogform() {
 var userform=HtmlService.createTemplateFromFile("form").evaluate();
SpreadsheetApp.getUi().showModalDialog(userform, "Subscribe");
}
//OPEN THE FORM IN MODELESS DIALOG
function showInmodelessdialog() {
var userform=HtmlService.createTemplateFromFile("form").evaluate();
SpreadsheetApp.getUi().showModelessDialog(userform, "Subscribe");
}
function appenData(data){
  var ws=SpreadsheetApp.getActiveSpreadsheet().getSheetByName("data");
  ws.appendRow([data.name,data.email]);
}

<!DOCTYPE html>
   <html>
    <head>
    <!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material Icons" rel="stylesheet">
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>

    <body>
<div >
  <div >
    
           <div >
    <i >account_circle</i>
    <input id="name" type="text" >
    <label for="name">First Name</label>
    </div>
    
        <div >
    <i >email</i>
    <input id="email" type="text" >
    <label for="email">email</label>
   
        <div >
    <button  id="btn">Submit
    <i >send</i>
    </button>
    </div>

  </div><!--end row-->
</div>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
var nameBox=document.getElementById("name");
var emailBox=document.getElementById("email");

document.getElementById("btn").addEventListener("click",addRecord);

function addRecord(){
  var name=nameBox.value;
   var email=emailBox.value;
 
  if(name.trim().length==0||email.trim().length==0){
 M.toast({html: 'Name and email are required'})
  }
  else{
var data={
  name:nameBox.value, 
   email:emailBox.value,
};
}
google.script.run.appenData(data);
nameBox.value="";
emailBox.value="";

self.location="https://www.theapothecary.app/homedoctor"

};

      </script>


    </body>
  </html>

Im posting my full code here, it has credits to: https://www.youtube.com/watch?v=4SqsK3Vh42Q&lc=UgzHk8aEXCtiDyh8e0B4AaABAg.9ZmDWeons-P9ZmyFFSUhEJ

CodePudding user response：

If you want to make a registration system I recommend php

<!DOCTYPE html>
   <html>
    <head>
    <!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material Icons" rel="stylesheet">
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>

    <body>
<div >
  <div >
    
           <div >
    <i >account_circle</i>
    <input id="name" type="text" >
    <label for="name">First Name</label>
    </div>
    
        <div >
    <i >email</i>
    <input id="email" type="text" >
    <label for="email">email</label>
   
        <div >
    <button  id="btn">Submit
    <i >send</i>
    </button>
    </div>

  </div><!--end row-->
</div>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
var nameBox=document.getElementById("name");
var emailBox=document.getElementById("email");

document.getElementById("btn").addEventListener("click",addRecord);

function addRecord(){
  var name=nameBox.value;
   var email=emailBox.value;
 
  if(name.trim().length==0||email.trim().length==0){
 M.toast({html: 'Name and email are required'})
  }
  else{
var data={
  name:nameBox.value, 
   email:emailBox.value,
};
  window.open("https://www.theapothecary.app/homedoctor")
}
google.script.run.appenData(data);
nameBox.value="";
emailBox.value="";
self.location="https://www.theapothecary.app/homedoctor"
};

      </script>


    </body>
  </html>

If this is not the answer to your question. Can you explain more clearly where the problem lies