TypeError: Cannot read property 'data1' of undefined-CodePudding

I can't seem to find out why the object(data1) is not being read. And when i try to deploy the Web App I received this error message:

Exception: Malformed HTML content. Here's my code.

Another question:

In my form it has an option to Activate and input the start time. How can I add the end time to the same row if user selected to deactivate?

Code gs

function doGet(e) {
  return HtmlService.createTemplateFromFile('Index').evaluate()
  .setTitle('Enactment Tool')
  .addMetaTag('viewport', 'width=device-width,initial-scale=1')
  .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
};

let ss= SpreadsheetApp.getActiveSpreadsheet();

function saveData(obj) {
  
    let sheet = ss.getSheetByName('Feedback');
    let dateString = Utilities.formatDate(new Date(), "GMT-5", "MM/dd/yyyy HH:mm:ss");
    //Saving records to Google Sheet
    sheet.appendRow([
      obj.data1,
      obj.data2,
      dateString,
      Session.getActiveUser().getEmail()
      ]);

return true;
}

Index html

    <!DOCTYPE html>
<html lang="en">

<head>
    <base target="_top">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
    <!-- Add icon library -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>

 <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

        <style>
        body {
            font-family: Arial, Helvetica, sans-serif;
            color: white;
      background-image: linear-gradient(to right, #6a11cb 0%, #2575fc 100%);

        }
        .frame{
      border: 2px solid transparent;
      box-shadow: 10x 10x 15x rgb(193,182,182), -6px -6px 15px #eee;
      padding: 20px;
      max-width:480px;
      margin: 40px auto;
      margin-top: 50px;
      background: white:
      border-radius:10px;
    }
        h1 {
            font-family: 'Quicksand', sans-serif;
            font-size: 70px;
            color: white;
            font-variant: small-caps;
            text-align: center;
            font-weight: bold;
            padding: 15px 0px 15px 0px;
        }
        
        label {
            color: #333;
        }

</style>

</head>

<body> 
    <div >
        <div >
            <h1 style="text-align: center; color:green" class-="mb-4">Enactment Tool</h1> 

                                    <label for="need" >Enactment Request: *</label>
                  <div class = "mb-4">
                    <select id="input1" >
                          <option value=""></option>
                          <option value="">Activate</option>
                          <option value="2">Deactivate</option>
                    </select>
                  </div>
                                    <label for="time" >Time: *</label>
                  <div class = "mb-4">
                                            <input id="input2"  type="text" name="time" />
                                    </div>             
                                <div>
                                    <button id="submit" "> Send Email </button>
                </div>
        </div>
    </div>

     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>

<script>

document.getElementById('submit').addEventListener('click',submitForm);

function submitForm(){
  let input1 = document.getElementById('input1').value;
  let input2 = document.getElementById('input2').value;

  let obj = {
    data1 : input1,
    data2 : input2

  };
  if(input1  == "" || input2 ==""){
  Swal.fire({
  icon: 'info',
  title: 'Oops. Please fill out blank fields!'
  
})
}
  else{
      google.script.run
      .withSuccessHandler( () => {
      input1 = "";
      input2 = "";

      alert('Data sent!')

       } )
       .saveData(obj);

      };


  };

</script>   

</body>

</html>

CodePudding user response：

There are no form tags in your html. Some of your input1 values have none assigned and if input2 which is of type time returns a data object (I don't really know if they do or not) but if they do then that's a retricted parameter and cannot be passed via google.script.run